从 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"),
    );
  }

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

谢谢你的帮助 ！

编辑：基本上，我试图做此

Answer 1

尝试删除可变高度逻辑，只需将按钮包装在Expanded小部件中。 这几乎就是它的构建目的。

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

Answer 2

如果 4 个按钮是唯一的小部件，则不需要使用ListView只需使用带有mainAxisAlignment: MainAxisAlignment.spaceEvenly的列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 3

您可以使用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 4

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

这里的很多评论可能会提供适合您的解决方案，但这是我的。 我通过使用SizedBox像我想要的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,
      ),
    );
  }

用户可以点击彩色按钮上的任何地方，它就会注册。 现在我将添加图像和透明度以使其看起来不错！