Flutter中如何让Row内Card中的按钮铺满卡片宽度？

错误原因 #

Row在水平方向默认不会给子Widget分配固定宽度，Card作为Row的子节点，没有明确的宽度约束。当你设置CrossAxisAlignment.stretch或者给SizedBox设double.maxFinite时，Flutter无法计算出具体的宽度值，就会触发无限宽度的约束错误。

解决方案 #

方案1：用Expanded包裹Card，让卡片平分Row可用空间 #

给每个Card外层包裹Expanded，让卡片获取Row分配的水平空间，再通过CrossAxisAlignment.stretch让按钮铺满卡片宽度：

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      color: Colors.black,
      width: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: awards
            .map((award) => Expanded(
                  child: Card(
                    elevation: 3,
                    surfaceTintColor: Colors.white,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 8, vertical: 16.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          OutlinedButton(
                              onPressed: () {}, child: const Text("Hello")),
                        ],
                      ),
                    ),
                  ),
                ))
            .toList(),
      ),
    ),
  ],
);

方案2：给Card设置固定宽度 #

如果不需要卡片平分空间，可直接给Card设置固定宽度，再配合CrossAxisAlignment.stretch实现按钮铺满：

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      color: Colors.black,
      width: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: awards
            .map((award) => SizedBox(
                  width: 120, // 自定义卡片宽度
                  child: Card(
                    elevation: 3,
                    surfaceTintColor: Colors.white,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 8, vertical: 16.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          OutlinedButton(
                              onPressed: () {}, child: const Text("Hello")),
                        ],
                      ),
                    ),
                  ),
                ))
            .toList(),
      ),
    ),
  ],
);

原理说明 #

• Expanded或固定宽度的SizedBox会给Card提供明确的水平约束，解决了Row中子Widget无宽度参考的问题。
• CrossAxisAlignment.stretch会让Column的子Widget（按钮）拉伸至Column的最大宽度，而Column的宽度由外层的Card/Expanded确定，不会出现无限宽度的冲突。

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