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

用戶可以點擊彩色按鈕上的任何地方，它就會注冊。 現在我將添加圖像和透明度以使其看起來不錯！