GestureDetector 改变子部件的样式属性

Question

我想让我的自定义小部件响应触摸，因此我使用了 GestureDetector 的 onTap 方法。它正在工作，但它也在改变我不想要的自定义小部件的尺寸。我正在发布一些代码和屏幕截图以使情况更清楚。

我想要的是这个，只是一张 MALE 卡（我的自定义小部件名为 ReusableCard）。

在 GestureDetector 中包装我的 ReusableCard 小部件后，我得到的是这个。

我在这里分享我的代码。在这段代码中，我还没有使用 GestureDetector。

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
            child: Text('BMI Calculator')
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [

                ReusableCard(activeCardColor,
                    IconContents(FontAwesomeIcons.mars, 'MALE')),
                ReusableCard(activeCardColor,
                    IconContents(FontAwesomeIcons.venus, 'FEMALE')),

              ],
            ),
          ),
          Expanded(
            child: Row(
              children: [
                ReusableCard(activeCardColor),
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: [
                ReusableCard(activeCardColor),
                ReusableCard(activeCardColor),
              ],
            ),
          ),
          Container(
            color: bottomContainerColor,
            width: double.infinity,
            margin: EdgeInsets.only(top: 10),
            height: bottomContainerHeight,
          ),
        ],
      ),
    );
  }
}

代码的真正内容部分在 Blockquotes 中。将 GestureDetector 添加到 MALE ReusableCard 后的肉质部分。

        GestureDetector(
          child: ReusableCard(activeCardColor,
              IconContents(FontAwesomeIcons.mars, 'MALE')),
        ),
        ReusableCard(activeCardColor,
            IconContents(FontAwesomeIcons.venus, 'FEMALE')),

我不认为它是否有帮助，但我也与你们分享我的 ReusableCard 代码。

class ReusableCard extends StatelessWidget {
  ReusableCard(this.colour, [this.cardChild]);

  final Color colour;
  final Widget cardChild;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        child: cardChild,
        margin: EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(10),
        ),
      ),
    );
  }
}

我已经检查了文档，我似乎做的一切都是正确的。我可以从中推断出我在某个地方弄乱了 Expanded 小部件，但无法更正它。任何帮助感谢大家。

Answer 1

我建议将 GestureDetector 添加到 ReusableCard 中，作为 Expanded 的子项。

class ReusableCard extends StatelessWidget {
  ReusableCard(
    this.colour, {
    required this.cardChild,
    required this.onTap,
  });

  final Color colour;
  final Widget cardChild;
  final VoidCallback onTap;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
          onTap: onTap,
          child: Container(
            child: cardChild,
            margin: EdgeInsets.all(15),
            decoration: BoxDecoration(
              color: colour,
              borderRadius: BorderRadius.circular(10),
            ),
          )),
    );
  }
}

这样您就不需要用破坏 Expanded 小部件的 GestureDetector 包装 ReusableCard。

GestureDetector 改变子部件的样式属性

GestureDetector changing the style properties of the child widget

android

flutter

flutter-layout