Flutter中GestureDetector包裹ReusableCard后组件尺寸异常问题求助

问题根因 #

Expanded 组件有明确的生效限制：必须直接作为 Row、Column、Flex 这类 Flex 容器的直接子节点，才能正常按权重分配空间。
未添加 GestureDetector 时，ReusableCard 返回的 Expanded 是 Row 的直接子节点，所以两个卡片可以平分宽度。当你在 ReusableCard 外层套了 GestureDetector 之后，Expanded 的父节点变成了 GestureDetector 不再是 Row，因此 Expanded 直接失效，卡片会收缩到适配内容的尺寸，就出现了变形问题。

解决方案 #

方法1：将点击事件封装到ReusableCard内部（更推荐，复用性更强）

修改ReusableCard代码，新增点击回调参数，把GestureDetector放到Expanded内部，不破坏Expanded和父级Row的从属关系：

class ReusableCard extends StatelessWidget {
  ReusableCard(this.colour, [this.cardChild, 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),
          ),
        ),
      ),
    );
  }
}

使用时直接传入点击逻辑即可：

ReusableCard(
  activeCardColor,
  IconContents(FontAwesomeIcons.mars, 'MALE'),
  () {
    // 你的点击处理代码
  },
),
ReusableCard(
  activeCardColor,
  IconContents(FontAwesomeIcons.venus, 'FEMALE'),
),

方法2：把Expanded移到组件外层

如果不想修改原有ReusableCard的代码，就把ReusableCard内部的Expanded去掉，使用时给每个GestureDetector外层都套Expanded：
首先修改ReusableCard去掉外层Expanded：

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

  final Color colour;
  final Widget cardChild;

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

使用时外层统一套Expanded：

Expanded(
  child: GestureDetector(
    onTap: () {
      // 点击处理逻辑
    },
    child: ReusableCard(activeCardColor, IconContents(FontAwesomeIcons.mars, 'MALE')),
  ),
),
Expanded(
  child: ReusableCard(activeCardColor, IconContents(FontAwesomeIcons.venus, 'FEMALE')),
),

内容的提问来源于stack exchange，提问作者Anant