如何让按钮扩展至父组件尺寸？Expanded在按钮与容器中表现差异问题

嘿，我完全懂你遇到的困惑——同样套在Expanded里，MaterialButton和Container的布局表现不一样，导致你想要的方形按钮没做出来，核心原因其实是MaterialButton自带默认的最小尺寸约束，而Container没有这个限制！

问题根源拆解 #

• MaterialButton默认有minWidth: 88.0和height: 36.0的约束，哪怕你用Expanded给它分配了Row里的可用空间，它也不会突破这个最小尺寸去填满空间，所以看起来按钮会比旁边的Container小一圈。
• 而Container没有默认的尺寸限制，会完全服从Expanded的空间分配，所以能完美填满对应的区域，这就是你看到红、绿Container能占满，按钮却不行的原因。

两种解决方案 #

方案1：移除MaterialButton的尺寸约束

直接修改MaterialButton的minWidth和height属性，让它能跟随Expanded的空间拉伸：

Expanded(
  flex: 2,
  child: Column(
    children: <Widget>[
      Expanded(
        child: Row(
          children: <Widget>[
            Expanded(
              child: MaterialButton(
                minWidth: 0, // 去掉最小宽度限制
                height: double.infinity, // 让高度填满Expanded的空间
                onPressed: () {},
                color: Colors.blue,
                child: const Text("按钮1"),
              ),
            ),
            Expanded(
              child: MaterialButton(
                minWidth: 0,
                height: double.infinity,
                onPressed: () {},
                color: Colors.orange,
                child: const Text("按钮2"),
              ),
            ),
            const Expanded(child: Container(color: Colors.red)),
            const Expanded(child: Container(color: Colors.green)),
          ],
        ),
      ),
    ],
  ),
)

这样修改后，MaterialButton就会和Container一样，完全填满Expanded分配的空间，实现你想要的方形按钮效果。

方案2：用InkWell+Container自定义按钮

如果你想更灵活地控制按钮样式，也可以用InkWell（保留水波纹点击效果）搭配Container来模拟按钮，完全由你掌控尺寸：

Expanded(
  flex: 2,
  child: Column(
    children: <Widget>[
      Expanded(
        child: Row(
          children: <Widget>[
            Expanded(
              child: InkWell(
                onTap: () {},
                child: Container(
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: const Text("按钮1", style: TextStyle(color: Colors.white)),
                ),
              ),
            ),
            Expanded(
              child: InkWell(
                onTap: () {},
                child: Container(
                  color: Colors.orange,
                  alignment: Alignment.center,
                  child: const Text("按钮2", style: TextStyle(color: Colors.white)),
                ),
              ),
            ),
            const Expanded(child: Container(color: Colors.red)),
            const Expanded(child: Container(color: Colors.green)),
          ],
        ),
      ),
    ],
  ),
)

小提示 #

• 如果需要保留MaterialButton的默认交互效果（比如点击高亮、水波纹），方案1更合适；
• 如果要完全自定义按钮的圆角、阴影、尺寸等细节，方案2的自由度更高。

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