MDC-101 Flutter：Material 组件基础知识

1. 简介

什么是 Material Design 和 Material Flutter 库？

Material Design 是一个系统，用于构建醒目、美观的数字产品。通过采用一套一致的原则和组件将样式、品牌、交互和动效结合起来，产品团队能够充分发挥其设计潜能。

Material Flutter 库包含 Flutter 微件（实现 Material Design 组件（简称 MDC），可跨应用和平台打造一致的用户体验。随着 Material Design 体系的发展，这些组件会相应更新，以确保一致的像素级完美实现，并遵循 Google 的前端开发标准。

在此 Codelab 中，您将使用 Material Flutter 的多个组件来构建登录页面。

构建内容

我们提供了 4 个 Codelab 来引导您构建一款名为 Shrine 的应用，这是其中的第 1 个 Codelab。Shrine 是一款销售服饰和家居用品的电子商务应用。它演示了如何使用 Material Flutter 自定义组件以反映任何品牌或样式。

在本 Codelab 中，您将为 Shrine 构建一个包含以下内容的登录页面：

• Shrine 徽标的图片
• 应用名称 (Shrine)
• 两个文本字段，分别用于输入用户名和密码
• 两个按钮

Android	iOS

请注意，除屏幕截图外，此 Codelab 已更新为 Material 3。但它们传达的信息是相同的。

这是 4 个 Codelab 中的第 1 个，该 Codelab 将指导您为一款名为 Shrine 的产品构建应用。我们建议您按顺序完成所有 Codelab，因为它们会逐步引导您完成任务。您可通过以下资源找到相关 Codelab： MDC-102 Flutter：Material 结构和布局 MDC-103 Flutter：通过颜色、形状、高度和类型设置 Material 主题 MDC-104 Flutter：Material 高级组件

此 Codelab 中的 Material Flutter 组件和子系统

• 文本字段
• 按钮
• 墨水涟漪（轻触事件的视觉形式）

在此 Codelab 中，您将使用 Material Flutter 提供的默认组件。您将在 MDC-103：通过颜色、形状、高度和类型设置 Material Design 主题中学习如何自定义这些组件。

您如何评价自己在 Flutter 开发方面的经验水平？

新手水平 中等水平 熟练水平

2. 设置您的 Flutter 开发环境

您需要使用两款软件才能完成此 Codelab：Flutter SDK 和一款编辑器。

您可使用以下任一设备学习此 Codelab：

• 一台连接到计算机并设置为开发者模式的实体 Android 或 iOS 设备。
• iOS 模拟器（需要安装 Xcode 工具）。
• Android 模拟器（需要在 Android Studio 中设置）。
• 浏览器（需要使用 Chrome，以便进行调试）。
• 对于 Windows、Linux 或 macOS 桌面应用，您必须在打算部署到的平台上进行开发。因此，如果您要开发 Windows 桌面应用，则必须在 Windows 上进行开发，才能使用相应的构建链。如需详细了解针对各种操作系统的具体要求，请访问 docs.flutter.dev/desktop。

3. 下载 Codelab 起始应用

下载入门项目

入门项目位于 material-components-flutter-codelabs-101-starter/mdc_100_series 目录中。

...或从 GitHub 克隆

如需从 GitHub 克隆此 Codelab，请运行以下命令：

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

如需更多帮助，请参阅从 GitHub 克隆代码库

正确的分支

从 Codelab MDC-101 到 104，后一个 Codelab 是在前一个 Codelab 的基础上构建的。因此，当您完成 101 的代码后，它将成为 102 的起始代码！代码分为不同的分支，您可以使用以下命令将其全部列出：

git branch --list

如需查看完成后的代码，请查看 102-starter_and_101-complete 分支。

打开项目并运行应用

1. 在您选择的编辑器中打开项目。
2. 按照所选编辑器的《使用入门：试驾》中的说明“运行应用”。

大功告成！Shrine 登录页面的起始代码应在您的设备上运行。您应该会看到 Shrine 徽标，并在徽标正下方看到其名称“Shrine”。

Android	iOS

我们来看一下代码。

代码中的 TODO 包含数字（101、102 等），这些数字表示您将在其中实施更改的 Codelab 编号。

login.dart 中的微件

打开 login.dart。其中应包含以下代码：

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

请注意，代码中包含一个 import 语句和两个新类：

• import 语句允许在此文件中使用 Material 库。
• LoginPage 类表示模拟器中显示的整个页面。
• _LoginPageState 类的 build() 函数用于控制界面中所有微件的创建方式。

如需详细了解 Flutter 界面的基础知识和微件内容，请访问 Flutter 微件框架导览，或学习 Codelab 编写您的首个 Flutter 应用（第 1 部分）。

4. 添加 TextField 微件

首先，我们将在登录页面中添加两个文本字段，供用户输入用户名和密码。我们将使用 TextField 微件，该微件将显示悬浮标签并激活触摸涟漪。

Material 的文本字段已显著升级，以提高品牌灵活性，并得到了广泛的用户体验 (UX) 研究，从而提升了易用性和视觉设计。

如需详细了解新的文本字段，请参阅 Material Guidelines 文章。

此页面主要采用 ListView 构造，ListView 在可滚动的列中排列其子项。我们来将文本字段放在下面。

添加 TextField 微件

在 const SizedBox(height: 120.0) 后添加两个新的文本字段和一个分隔符。

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 12.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

每个文本字段都有一个 decoration: 字段，用于获取 InputDecoration 微件。filled: 字段表示文本字段的背景被浅色填充，以帮助用户识别文本字段的点按或触摸目标区域。第二个文本字段的 obscureText: true 值会自动将用户的输入替换为项目符号，适用于输入密码的位置。

保存您的项目（使用按键：command + s），以执行热重载。

您现在应该会看到一个页面，其中包含两个文本字段（“Username”和“Password”）！查看悬浮标签动画：

Android	iOS

TextField 的功能包括：

• 可以轻松更改 TextField 微件的外观。在要修饰的区域，指定 InputDecoration 值。
• 默认情况下，文本字段会显示触摸反馈（称为涟漪或涟漪）。
• FormField 微件与 TextField 微件类似，具有在表单中嵌入字段的特殊功能。
• TextField 类文档

5. 添加按钮

接下来，我们将为登录页面添加两个按钮：“Cancel”和“Next”。我们将使用两种按钮 widget：TextButton 和 ElevatedButton。

在文本按钮和提升按钮之间进行选择

为什么不直接显示两个提升按钮？每个按钮类型都可以用来表示哪些操作比其他操作更重要。

一个布局应只包含一个醒目的按钮。这样用户就可以清楚该按钮比其他按钮更重要。这个醒目的按钮代表了我们最希望用户通过应用完成的操作。

我们最不希望他们执行的操作是取消登录。凸起按钮能吸引眼球，引人注目，因此应该用于更重要的操作。相比之下，左侧的纯文本按钮看起来就不太突出。

如需详细了解按钮层次结构，请参阅 Material 准则中有关按钮的文章。

添加溢出栏

在文本字段后面，将 OverflowBar 添加到 ListView 的子项：

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

OverflowBar 将其子项排成一行。

添加按钮

然后，向 OverflowBar 的 children 列表添加两个按钮：

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101)
      },
    ),

为什么“onPressed:”字段有空白块？

如果我们传递 null 或未包含相应字段（则该字段默认为 null），按钮将被停用。因此触摸按钮后将不会收到任何反馈，也无法充分了解其已启用的行为。使用空块可防止按钮被停用。

如需详细了解按钮及其互动，请参阅为您的应用添加交互体验。

保存您的项目。在最后一个文本字段下方，您应该会看到两个按钮：

Android	iOS

OverflowBar 会为您处理布局工作。它会水平放置按钮，使其并排显示。

现在触摸某个按钮会启动水墨涟漪动画，而不会引发其他任何事件。让我们为匿名 onPressed: 函数添加一些功能，使“Cancel”按钮能够清除文本字段，“Next”按钮可以关闭屏幕：

添加 TextEditingControllers

为了能够清除文本字段的值，我们将添加 TextEditingControllers 来控制其文本。

在 _LoginPageState 类的声明的正下方，将控制器添加为 final 变量。

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

在第一个文本字段的 controller: 字段中，设置 _usernameController：

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

在第二个文本字段的 controller: 字段中，设置 _passwordController：

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

编辑 onPressed

在 TextButton 的 onPressed: 函数中添加用于清除每个控制器的命令：

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

保存您的项目。现在，当您在文本字段中输入内容时，点击“Cancel”会再次清除每个字段。

此登录表单结构完善！让我们带领用户继续探索 Shrine 应用的其他部分。

弹出

为关闭此视图，我们希望从导航栈中弹出（或删除）此页面（在 Flutter 中称为路由）。

Navigator 负责维护一个路由栈，就像 iOS 上的 UINavigationController 一样。“入栈”一个路由会将其放置在堆栈的顶部。“出栈”会删除最近添加的路由。在应用的 app.dart 中，调用 initialRoute: '/login', 会将登录屏幕添加到导航器中。

请参阅导航基础知识，了解路线和导航。

在 ElevatedButton 的 onPressed: 函数中，从导航器中弹出最新路线：

        // TODO: Show the next page (101)
        Navigator.pop(context);

最后，打开 home.dart 并在 Scaffold 中将 resizeToAvoidBottomInset 设置为 false：

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

这样做可确保键盘的外观不会更改首页或其微件的大小。

大功告成！保存您的项目。继续操作，点击“Next”。

大功告成！

Android	iOS

此屏幕是我们下一个 Codelab 的起点，您可以在 MDC-102 中继续使用它。

关于按钮：

• 除了 TextButton 和 ElevatedButton 之外，还有 OutlinedButton、FloatingActionButton IconButton 等。

6. 恭喜！

我们添加了文本字段和按钮，并且在过程中几乎不用考虑布局代码。适用于 Flutter 的 Material 组件提供很多样式，几乎可以毫不费力地布局到屏幕上。

已完成的 MDC-101 应用可以在 102-starter_and_101-complete 分支中找到。

您可以参照该分支中的应用测试您的应用版本。

后续步骤

文本字段和按钮是 Material 系统的两个核心组件，但该系统还提供了许多其他组件！您还可以在 Material 组件 widget 目录中探索其余内容。

或者，请前往 MDC-102：Material Design 结构和布局，了解 MDC-102 for Flutter 涵盖的组件。

下一个 Codelab

我能够用合理的时间和精力完成此 Codelab

非常同意 同意 一般 不同意 非常不同意

我希望日后继续使用 Material Components

非常同意 同意 一般 不同意 非常不同意