构建一个 Flutter 布局

学习如何在 Flutter 中构建布局。

本教程解释了如何在 Flutter 中设计和构建布局。

如果您使用提供的示例代码，您可以构建以下应用。

照片由 Dino Reichmuth 在 Unsplash 上拍摄。文字由瑞士旅游局提供。

为了更好地了解布局机制，请从 Flutter 的布局方法开始。

在本节中，请考虑您的应用用户希望获得哪种用户体验。

考虑如何定位用户界面的组件。布局由这些定位的总结果组成。考虑规划您的布局以加快编码速度。使用视觉提示来了解某个元素在屏幕上的位置非常有帮助。

使用您喜欢的任何方法，例如界面设计工具或铅笔和纸。在编写代码之前，确定您希望将元素放置在屏幕上的位置。这是编程版的谚语：“三思而后行”。

提出这些问题来将布局分解为基本元素。
- 您能识别出行和列吗？
- 布局是否包含网格？
- 是否有重叠元素？
- UI 是否需要选项卡？
- 您需要对齐、填充还是边框吗？
识别较大的元素。在本例中，您将图像、标题、按钮和描述排列成一列。
布局中的主要元素：图像、行、行和文本块
绘制每一行。
1. 第 1 行，标题部分，有三个子项：一列文本、一个星形图标和一个数字。它的第一个子项，该列，包含两行文本。该第一列可能需要更多空间。
  带有文本块和图标的标题部分
2. 第 2 行，按钮部分，有三个子项：每个子项包含一个列，然后该列包含一个图标和一个文本。
  带有三个标记按钮的按钮部分

绘制布局图后，请考虑如何对其进行编码。

您会将所有代码都写在一个类中吗？或者，您会为布局的每个部分创建一个类吗？

为了遵循 Flutter 最佳实践，为布局的每个部分创建一个类，或 Widget。当 Flutter 需要重新渲染 UI 的一部分时，它会更新发生更改的最小部分。这就是为什么 Flutter 将“一切都做成 Widget”。如果 Text Widget 中的文本发生更改，Flutter 只会重新绘制该文本。Flutter 会以最少的更改来响应用户输入。

在本教程中，将您识别的每个元素都编写成自己的 Widget。

在本节中，列出基本的 Flutter 应用代码以启动您的应用。

设置您的 Flutter 环境.
创建一个新的 Flutter 应用.

将 lib/main.dart 的内容替换为以下代码。此应用使用一个参数来表示应用标题和应用 appBar 上显示的标题。此决定简化了代码。

dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const String appTitle = 'Flutter layout demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(title: const Text(appTitle)),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

在本节中，创建一个类似于以下布局的 TitleSection Widget。

The Title section as sketch and prototype UI — 标题部分草图和原型 UI

在 MyApp 类之后添加以下代码。

dart

class TitleSection extends StatelessWidget {
  const TitleSection({super.key, required this.name, required this.location});

  final String name;
  final String location;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: [
          Expanded(
            /*1*/
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                /*2*/
                Padding(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: Text(
                    name,
                    style: const TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                Text(location, style: TextStyle(color: Colors.grey[500])),
              ],
            ),
          ),
          /*3*/
          Icon(Icons.star, color: Colors.red[500]),
          const Text('41'),
        ],
      ),
    );
  }
}

要使用行中的所有剩余可用空间，请使用 Expanded Widget 扩展 Column Widget。要将列放置在行的开头，请将 crossAxisAlignment 属性设置为 CrossAxisAlignment.start。
要在文本行之间添加间距，请将这些行放在 Padding Widget 中。
标题行以红色星形图标和文本 41 结尾。整个行都位于 Padding Widget 内部，并且每个边缘都填充 32 像素。

在 body 属性中，将 Center Widget 替换为 SingleChildScrollView Widget。在 SingleChildScrollView Widget 内部，将 Text Widget 替换为 Column Widget。

dart

body: const Center(
  child: Text('Hello World'),
body: const SingleChildScrollView(
  child: Column(
    children: [

这些代码更新会以以下方式更改应用。

SingleChildScrollView Widget 可以滚动。这允许不适合当前屏幕的元素显示。
Column Widget 以 children 属性中列出的顺序显示任何元素。children 列表中列出的第一个元素显示在列表的顶部。children 列表中的元素按数组顺序从上到下在屏幕上显示。

将 TitleSection Widget 作为 children 列表中的第一个元素。这将将其放置在屏幕的顶部。将提供的名称和位置传递给 TitleSection 构造函数。

dart

children: [
  TitleSection(
    name: 'Oeschinen Lake Campground',
    location: 'Kandersteg, Switzerland',
  ),
],

在本节中，添加将为您的应用添加功能的按钮。

按钮部分包含三个列，它们使用相同的布局：图标在文本上方。

按钮部分草图和原型 UI

计划将这些列分布在一行中，以便每个列占用相同的空间。用主色将所有文本和图标涂色。

将以下代码添加到 TitleSection Widget 之后，以包含构建按钮行的代码。

dart

class ButtonSection extends StatelessWidget {
  const ButtonSection({super.key});

  @override
  Widget build(BuildContext context) {
    final Color color = Theme.of(context).primaryColor;
    // ···
  }

}

由于每个列的代码可以使用相同的语法，因此创建一个名为 ButtonWithText 的 Widget。该 Widget 的构造函数接受颜色、图标数据和按钮标签。使用这些值，该 Widget 构建一个带有 Icon 和样式化 Text Widget 作为子项的 Column。为了分隔这些子项，将 Text Widget 包装在一个 Padding Widget 中。

在 ButtonSection 类之后添加以下代码。

dart

class ButtonSection extends StatelessWidget {
  const ButtonSection({super.key});
  // ···
}

class ButtonWithText extends StatelessWidget {
  const ButtonWithText({
    super.key,
    required this.color,
    required this.icon,
    required this.label,
  });

  final Color color;
  final IconData icon;
  final String label;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(icon, color: color),
        Padding(
          padding: const EdgeInsets.only(top: 8),
          child: Text(
            label,
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w400,
              color: color,
            ),
          ),
        ),
      ],
    );
  }
}

将以下代码添加到 ButtonSection Widget 中。

为每个按钮添加三个 ButtonWithText Widget 的实例。
传递该特定按钮的颜色、Icon 和文本。
使用 MainAxisAlignment.spaceEvenly 值沿主轴对齐列。Row Widget 的主轴是水平的，而 Column Widget 的主轴是垂直的。因此，此值告诉 Flutter 以相等数量在每个列之前、之间和之后排列空闲空间。

dart

class ButtonSection extends StatelessWidget {
  const ButtonSection({super.key});

  @override
  Widget build(BuildContext context) {
    final Color color = Theme.of(context).primaryColor;
    return SizedBox(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          ButtonWithText(color: color, icon: Icons.call, label: 'CALL'),
          ButtonWithText(color: color, icon: Icons.near_me, label: 'ROUTE'),
          ButtonWithText(color: color, icon: Icons.share, label: 'SHARE'),
        ],
      ),
    );
  }

}

class ButtonWithText extends StatelessWidget {
  const ButtonWithText({
    super.key,
    required this.color,
    required this.icon,
    required this.label,
  });

  final Color color;
  final IconData icon;
  final String label;

  @override
  Widget build(BuildContext context) {
    return Column(
      // ···
    );
  }
}

将按钮部分添加到 children 列表中。

dart

  TitleSection(
    name: 'Oeschinen Lake Campground',
    location: 'Kandersteg, Switzerland',
  ),
  ButtonSection(),
],

在本节中，添加文本描述以完成您的布局。

The text block as sketch and prototype UI — 文本块草图和原型 UI

将以下代码作为单独的 Widget 添加到 ButtonSection Widget 之后。

dart

class TextSection extends StatelessWidget {
  const TextSection({super.key, required this.description});

  final String description;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(32),
      child: Text(description, softWrap: true),
    );
  }
}

通过将 softWrap 设置为 true，文本行将填充列宽，然后在单词边界处换行。

将新的 TextSection Widget 作为 ButtonSection 之后的子项添加。在添加 TextSection Widget 时，将 description 属性设置为位置描述的文本。

dart

    location: 'Kandersteg, Switzerland',
  ),
  ButtonSection(),
  TextSection(
    description:
        'Lake Oeschinen lies at the foot of the Blüemlisalp in the '
        'Bernese Alps. Situated 1,578 meters above sea level, it '
        'is one of the larger Alpine Lakes. A gondola ride from '
        'Kandersteg, followed by a half-hour walk through pastures '
        'and pine forest, leads you to the lake, which warms to 20 '
        'degrees Celsius in the summer. Activities enjoyed here '
        'include rowing, and riding the summer toboggan run.',
  ),
],

在本节中，添加图像文件以完成您的布局。

要配置应用以引用图像，请修改其 pubspec.yaml 文件。

在项目顶部创建一个 images 目录。
下载 lake.jpg 图像并将其添加到新的 images 目录。
注意
您无法使用 wget 保存此二进制文件。您可以从 Unsplash 在 Unsplash 上下载该图像，并根据 Unsplash 许可使用。小尺寸为 94.4 kB。
要包含图像，请将 assets 标签添加到应用根目录中的 pubspec.yaml 文件中。当您添加 assets 时，它充当指向代码中可用图像的指针集。
pubspec.yaml
yaml
```
flutter:
  uses-material-design: true
  assets:
    - images/lake.jpg
```

在其他声明之后定义以下 ImageSection Widget。

dart

class ImageSection extends StatelessWidget {
  const ImageSection({super.key, required this.image});

  final String image;

  @override
  Widget build(BuildContext context) {
    return Image.asset(image, width: 600, height: 240, fit: BoxFit.cover);
  }
}

BoxFit.cover 值告诉 Flutter 使用两个约束来显示图像。首先，以尽可能小的尺寸显示图像。其次，覆盖布局分配的所有空间，称为渲染框。

将 ImageSection Widget 作为 children 列表中的第一个子项添加。将 image 属性设置为您在配置应用以使用提供的图像中添加的图像的路径。

dart

children: [
  ImageSection(
    image: 'images/lake.jpg',
  ),
  TitleSection(
    name: 'Oeschinen Lake Campground',
    location: 'Kandersteg, Switzerland',

就是这样！当您热重载应用时，您的应用应该如下所示。

您可以从以下位置访问本教程中使用的资源

Dart 代码： main.dart
图片： ch-photo
Pubspec： pubspec.yaml

要为这个布局添加交互性，请参考交互教程。

此页面内容有帮助吗？

除非另有说明，此网站上的文档反映了 Flutter 3.38.6。页面最后更新于 2026-01-03。查看源代码或报告问题。

构建一个 Flutter 布局

绘制布局图

创建应用基础代码

添加标题部分

添加 `TitleSection` Widget

将应用主体更改为可滚动视图

更新应用以显示标题部分

添加按钮部分

添加 `ButtonSection` Widget

创建一个用于制作按钮的 Widget

使用 `Row` Widget 定位按钮

更新应用以显示按钮部分

添加文本部分

添加 `TextSection` Widget

更新应用以显示文本部分

添加图像部分

配置应用以使用提供的图像

创建 `ImageSection` Widget

更新应用以显示图像部分

恭喜

资源

下一步

绘制布局图

创建应用基础代码

添加标题部分

添加 TitleSection Widget

将应用主体更改为可滚动视图

更新应用以显示标题部分

添加按钮部分

添加 ButtonSection Widget

创建一个用于制作按钮的 Widget

使用 Row Widget 定位按钮

更新应用以显示按钮部分

添加文本部分

添加 TextSection Widget

更新应用以显示文本部分

添加图像部分

配置应用以使用提供的图像

创建 ImageSection Widget

更新应用以显示图像部分

恭喜

资源

下一步

添加 `TitleSection` Widget

添加 `ButtonSection` Widget

使用 `Row` Widget 定位按钮

添加 `TextSection` Widget

创建 `ImageSection` Widget