Flutter中如何水平添加按钮？新手求助：按钮无法实现类似Android的match_parent效果

嘿，我懂你想要的效果——让三个按钮平分Row的可用宽度，就像Android里给按钮设置match_parent再配合权重那样对吧？你当前用MainAxisAlignment.spaceBetween只是让按钮在Row里分散排列，但并不会让按钮本身拉伸填充空间，因为默认ElevatedButton的宽度是包裹内容的。

最简单的解决方案：用Expanded包裹每个按钮 #

Expanded组件会让它的子组件占据Row（或Column）中剩余的可用空间，当你给三个按钮都套上Expanded时，它们会自动平分Row的宽度（默认每个的flex值都是1，权重相等）。

修改后的代码如下：

Row(
  children: [
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text("Male"),
      ),
    ),
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text("Female"),
      ),
    ),
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text("Other"),
      ),
    ),
  ],
)

额外说明： #

• 如果想要某个按钮占比更大，可以给对应的Expanded设置flex属性，比如让"Other"按钮占两倍宽度：

  Expanded(flex:2, child: ElevatedButton(...))
  

  另外两个保持flex:1，这样宽度比例就是1:1:2。
• 如果你不想强制按钮填充全部空间（比如允许按钮最小宽度是内容宽度），可以用Flexible代替Expanded，但Flexible默认不会强制拉伸，需要配合fit: FlexFit.tight才能达到和Expanded一样的效果。

我当初刚接触Flutter的时候也纠结过这个点，Row/Column的布局逻辑和Android的LinearLayout确实有点不一样，记住Expanded是处理这种均分空间需求的利器就行😉

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