小部件类型

在 Flutter 中，一切皆为小部件。我们可以通过组合多个小部件来构建用户界面（UI）。Flutter 提供了多种类型的小部件，可用于创建复杂的视图。完整的列表可以在 官方 Flutter 文档中找到。本课程将深入探讨以下几类小部件：

• Material 组件
• 布局小部件
• 显示小部件
• 滚动小部件
• 样式小部件

Material 组件

Flutter 是一个跨平台工具包，支持 iOS 和 Android 的视觉设计。Android 使用 Material Design 系统，而 iOS 使用 Cupertino 系统。Material 组件遵循 Material Design 规范。这些组件包括：

• MaterialApp：用于构建采用 Material Design 设计规范的应用程序。
• Scaffold：使应用的页面布局符合 Material Design 的结构。

请查看下面的代码并运行它：

在上述代码中：

• 第 14 行：我们组合了一个 MaterialApp 小部件。该小部件帮助我们构建符合 Material 设计规范的应用。
• 第 16 行：我们定义了应用的 title，用于标识我们的应用。
• 第 19 行：我们定义了应用的 theme。
• 第 24 行：我们定义了应用的 home 属性，即应用启动时默认显示的屏幕。同时创建了一个 Scaffold 小部件，用于定义应用的布局。
• 第 25 行：我们定义了 Scaffold 的 body 属性。
• 第 27 行：我们定义了 bottomNavigationBar 属性，该属性显示在屏幕底部。
• 第 41 行：我们定义了 floatingActionButton 属性，该属性显示在应用右下角。

至此，我们的应用看起来如下：

布局小部件

这些不可见的小部件用于定义可见小部件在屏幕上的布局方式。它们包括：

• Column：按垂直方向排列小部件。
• Row：按水平方向排列小部件。
• Container：用于定位和设置尺寸的小部件。
• Wrap：以水平或垂直方式排列小部件。
• Expanded：让小部件扩展以填充屏幕剩余空间。

下图展示了 Row 和 Column 小部件：

显示小部件

这些小部件用于在屏幕上显示内容。我们将向联系人应用中添加以下显示小部件：

• Text：显示并设置文本样式。
• Icon：显示 Material Design 图标。

你可以查看下面的代码并运行它：

代码中添加了布局和显示小部件，现在应用看起来如下：

目前仍缺少一些样式；接下来我们将学习样式小部件。

样式小部件

样式小部件用于美化应用并管理主题。其中一个例子是 Padding 小部件，它可以在内容周围添加空白间距。

将上述代码中的 TODO（位于 第 27 行）替换为：

1// Padding 作为 SafeArea 小部件的子组件添加
2      child: Padding(
3        padding: const EdgeInsets.all(16.0),
4        child: Column(
5// 以下代码保持不变
6        )
7      ) 

注意：在包裹小部件或向现有代码中添加代码片段时，请确保每个小部件的开始和结束括号正确匹配；可以通过将光标放在开始括号上进行检查。

在上述代码中，我们在内容周围添加了间距。

滚动小部件

在构建 UI 时，可能会遇到内容过多无法完全显示在屏幕上的情况。滚动小部件在处理可滚动内容时非常有用。

一个典型的滚动小部件是 ListView。该小部件是一个线性排列的可滚动小部件列表。ListView 支持垂直或水平滚动。我们将向联系人应用中添加一个列表视图，用于显示 20 个联系人。

运行以下代码：

在上述代码中：

• 第 35 行：我们添加了一个 Wrap 小部件，并将 Padding 小部件移至 Wrap 内部，以便为其添加内边距。
• 第 55 行：我们添加了一个 ListView 小部件，用于显示 20 个可滚动的项目。
• 第 54 行：我们使用 Expanded 小部件包裹 ListView，使其占据屏幕剩余空间。
• 第 59 行：我们创建了一个 ListTile 小部件，用于定义列表中每个项目的外观。
• 第 71 行：我们添加了一个 Divider 小部件，用作列表中各项之间的分隔线。

此时，我们的应用看起来如下：