[译] MDC-102 Flutter：Material 结构和布局（Flutter，面试竟然被这31道Android基础题难倒了

最后对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。

Android惊奇耶

754人浏览 · 2024-03-30 22:05:16

Android惊奇耶 · 2024-03-30 22:05:16 发布

在教程 MDC-101 中，你使用了两个 Material 组件：文本框和墨水波纹效果的按钮来构建一个登陆页面。现在让我们通过添加导航、结构和数据来拓展应用。

你将要构建

在本教程中,你将为 Shrine —— 一个销售服装和家居用品的电子商务应用程序构建一个主页面。它将含有：

一个位于顶部的应用栏
一个由产品填充的网格列表

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这是四篇教程里的第二篇，它将引导你为 Shrine 的产品构建应用程序。我们建议你按照教程的顺序一步一步地编写你的代码。

相关的教程可以在以下位置找到：

MDC-101: Material Components（MDC）基础

MDC-103: Material Design Theming 的颜色、形状、高度和类型

MDC-104: Material Design 高级组件。

到 MDC-104 的最后，你将会构建一个像这样的应用：

将要用到的 MDC 组件

顶部应用栏（Top app bar）
网格（Grid）
卡片（Card）

本教程中，你将使用 MDC-Flutter 提供的默认组件。你将会在 MDC-103: Material Design Theming 的颜色、形状、高度和类型中学习如何定制它们。

你将需要

Flutter SDK
安装好 Flutter 插件的 Android Studio，或者你喜欢的代码编辑器
示例代码

要在 iOS 上构建和运行 Flutter 应用程序，你需要满足以下要求：

运行 macOS 的计算机
Xcode 9 或更新版本
iOS 模拟器，或者 iOS 物理设备

要在 Android 上构建和运行 Flutter 应用程序，你需要满足以下要求：

运行 macOS、Windows 或 Linux 的计算机
Android Studio
Android 模拟器（随 Android Studio 一起提供）或 Android 物理设备

2. 安装 Flutter 环境

前提条件

要开始使用 Flutter 开发移动应用程序，你需要：

Flutter SDK
装有 Flutter 插件的 IntelliJ IDE，或者你喜欢的代码编辑器

Flutter 的 IDE 工具适用于 Android Studio、IntelliJ IDEA Community（免费）和 IntelliJ IDEA Ultimate。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

要在 iOS 上构建和运行 Flutter 应用程序，你需要满足以下要求：

运行 macOS 的计算机
Xcode 9 或更新版本
iOS 模拟器，或者 iOS 物理设备

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

要在 Android 上构建和运行 Flutter 应用程序，你需要满足以下要求：

运行 macOS、Windows 或者 Linux 的计算机
Android Studio
Android 模拟器（随 Android Studio 一起提供）或 Android 物理设备

获取详细的 Flutter 安装信息

重要提示：如果连接到计算机的 Android 手机上出现“允许 USB 调试”对话框，请启用始终允许从此计算机选项，然后单击确定。

在继续本教程之前，请确保你的 SDK 处于正确的状态。如果之前安装过 Flutter，则使用 flutter upgrade 来确保 SDK 处于最新版本。

flutter upgrade

运行 flutter upgrade 将自动运行 flutter doctor。如果这是首次安装 Flutter 且不需升级，那么请手动运行 flutter doctor。查看显示的所有检查标记；这将会下载你需要的任何缺少的 SDK 文件，并确保你的计算机配置无误以进行 Flutter 的开发。

flutter doctor

3. 下载教程初始应用程序

从 MDC-101 继续？

如果你完成了 MDC-101，那么本教程所需代码应该已经准备就绪，跳转到 添加应用栏 步骤。

从头开始？

下载初始应用程序

下载初始程序

此入门程序位于 material-components-flutter-codelabs-102-starter_and_101-complete/mdc_100_series 目录中。

…或者从 GitHub 克隆它

要从 GitHub 克隆此项目，请运行以下命令：

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs
git checkout 102-starter_and_101-complete

更多帮助：从 GitHub 上克隆存储库

正确的分支

教程 MDC-101 到 104 连续构建。所以当你完成 102 的代码后，它将变成 103 教程的初始代码！代码被分成不同的分支，你可以使用以下命令将它们全部列出：

git branch --list

要查看完整代码，请切换到 103-starter_and_102-complete 分支。

建立你的项目

以下步骤默认你使用的是 Android Studio (IntelliJ)。

创建项目

在终端中，导航到 material-components-flutter-codelabs
运行 flutter create mdc_100_series

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

打开项目

打开 Android Studio。
如果你看到欢迎页面，单击 打开已有的 Android Studio 项目。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

导航到 material-components-flutter-codelabs/mdc_100_series 目录并单击打开，这将打开此项目。

在构建项目一次之前，你可以忽略在分析中见到的任何错误。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在左侧的项目面板中，删除测试文件 ../test/widget_test.dart

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如果出现提示，安装所有平台和插件更新或 FlutterRunConfigurationType，然后重新启动 Android Studio。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

提示：确保你已安装 Flutter 和 Dart 插件。

运行初始程序

以下步骤默认你在 Android 模拟器或设备上进行测试。你也可以在 iOS 模拟器或设备上进行，只要你安装了 Xcode。

选择设备或模拟器

如果 Android 模拟器尚未运行，请选择 Tools -> Android -> AVD Manager 来创建您设备并启动模拟器。如果 AVD 已存在，你可以直接在 IntelliJ 的设备选择器中启动模拟器，如下一步所示。

（对于 iOS 模拟器，如果它尚未运行，通过选择 Flutter Device Selection -> Open iOS Simulator 来在你的开发设备上启动它。）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

启动 Flutter 应用：

在你的编辑器窗口顶部寻找 Flutter Device Selection 下拉菜单，然后选择设备（例如，iPhone SE / Android SDK built for ）。
点击运行图标（

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

）。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如果你无法成功运行此应用程序，停下来解决你的开发环境问题。尝试导航到 material-components-flutter-codelabs；如果你在终端中下载 .zip 文件，导航到 material-components-flutter-codelabs-... 然后运行 flutter create mdc_100_series。

成功！Shrine 的初始登陆代码应该在你的模拟器中运行了。你可以看到 Shrine 的 logo 和它下面的名称 “Shrine”。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

现在登录页面看起来不错，让我们用一些产品来填充应用。

4. 添加顶部应用栏

当登陆页面消失时主页面将出现并显示“你做到了！”。这很棒！但是我们的用户不知道能做什么操作，也不知道现在位于应用何处，为了解决这个问题，是时候添加导航了。

导航是指允许用户在应用中移动的组件、交互、视觉提示和信息结构。它使得内容和功能更加注目，任务也因此易于完成。

在 Material 指南中了解更多有关导航的信息。

Material Design 提供确保高度可用性的导航模式，其中最注目的组件就是顶部应用栏。

你可以将顶部应用栏当作 iOS 中的“导航栏”，或者简单看成一个 “App Bar” 或 “Header”。

要提供导航并让用户快速访问其他操作，让我们添加一个顶部应用栏。

添加应用栏部件

在 home.dart 中，将应用栏添加到 Scaffold 中：

return Scaffold(
// TODO: 添加应用栏（102）
appBar: AppBar(
// TODO: 添加按钮和标题（102）
),

将 AppBar 添加到 Scaffold 的 appBar: 字段位置，为了我们完美的布局，让应用栏保持在页面的顶部或底部。

Scaffold 在中是一个重要的部件。它为像抽屉、snack bar 和 bottom sheet 等各种常见 Material 组件提供方便的 API。它甚至可以帮助布置一个 Floating Action Button。

在 Flutter 文档中了解更多有关 Scaffold 的信息。

保存项目，当 Shrine 应用更新后，单击 Next 来查看主屏幕。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

应用栏看起来不错，但它还需要一个标题。

如果应用没有更新，再次单击 “Play” 按钮，或者点击 “Play” 后的 “Stop”。

添加文本部件

在 home.dart 中，给应用栏添加一个标题：

// TODO: 添加应用栏（102）
appBar: AppBar(
// TODO: 添加按钮和标题（102）

title: Text(‘SHRINE’),
// TODO:添加后续按钮（102）

保存项目。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

到目前为止，你应该已经注意到我们所说的“平台差异”了。Material 明白 Android、iOS、Web 各平台都有差异。用户对他们有不同的期望。举例来说，在 iOS 里标题几乎总是居中的，这是 UIKit 提供的默认配置。在 Android 上标题是左对齐的。所以如果你使用的是 Android 模拟器或设备，那么标题应该位于左侧，对于 iOS 模拟器和设备而言，它应该是居中的。

了解更多信息，请查参阅有关跨平台适配的 Material 文章。

许多应用栏在标题旁边都设有按钮，让我们在应用中添加一个菜单图标。

添加位于首部的图标按钮

还是在 home.dart 中，在 AppBar 的 leading 字段设置一个图标按钮：（放在 title: 字段前，按照部件从首到尾的顺序）：

return Scaffold(
appBar: AppBar(
// TODO: 添加按钮和标题（102）
leading: IconButton(
icon: Icon(
Icons.menu,
semanticLabel: ‘menu’,
),
onPressed: () {
print(‘Menu button’);
},
),

保存项目。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

菜单图标（也被称作“汉堡包”）会在你期望的位置显示出来。

IconButton 类是在你的应用里引入 Material 图标的快捷方式。它有一个 Icon 部件。 Flutter 在 Icons 类里有整套的图标。它会根据字符串常量的映射自动导入图标。

在 Flutter 文档中了解更多有关 Icons 类的信息。有关 Icon 部件的信息请阅读这个 Flutter 文档。

你也可以在标题尾部添加按钮。在 Flutter 中，它们被称为 “action”。

Leading（首部） 和 trailing（尾部） 是表达方向的术语，指的是与语言无关的文本行的开头和结尾。当使用一个像英语这样的 LTR（左到右）语言时， leading 意味着左侧而 trailing 代表着右侧。在像阿拉伯语这样的 RTL（右到左）语言时， leading 意味着右侧而 trailing 代表着左侧。

了解 UI 镜像的更多信息，请参阅双向性 Material Design 准则。

添加 action

还有两个 IconButton 的空间。

在 AppBar 实例中的标题后面添加它们：

// TODO: 添加尾部按钮（102）
actions: [
IconButton(
icon: Icon(
Icons.search,
semanticLabel: ‘search’,
),
onPressed: () {
print(‘Search button’);
},
),
IconButton(
icon: Icon(
Icons.tune,
semanticLabel: ‘filter’,
),
onPressed: () {
print(‘Filter button’);
},
),