GestureDetector 改变子部件的样式属性答案

【问题标题】：GestureDetector changing the style properties of the child widgetGestureDetector 改变子部件的样式属性
【发布时间】：2022-01-03 05:29:04
【问题描述】：

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

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

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

我在这里分享我的代码。在这段代码中，我还没有使用 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 小部件，但无法纠正它。任何帮助感谢大家。

【问题讨论】：

标签： android flutter flutter-layout

【解决方案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),
            ),
          )),
    );
  }
}

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

【讨论】：