版面配置

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

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

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

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

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

在你的 MainApp 元件的 build 方法中， 為 Scaffold 元件加入 AppBar。 以下程式碼使用了額外的版面配置元件：Align。 這會將標題定位到左側，否則預設會置中。 Text 元件包含標題本身的文字。

直接傳入列舉或靜態屬性（例如 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: const Align(
            alignment: Alignment.centerLeft,
            child: Text('Birdle'),
          ),
        ),
        body: const Center(
          child: Tile('A', HitType.hit),
        ),
      ),
    );
  }
}

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

在你的 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();
  }
}

接著更新你的 MainApp 元件，改為建立並 顯示 GamePage 元件，而非 Tile 元件。

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 的白色方格陣列。