Flutter中ButtonBar子按钮无法占满空间的解决方案求助

我之前也碰到过这个问题，ButtonBar默认会让子按钮保持最小的必要尺寸，哪怕你设置了mainAxisSize: MainAxisSize.max也没用——因为它不会自动给子组件添加扩展约束。这里给你几个实用的解决方法：

方法一：用Expanded包裹按钮（最推荐，灵活适配） #

Expanded会让子组件填充ButtonBar的可用空间，要是你有多个按钮，还能通过flex属性分配它们的宽度比例。修改后的代码如下：

Padding(
  padding: const EdgeInsets.all(8.0),
  child: ButtonBar(
    mainAxisSize: MainAxisSize.max,
    alignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
        child: RaisedButton(
          child: Text('Save'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => OtpPage()));
          },
        ),
      ),
    ],
  ),
)

如果是多个按钮的场景（比如“保存”+“取消”），可以这样分配宽度比例：

Expanded(flex: 2, child: RaisedButton(child: Text('Save'), ...)),
Expanded(flex: 1, child: OutlinedButton(child: Text('Cancel'), ...)),

方法二：直接设置按钮的最小宽度 #

要是你只想让单个按钮占满ButtonBar的宽度，可以给RaisedButton设置minWidth: double.infinity，按钮会自动拉伸到父容器的宽度：

Padding(
  padding: const EdgeInsets.all(8.0),
  child: ButtonBar(
    mainAxisSize: MainAxisSize.max,
    alignment: MainAxisAlignment.center,
    children: <Widget>[
      RaisedButton(
        minWidth: double.infinity,
        child: Text('Save'),
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => OtpPage()));
        },
      ),
    ],
  ),
)

方法三：调整按钮内边距（适合微调宽度） #

如果不想完全占满，只是想让按钮更宽一点，可以给按钮添加padding属性自定义尺寸：

RaisedButton(
  padding: EdgeInsets.symmetric(horizontal: 40, vertical: 12),
  child: Text('Save'),
  onPressed: () {...},
)

这种方法适合需要自定义按钮宽度，但又不想占满整个Bar的场景。

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