带有两个大按钮的 Flutter View

Question

我想制作一个带有两个大按钮的 View 。我看到了一个包含 Row 和 Expanded 的示例，但是，Column 的工作方式不同。我尝试使用高度 MediaQuery.of(context).size.height * 0.5 的 Container，但我使按钮溢出的填充。

像这样

编辑:完整代码

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Title'),
        ),
        body: Padding(
            padding: EdgeInsets.all(12),
            child: Column(children: <Widget>[
              Expanded(
                  child: Padding(
                      padding: EdgeInsets.all(12),
                      child: OutlineButton(
                        onPressed: () => null,
                        child: Text('Button A'),
                      ))),
              Expanded(
                child: Padding(
                  padding: EdgeInsets.all(12),
                  child: OutlineButton(
                    onPressed: () => null,
                    child: Text('Button B'),
                  ),
                ),
              )
            ])));
  }
}

Answer 1

您需要在 Column 小部件中添加属性 crossAxisAlignment: CrossAxisAlignment.stretch 以使所有子级在交叉方向(X 轴)上拉伸(stretch)。

您可以在此处查看此工作的实例:https://dartpad.dev/825104f44446432166803c0473ea4437