版面配置

由於 Flutter 是一套 UI 工具包， 你會花大量時間使用 Flutter 元件建置版面配置。

在本章節中，你將學習如何使用 一些最常見的版面配置元件建置版面配置。 這包含高階元件，例如 Scaffold 和 AppBar，它們負責畫面的結構排版， 以及低階元件，例如 Column 或 Row， 可將元件垂直或水平排列。

行動應用程式通常在頂端有一條稱為「應用程式列 (app bar)」的橫列， 可顯示標題、導覽控制項及/或操作按鈕。

在應用程式中新增應用程式列最簡單的方式， 是使用兩個元件：Scaffold 和 AppBar。

Scaffold 是一個便利元件，提供 Material 風格的頁面版面配置， 讓你可以輕鬆地在應用程式頁面中加入應用程式列、抽屜式導覽、 導覽列等。AppBar 當然就是應用程式列本身。

由 flutter create --empty 指令產生的程式碼已包含 AppBar 元件和 Scaffold 元件。 以下程式碼將其更新為使用額外的版面配置元件：Align。 這會將標題定位到左側，否則預設會置中。 Text 元件包含標題本身的文字。

在你的 MainApp 元件的 build 方法中修改 Scaffold。

直接傳入列舉或靜態屬性（例如 Alignment.centerLeft） 也可以使用 Dart 的點號簡寫 語法縮短， 你可以在 Dart 官方文件及 Flutter 簡寫概覽 中進一步了解。

class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Align(
            alignment: Alignment.centerLeft,
            child: Text('Birdle'),
          ),
        ),
        body: Center(child: Text('Hello World!')),
      ),
    );
  }
}

隨著應用程式成長，考量元件樹的結構變得越來越重要。 在此階段，元件樹首次出現了「分支」， 現在的結構如下圖所示：

在你的 main.dart 檔案中加入以下程式碼， 新增一個名為 GamePage 的元件。 此元件最終將顯示遊戲本身所需的 UI 元素。

class GamePage extends StatelessWidget {
  GamePage({super.key});
  // This object is part of the game.dart file.
  // It manages wordle logic, and is outside the scope of this tutorial.
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    // TODO: Replace with screen contents
    return Container();
  }
}

接著更新你的 MainPage 元件，改為建立並 顯示 GamePage 元件，而非「Hello World!」。

class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Align(
            alignment: Alignment.centerLeft,
            child: Text('Birdle'),
          ),
        ),
        body: Center(child: GamePage()),
      ),
    );
  }
}

GamePage 的版面配置包含顯示使用者猜測結果的方格。

建置此版面配置有多種方式。 最簡單的是使用 Column 和 Row 元件。 每列包含五個代表猜測中五個字母的方格， 共有五列。 因此你需要一個 Column，其中包含五個 Row 元件作為子元件， 而每列各包含五個子元件。

首先，將 GamePage.build 中的 Container 替換為 一個以 Column 元件為子元件的 Padding 元件：

class GamePage extends StatelessWidget {
  GamePage({super.key});
  // This manages game logic, and is out of scope for this lesson.
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        spacing: 5.0,
        children: [
          // Add children next.
        ],
      ),
    );
  }
}

spacing 屬性會在主軸上的每個元素之間加入五個像素的間距。

在 Column.children 中，針對 _game.guesses 清單中的每個元素， 新增一個 Row 元件作為子元件。

class GamePage extends StatelessWidget {
  GamePage({super.key});
  // This manages game logic, and is out of scope for this lesson.
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        spacing: 5.0,
        children: [
          for (final guess in _game.guesses)
            Row(
              spacing: 5.0,
              children: [
                // We'll add the tiles here later.
              ],
            ),
        ],
      ),
    );
  }
}

children 清單中的 for 迴圈稱為集合 for 元素 (collection for element)， 這是一種 Dart 語法，可讓你在集合於執行時期建置時 以迭代方式加入項目。 這種語法糖讓你更輕鬆地處理 元件集合，提供了以下寫法的宣告式替代方案：

[..._game.guesses.map((guess) => Row(/* ... */))],

在此範例中，它會為 Game 物件上的每個猜測， 向欄中新增五個 Row 元件。

本課程中，應用程式的元件樹大幅擴展。 現在，其結構更像以下（簡化後的）圖示：

重新載入應用程式後，你應該會看到一個 5x5 的白色方格陣列。