Flutter技术问询：如何让按钮宽度匹配父布局？

嗨，这个问题其实很好解决，我给你几个实用的方案：

方案1：直接给按钮设置minWidth: double.infinity #

你的Container已经固定了200.0的宽度，只需要给RaisedButton添加minWidth: double.infinity属性，它就会自动填满父容器的宽度——完全不需要用Expanded（Expanded是给Row/Column这类弹性布局分配剩余空间用的，你这个场景根本用不上）。

修改后的代码：

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
      "Submit",
      style: new TextStyle(
        color: Colors.white,
      ),
    ),
    colorBrightness: Brightness.dark,
    onPressed: () { _loginAttempt(context); },
    color: Colors.blue,
    minWidth: double.infinity, // 关键属性：让按钮占满父容器宽度
  ),
),

方案2：使用新版ElevatedButton（推荐） #

因为RaisedButton已经被Flutter官方标记为废弃了，建议换成ElevatedButton，可以通过ButtonStyle更灵活地设置尺寸：

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: ElevatedButton(
    child: new Text(
      "Submit",
      style: new TextStyle(
        color: Colors.white,
      ),
    ),
    onPressed: () { _loginAttempt(context); },
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.blue,
      minimumSize: Size(double.infinity, 50), // 宽度占满父容器，高度可自定义
    ),
  ),
),

关于Expanded的补充说明 #

如果你的按钮是放在Row或者Column里面，想要让它占据布局里的剩余空间，这时候才需要用Expanded包裹按钮，比如：

Row(
  children: [
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: Text("Submit"),
      ),
    ),
  ],
)

这种情况下Expanded只会在布局的主轴方向（Row是水平，Column是垂直）扩展，并不会双向拉伸，你之前的误解应该是没搞清楚它只作用于所在布局的主轴方向~

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