布局

鉴于 Flutter 是 UI 工具包，你将花费大量时间使用 Flutter widget 创建布局。

在本节中，你将学习如何使用一些最常见的布局 widget 构建布局。这包括用于布局屏幕结构的高级 widget，例如 Scaffold 和 AppBar，以及用于垂直或水平布局 widget 的较低级 widget，例如 Column 或 Row。

移动应用通常在顶部有一个称为「app bar」的栏，可以显示标题、导航控件和/或操作。

为应用添加 app bar 的最简单方式是使用两个 widget： Scaffold 和 AppBar。

Scaffold 是一个便捷 widget，提供 Material 风格的页面布局，可轻松为应用页面添加 app bar、抽屉、导航栏等。AppBar 当然就是 app bar。

flutter create --empty 命令生成的代码已包含 AppBar widget 和 Scaffold widget。以下代码将其更新为使用额外的布局 widget：Align。这会将标题定位到左侧，默认情况下标题会居中。 Text widget 本身包含标题。

修改 MainApp widget 的 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!')),
      ),
    );
  }
}

随着应用增长，关注应用的 widget 树变得越来越重要。此时，widget 树中首次出现「分支」，现在它看起来像下图：

将以下新 widget（名为 GamePage）的代码添加到你的 main.dart 文件中。此 widget 最终将显示游戏本身所需的 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 widget，创建并显示 GamePage widget，而不是「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 widget。每行包含五个方块，代表猜测中的五个字母，共五行。因此你需要一个 Column，其 children 为五个 Row widget，每行包含五个 children。

首先，将 GamePage.build 中的 Container 替换为 Padding widget 与 Column widget 组合的 widget：

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 属性会在主轴上的每个元素之间放置 5 像素间距。

在 Column.children 中，对 _game.guesses 列表中的每个元素，添加一个 Row widget 作为 child。

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 循环称为 collection for element，这是一种 Dart 语法，让你在运行时构建集合时迭代地向集合添加项。这种语法糖让你更容易处理 widget 集合，为以下内容提供声明式替代方案：

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

此处，它向 column 添加五个 Row widget，每个对应 Game 对象上的一次猜测。

本课中，此应用的 widget 树已显著扩展。现在，它更像下面的（节选）图：

热重载应用后，你应看到 5x5 的白色方块网格。