Question

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

类似这样的东西

编辑：完整代码

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

您需要在“列”小部件中添加属性crossAxisAlignment: CrossAxisAlignment.stretch，以使所有子项都沿横向（X轴）拉伸。

您可以在此处看到此示例的实时示例：https://dartpad.dev/825104f44446432166803c0473ea4437

Answer 2

在“ Flexible”中包装您的列，然后添加列crossAxisAlignment: CrossAxisAlignment.stretch

Flexible(
  child: Padding(
      padding: EdgeInsets.all(12),
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          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 3

return Scaffold(
  appBar: AppBar(
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: Text(widget.title),
  ),
  body: Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: RaisedButton(
              child: Text("1"),
              onPressed: (){},
              color: Colors.orange,
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: RaisedButton(
              child: Text("2"),
              onPressed: (){},
              color: Colors.blue,
            ),
          ),
        )
      ],
    ),
  )
);

有两个大按钮的颤振视图

3 个答案: