从 Flutter 开始：如何让 4 个按钮填充一个 SafeArea

Question

我是 Dart 和 Flutter 的初学者，我的项目是在构建应用程序的同时学习。我通过在线课程学习了基础知识，并且有 Java 基础。

现在，在我的主页中，我尝试让 4 个按钮占据整个屏幕。我目前的布局是让它们都占用相等的空间并垂直堆叠。 问题是，我找不到让 RaisedButton 自动填充的方法。我已经尝试检索屏幕的高度并将其在按钮之间进行划分，但它不起作用。这是我的做法： 一、主屏布局：

class Homescreen extends StatelessWidget {
  Widget build(context) {
    double height = MediaQuery.of(context).size.height - 60;
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: [
            PlanningButton(height),
            Container(margin: EdgeInsets.only(top: 20.0)),
            BookingButton(height),
            Container(margin: EdgeInsets.only(top: 20.0)),
            ModifyButton(height),
            Container(margin: EdgeInsets.only(top: 20.0)),
            CancelButton(height),
          ],
        ),
      ),
    );
  }

如您所见，我将高度参数传递给所有围绕此模型构建的按钮：

  Widget PlanningButton(double pixel_y) {
    return RaisedButton(
      padding: EdgeInsets.all(pixel_y / 8.0),
      onPressed: () {}, //goes to the planning screen
      color: Colors.blue[200],
      child: Text("Planning"),
    );
  }

然而，它从来都不是完全正确的。我认为它没有考虑到通知栏或导航栏。 我怀疑有一种解决方法涉及将按钮包装到容器中或使用具有类似按钮属性的不同类型的小部件，但我找不到适合我的需求。

感谢您的帮助！

编辑：我基本上是在尝试做this

Answer 1

尝试删除可变高度逻辑，并将您的按钮简单地包装在 Expanded 小部件中。这几乎就是它的目的。

在这里查看：https://api.flutter.dev/flutter/widgets/Expanded-class.html

Answer 2

您可以使用Column 和Expanded 来完成这项工作。如果你想让你的Column 可以滚动，你可以用SingleChildScrollView 包裹它。我使用SizedBox 而不是Container 来制作间距，因为它更有效并且专为它设计。

class Homescreen extends StatelessWidget {
  Widget build(context) {
    double height = MediaQuery.of(context).size.height - 60;
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(
              child: PlanningButton(height)
            ),
            SizedBox(height:20),
            Expanded(
              child: BookingButton(height),
            ),
            SizedBox(height:20),
            Expanded(
              child: ModifyButton(height),
            ),
            SizedBox(height:20),
            Expanded(
              child: CancelButton(height),
            ),
          ],
        ),
      ),
    );
  }

Answer 3

如果 4 个按钮是唯一的小部件，则不需要使用 ListView，只需使用带有 mainAxisAlignment: MainAxisAlignment.spaceEvenly 的列

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.red,
                child: Center(
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text("button"),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
                child: Center(
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text("button"),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.green,
                child: Center(
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text("button"),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.yellow,
                child: Center(
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text("button"),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 4

在您阅读本文之前，这不是做事的最佳方式，但它是我至少用于原型设计的一种方式。您可能会发现使用带有列表和参数 MainAxisAlignment 的容器更适合您。

这里的很多 cmets 可能会提供适合您的解决方案，但这是我的。通过使用SizedBox，我让它按我想要的方式工作。

首先，我恢复了屏幕的宽度，然后我创建了按钮并将它们放入适合屏幕宽度的 SizedBox 中，我将它们放入 Column 并添加了一些 Container 作为样式点。

结果：

代码：

class Homescreen extends StatelessWidget {
  Widget build(context) {
    double width = MediaQuery.of(context).size.width; //getting screen width
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(margin: EdgeInsets.only(bottom: 20.0)),
            PlanningButton(width),
            Container(margin: EdgeInsets.only(bottom: 20.0)),
            BookingButton(width),
            Container(margin: EdgeInsets.only(bottom: 20.0)),
            ModifyButton(width),
            Container(margin: EdgeInsets.only(bottom: 20.0)),
            CancelButton(width),
            Container(margin: EdgeInsets.only(bottom: 20.0)),
          ],
        ),
      ),
    );
  }

  Widget PlanningButton(double width) {
    return Expanded(
      child: SizedBox(
        width: width - 20,
        child: RaisedButton(
          onPressed: () {},
          color: Colors.blue,
          child: Text(
            "planning",
            textScaleFactor: 4.0,
          ),
        ),
        //fit: BoxFit.cover,
      ),
    );
  }

用户可以点击彩色按钮上的任意位置，它就会注册。现在我将添加图像和透明度以使其看起来更好！