时间戳

首页 > 解决方案 > 从 Flutter 开始：如何让 4 个按钮填充一个 SafeArea

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

问题描述

我是 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),
          ],
        ),
      ),
    );
  }

如您所见，我将 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"),
    );
  }

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

谢谢你的帮助 ！

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

标签： androidflutterdartflutter-layout

解决方案

您可以使用ColumnandExpanded来完成这项工作。如果你想让你的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),
            ),
          ],
        ),
      ),
    );
  }

推荐阅读