[译]|[译] MDC-104 Flutter(Material 高级组件(Flutter))

  • 原文地址:MDC-104 Flutter: Material Advanced Components (Flutter)
  • 原文作者:codelabs.developers.google.com
  • 译文出自:掘金翻译计划
  • 本文永久链接:github.com/xitu/gold-m…
  • 译者:DevMcryYu
  • 校对者:iceytea
1. 介绍
Material 组件(MDC)帮助开发者实现 Material Design。MDC 由谷歌团队的工程师和 UX 设计师创造,为 Android、iOS、Web 和 Flutter 提供很多美观实用的 UI 组件。
在 MDC-103 教程中,自定义定制了 Material 组件(MDC)的颜色、高度、排版和形状来给你的应用设置样式。
Material Design 系统中的组件执行一些预定义的工作并具有一定特征,例如一个 button。然而一个 button 不仅仅是用来给用户执行操作的,它可以用其形状、尺寸和颜色表达一种视觉体验,让用户知道它是可交互的,触摸或点击它时可能会有事情发生。
Material Design 指南以设计师的角度来描述组件。它们描述了跨平台可用的基本功能以及构成每个组件的基本元素。例如,一个背景包含一个背层内容、前层内容及其本身的内容、运动规则和显示选项。根据每个应用的需求、用例和内容可以自定义每个组件,包括传统的视图、控件以及你所处平台 SDK 的功能。
Material Design 指南命名了很多组件,但不是所有的组件都可以很好的被重用,因此无法在 MDC 中找到它们。你可以自己塑造这样的经历,实现使用传统代码自定义你的应用样式。
你将构建一个
本教程里,将把 Shrine 应用的 UI 修改成名为“背景”的两级展示。它包含一个菜单,列出了用于过滤在不对称网格中展示的产品的可选类别。在本教程中,你将使用如下 Flutter 组件:
  • 形状(Shape)
  • 动作(Motion)
  • Flutter 小部件(在往期教程中所使用的)




这是四篇教程中的最后一篇,它将指导你构建一个名为 Shrine 的应用。我们建议你阅读每篇教程,跟随进度逐步完成此项目。
有关教程可以在这里找到:
  • MDC-101: Material 组件(MDC)基础
  • MDC-102: Material Design 结构和布局.
  • MDC-103: Material Design Theming 的颜色、形状、高度和类型
此教程中的 MDC-Flutter 组件
  • 形状(Shape)
你将需要
  • 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 SDK,则使用 flutter upgrade 来确保 SDK 处于最新版本。
flutter upgrade 复制代码

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

3. 下载教程初始应用程序 从 MDC-103 继续?
如果你完成了 MDC-103,那么本教程所需的代码应该已经准备就绪。跳转到:添加背景菜单。
从头开始?
下载入门程序
初始程序位于 material-components-flutter-codelabs-104-starter_and_103-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 104-starter\_and\_103-complete 复制代码

更多帮助:从 GitHub 克隆一个仓库
正确的分支
教程 MDC-101 到 MDC-104 在前一个基础上持续构建。MDC-103 的完整代码将是 MDC-104 的初始代码。代码被分成多个分支。要列出 GitHub 中的分支,使用如下命令:
git branch --list
想要查看完整代码,切换到 104-complete 分支。
建立你的项目
以下步骤默认你使用的是 Android Studio (IntelliJ)。
创建项目
  1. 在终端中,导航到 material-components-flutter-codelabs
  2. 运行 flutter create mdc_100_series


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


  1. 导航到 material-components-flutter-codelabs/mdc_100_series 目录并单击打开,这将打开此项目。
在构建项目一次之前,你可以忽略在分析中见到的任何错误。


  1. 在左侧的项目面板中,如果看到测试文件 ../test/widget_test.dart,删除它。


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


提示:确保你已安装 Flutter 和 Dart 插件。
运行初始程序
以下步骤默认你在 Android 模拟器或真实设备上进行测试。如果你安装了 Xcode,则也可以在 iOS 模拟器或设备上测试。
  1. 选择设备或模拟器
如果 Andorid 模拟器尚未运行,选择 Tools -> Android -> AVD Manager 来创建并运行一个模拟设备。如果 AVD 已存在,你可以直接在 IntelliJ 的设备选择器中启动模拟器,如下一步所示。
(对于 iOS 模拟器,如果它尚未运行,通过选择 Flutter Device Selection -> Open iOS Simulator 来在你的开发设备上启动它。)


  1. 启动 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"。


如果应用没有更新,再次单击 “Play” 按钮,或者点击 “Play” 后的 “Stop”。
4. 添加背景菜单 背景出现在所有其他内容和组件后面。它由两层组成:后层(显示操作和过滤器)和前层(用来显示内容)。你可以使用背景来显示交互信息和操作,例如导航或内容过滤。
移除 home 的应用栏
HomePage 的小部件将成为前层的内容。现在它有一个应用栏。我们将应用栏移动到后层,这样 HomePage 将只包含 AsymmetricView。
home.dart中,修改 build() 方法使其仅返回一个 AsymmetricView:
// TODO:返回一个 AsymmetricView(104) returnAsymmetricView(products: ProductsRepository.loadProducts(Category.all)); 复制代码

添加背景小部件
创建名为 Backdrop 的小部件,使其包含 frontLayerbackLayer
backLayer 包含一个菜单,它允许你选择一个类别来过滤列表(currentCategory)。由于我们希望菜单选择保持不变,因此我们将 Backdrop 继承 StatefulWidget。
/lib 下添加名为 backdrop.dart 的文件:
import 'package:flutter/material.dart'; import 'package:meta/meta.dart'; import 'model/product.dart'; // TODO:添加速度常量(104)class Backdrop extends StatefulWidget { final Category currentCategory; final Widget frontLayer; final Widget backLayer; final Widget frontTitle; final Widget backTitle; const Backdrop({ @required this.currentCategory, @required this.frontLayer, @required this.backLayer, @required this.frontTitle, @required this.backTitle, }): assert(currentCategory != null), assert(frontLayer != null), assert(backLayer != null), assert(frontTitle != null), assert(backTitle != null); @override _BackdropState createState() => _BackdropState(); }// TODO:添加 _FrontLayer 类(104) // TODO:添加 _BackdropTitle 类(104) // TODO:添加 _BackdropState 类(104) 复制代码

导入 meta 包来添加 @required 标记。当构造函数中的属性没有默认值且不能为空的时候,用它来提醒你不能遗漏。注意,我们在构造方法后再一次声明了传入的值的确不是 null
在 Backdrop 类定义下添加 _BackdropState 类:
// TODO:添加 _BackdropState 类(104) class _BackdropState extends State with SingleTickerProviderStateMixin { final GlobalKey _backdropKey = GlobalKey(debugLabel: 'Backdrop'); // TODO:添加 AnimationController 部件(104)// TODO:为 _buildStack 添加 BuildContext 和 BoxConstraints 参数(104) Widget _buildStack() { return Stack( key: _backdropKey, children: [ widget.backLayer, widget.frontLayer, ], ); }@override Widget build(BuildContext context) { var appBar = AppBar( brightness: Brightness.light, elevation: 0.0, titleSpacing: 0.0, // TODO:用 IconButton 替换 leading 菜单图标(104) // TODO:移除 leading 属性(104) // TODO:使用 _BackdropTitle 参数创建标题(104) leading: Icon(Icons.menu), title: Text('SHRINE'), actions: [ // TODO:添加从尾部图标到登陆页面的快捷方式(104) IconButton( icon: Icon( Icons.search, semanticLabel: 'search', ), onPressed: () { // TODO:打开登录(104) }, ), IconButton( icon: Icon( Icons.tune, semanticLabel: 'filter', ), onPressed: () { // TODO:打开登录(104) }, ), ], ); return Scaffold( appBar: appBar, // TODO:返回一个 LayoutBuilder 部件(104) body: _buildStack(), ); } } 复制代码

build() 方法像 HomePage 一样返回一个带有 app bar 的 Scaffold。但是 Scaffold 的主体是一个 Stack。Stack 的孩子可以重叠。每个孩子的大小和位置都是相对于 Stack 的父级指定的。
现在在 ShrineApp 中添加一个 Backdrop 实例。
app.dart 中引入 backdrop.dartmodel/product.dart:
import 'backdrop.dart'; // 新增代码 import 'colors.dart'; import 'home.dart'; import 'login.dart'; import 'model/product.dart'; // 新增代码 import 'supplemental/cut_corners_border.dart'; 复制代码

app.dart 中修改 ShrineApp 的 build() 方法。将 home: 改成以 HomePage 为 frontLayer 的 Backdrop。
// TODO:将 home: 改为使用 HomePage frontLayer 的 Backdrop(104) home: Backdrop( // TODO:使 currentCategory 持有 _currentCategory (104) currentCategory: Category.all, // TODO:为 frontLayer 传递 _currentCategory(104) frontLayer: HomePage(), // TODO:将 backLayer 的值改为 CategoryMenuPage(104) backLayer: Container(color: kShrinePink100), frontTitle: Text('SHRINE'), backTitle: Text('MENU'), ), 复制代码

如果你点击运行按钮,你将会看到主页与应用栏已经出现了:


backLayer 在 frontLayer 的主页后面插入了一个新的粉色背景。
你可以使用 Flutter Inspector 来验证在 Stack 里的主页后面确实有一个容器。就像这样:


现在你可以调整两个层的设计和内容。
5. 添加形状(Shape) 在本小节,你将为 frontLayer 设置样式以在其左上角添加一个切片。
Material Design 将此类定制称为形状。Material 表面可以具有任意形状。形状为表面增加了重点和风格,可用于表达品牌特点。普通的矩形形状可以定制使其具有弯曲或成角度的角和边缘,以及任意数量的边。它们可以是对称的或不规则的。
为 front layer 添加一个形状(Shape)
斜角 Shrine logo 激发了 Shrine 应用的形状故事。形状故事是应用程序中应用的形状的常见用法。例如,徽标形状在应用了形状的登录页面元素中回显。在本小节,您将在左上角使用倾斜切片做为前层设置样式。
backdrop.dart 中,添加新的 _FrontLayer 类:
// TODO:添加 _FrontLayer 类(104) class _FrontLayer extends StatelessWidget { // TODO:添加 on-tap 回调(104) const _FrontLayer({ Key key, this.child, }) : super(key: key); final Widget child; @override Widget build(BuildContext context) { return Material( elevation: 16.0, shape: BeveledRectangleBorder( borderRadius: BorderRadius.only(topLeft: Radius.circular(46.0)), ), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ // TODO:添加 GestureDetector(104) Expanded( child: child, ), ], ), ); } } 复制代码

然后在 BackdropState 的 _buildStack() 方法里将 front layer 包裹在 _FrontLayer 内:
Widget _buildStack() { // TODO:创建一个 RelativeRectTween 动画(104)return Stack( key: _backdropKey, children: [ widget.backLayer, // TODO:添加 PositionedTransition(104) // TODO:在 _FrontLayer 中包裹 front layer(104) _FrontLayer(child: widget.frontLayer), ], ); } 复制代码

重载。


我们给 Shrine 的主表面定制了一个形状。由于表面具有高度,用户可以看到白色前层后面有东西。让我们添加一个动作,以便用户可以看到背景的背景层。
6. 添加动作(Motion) 动作是一种可以让你的应用变得更真实的方式。它可以是大且夸张的、小且微妙的,亦或是介于两者之间的。但需要注意的是动作的形式一定要适合使用场景。多次重复的有规律的动作要精细小巧,才不会分散用户的注意力或占用太多时间。适当的情况,如用户第一次打开应用时,长时的动作可能会更引人注目,一些动画也可以帮助用户了解如何使用您的应用程序。
为菜单按钮添加显示动作
backdrop.dart 的顶部,其他类函数外,添加一个常量来表示我们需要的动画执行的速度:
// TODO:添加速度常数(104) const double _kFlingVelocity = 2.0; 复制代码

_BackdropState 中添加 AnimationController 部件,在 initState() 函数中实例化它,并将其部署在 state 的 dispose() 函数中:
// TODO:添加 AnimationController 部件(104) AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController( duration: Duration(milliseconds: 300), value: 1.0, vsync: this, ); }// TODO:重写 didUpdateWidget(104)@override void dispose() { _controller.dispose(); super.dispose(); }// TODO:添加函数以确定并改变 front layer 可见性(104) 复制代码

部件生命周期
仅在部件成为其渲染树的一部分之前会调用一次 initState() 方法。只有在部件从树中移除时才会调用一次 dispose() 方法。
AnimationController 用来配合 Animation,并提供播放、反向和停止动画的 API。现在我们需要使用某个方法来移动它。
添加函数以确定并改变 front layer 的可见性:
// TODO:添加函数以确定并改变 front layer 的可见性(104) bool get _frontLayerVisible { final AnimationStatus status = _controller.status; return status == AnimationStatus.completed || status == AnimationStatus.forward; }void _toggleBackdropLayerVisibility() { _controller.fling( velocity: _frontLayerVisible ? -_kFlingVelocity : _kFlingVelocity); } 复制代码

将 backLayer 包裹在 ExcludeSemantics 部件中。当 back layer 不可见时,此部件将从语义树中剔除 backLayer 的菜单项。
return Stack( key: _backdropKey, children: [ // TODO:将 backLayer 包裹在 ExcludeSemantics 部件中(104) ExcludeSemantics( child: widget.backLayer, excluding: _frontLayerVisible, ), ... 复制代码

修改 _buildStack() 方法使其持有一个 BuildContext 和 BoxConstraints。同时包含一个使用 RelativeRectTween 动画的 PositionedTransition:
// TODO:为 _buildStack 添加 BuildContext 和 BoxConstraints 参数(104) Widget _buildStack(BuildContext context, BoxConstraints constraints) { const double layerTitleHeight = 48.0; final Size layerSize = constraints.biggest; final double layerTop = layerSize.height - layerTitleHeight; // TODO:创建一个 RelativeRectTween 动画(104) Animation layerAnimation = RelativeRectTween( begin: RelativeRect.fromLTRB( 0.0, layerTop, 0.0, layerTop - layerSize.height), end: RelativeRect.fromLTRB(0.0, 0.0, 0.0, 0.0), ).animate(_controller.view); return Stack( key: _backdropKey, children: [ ExcludeSemantics( child: widget.backLayer, excluding: _frontLayerVisible, ), // TODO:添加一个 PositionedTransition(104) PositionedTransition( rect: layerAnimation, child: _FrontLayer( // TODO:在 _BackdropState 上实现 onTap 属性(104) child: widget.frontLayer, ), ), ], ); } 复制代码

最后,返回一个使用 _buildStack 作为其 builder 的 LayoutBuilder 部件,而不是为 Scaffold 的主体调用 _buildStack 函数:
return Scaffold( appBar: appBar, // TODO:返回一个 LayoutBuilder 部件(104) body: LayoutBuilder(builder: _buildStack), ); 复制代码

我们使用 LayoutBuilder 将 front/back 堆栈的构建延迟到布局阶段,以便我们可以合并背景的实际整体高度。LayoutBuilder 是一个特殊的部件,其构建器回调提供了大小约束。
LayoutBuilder
部件树通过遍历叶结点来组织布局。约束在树下传递,但是在叶结点根据约束返回其大小之前通常不会计算大小。叶子点无法知道它的父母的大小,因为它尚未计算。
当部件必须知道其父部件的大小以便自行布局(且父部件大小不依赖于子部件)时,LayoutBuilder 就派上用场了。它使用一个方法来返回部件。
了解有关更多信息,请查看 LayoutBuilder 类文档。
build() 方法中,将应用栏中的前导菜单图标转换为 IconButton,并在点击按钮时使用它来切换 front layer 的可见性。
// TODO:用 IconButton 替换 leading 菜单图标(104) leading: IconButton( icon: Icon(Icons.menu), onPressed: _toggleBackdropLayerVisibility, ), 复制代码

在模拟器中重载并点击菜单按钮。


front layer 在向下移动(滑动)。但如果向下看,则会出现红色错误和溢出错误。这是因为 AsymmetricView 被这个动画挤压并变小,反过来使得 Column 的空间更小。最终,Column 不能用给定的空间自行排列并导致错误。如果我们用 ListView 替换 Column,则移动时列的尺寸仍然保持不变。
在 ListView 中包裹产品列项
supplemental/product_columns.dart 中,将 OneProductCardColumn 的 Column 替换成 ListView:
class OneProductCardColumn extends StatelessWidget { OneProductCardColumn({this.product}); final Product product; @override Widget build(BuildContext context) { // TODO:用 ListView 替换 Column(104) return ListView( reverse: true, children: [ SizedBox( height: 40.0, ), ProductCard( product: product, ), ], ); } } 复制代码

Column 包含 MainAxisAlignment.end。要使得从底部开始布局,使用 reverse: true。其孩子的顺序将翻转以弥补变化。
重载并点击菜单按钮。


OneProductCardColumn 上的灰色溢出警告消失了!现在让我们修复另一个问题。
supplemental/product_columns.dart 中修改 imageAspectRatio 的计算方式,并将 TwoProductCardColumn 中的 Column 替换成 ListView:
// TODO:修改 imageAspectRatio 的计算方式(104) double imageAspectRatio = (heightOfImages >= 0.0 && constraints.biggest.width > heightOfImages) ? constraints.biggest.width / heightOfImages : 33 / 49; // TODO:用 ListView 替换 Column(104) return ListView( children: [ Padding( padding: EdgeInsetsDirectional.only(start: 28.0), child: top != null ? ProductCard( imageAspectRatio: imageAspectRatio, product: top, ) : SizedBox( height: heightOfCards, ), ), SizedBox(height: spacerHeight), Padding( padding: EdgeInsetsDirectional.only(end: 28.0), child: ProductCard( imageAspectRatio: imageAspectRatio, product: bottom, ), ), ], ); }); 复制代码

我们还为 imageAspectRatio 添加了一些安全性。
重载。然后点击菜单按钮。
现在已经没有溢出了。
7. 在 back layer 上添加菜单 菜单是由可点击文本项组成的列表,当发生点击事件时通知监听器。在此小节,你将添加一个类别过滤菜单。
添加菜单
在 front layer 添加菜单并在 back layer 添加互动按钮。
创建名为 lib/category_menu_page.dart 的新文件:
import 'package:flutter/material.dart'; import 'package:meta/meta.dart'; import 'colors.dart'; import 'model/product.dart'; class CategoryMenuPage extends StatelessWidget { final Category currentCategory; final ValueChanged onCategoryTap; final List _categories = Category.values; const CategoryMenuPage({ Key key, @required this.currentCategory, @required this.onCategoryTap, }): assert(currentCategory != null), assert(onCategoryTap != null); Widget _buildCategory(Category category, BuildContext context) { final categoryString = category.toString().replaceAll('Category.', '').toUpperCase(); final ThemeData theme = Theme.of(context); return GestureDetector( onTap: () => onCategoryTap(category), child: category == currentCategory ? Column( children: [ SizedBox(height: 16.0), Text( categoryString, style: theme.textTheme.body2, textAlign: TextAlign.center, ), SizedBox(height: 14.0), Container( width: 70.0, height: 2.0, color: kShrinePink400, ), ], ) : Padding( padding: EdgeInsets.symmetric(vertical: 16.0), child: Text( categoryString, style: theme.textTheme.body2.copyWith( color: kShrineBrown900.withAlpha(153) ), textAlign: TextAlign.center, ), ), ); }@override Widget build(BuildContext context) { return Center( child: Container( padding: EdgeInsets.only(top: 40.0), color: kShrinePink100, child: ListView( children: _categories .map((Category c) => _buildCategory(c, context)) .toList()), ), ); } } 复制代码

它是一个 GestureDetector,它包含一个 Column,其孩子是类别名称。下划线用于指示所选的类别。
app.dart 中,将 ShrineApp 部件从 stateless 转换成 stateful。
  1. 高亮 ShrineApp.
  2. 按 alt(option)+ enter
  3. 选择 "Convert to StatefulWidget"。
  4. 将 ShrineAppState 类更改为 private(_ShrineAppState)。要从 IDE 主菜单执行此操作,请选择 Refactor > Rename。或者在代码中,您可以高亮显示类名 ShrineAppState,然后右键单击并选择 Refactor > Rename。输入 _ShrineAppState 以使该类成为私有。
app.dart 中,为选择的类别添加一个变量 _ShrineAppState,并在点击时添加一个回调:
// TODO:将 ShrineApp 转换成 stateful 部件(104) class _ShrineAppState extends State { Category _currentCategory = Category.all; void _onCategoryTap(Category category) { setState(() { _currentCategory = category; }); } 复制代码

然后将 back layer 修改为 CategoryMenuPage。
app.dart 中引入 CategoryMenuPage:
import 'backdrop.dart'; import 'colors.dart'; import 'home.dart'; import 'login.dart'; import 'category_menu_page.dart'; import 'model/product.dart'; import 'supplemental/cut_corners_border.dart'; 复制代码

build() 方法,将 backlayer 字段修改成 CategoryMenuPage 并让 currentCategory 字段持有实例变量。
home: Backdrop( // TODO:让 currentCategory 字段持有 _currentCategory(104) currentCategory: _currentCategory, // TODO:为 frontLayer 传递 _currentCategory(104) frontLayer: HomePage(), // TODO:将 backLayer 修改成 CategoryMenuPage(104) backLayer: CategoryMenuPage( currentCategory: _currentCategory, onCategoryTap: _onCategoryTap, ), frontTitle: Text('SHRINE'), backTitle: Text('MENU'), ), 复制代码

重载并点击菜单按钮。


你点击了菜单选项,然而什么也没有发生...让我们修复它。
home.dart 中,为 Category 添加一个变量并将其传递给 AsymmetricView。
import 'package:flutter/material.dart'; import 'model/products_repository.dart'; import 'model/product.dart'; import 'supplemental/asymmetric_view.dart'; class HomePage extends StatelessWidget { // TODO:为 Category 添加一个变量(104) final Category category; const HomePage({this.category: Category.all}); @override Widget build(BuildContext context) { // TODO:为 Category 添加一个变量并将其传递给 AsymmetricView(104) return AsymmetricView(products: ProductsRepository.loadProducts(category)); } } 复制代码

app.dart 中为 frontLayer 传递 _currentCategory
// TODO:为 frontLayer 传递 _currentCategory(104) frontLayer: HomePage(category: _currentCategory), 复制代码

重载。点击模拟器中的菜单按钮并选择一个类别。


点击菜单图标以查看产品。他们被过滤了!
选择菜单项后关闭 front layer 在 backdrop.dart 中,为 BackdropState 重写 didUpdateWidget() 方法:
// TODO:为 didUpdateWidget() 添加重写方法(104) @override void didUpdateWidget(Backdrop old) { super.didUpdateWidget(old); if (widget.currentCategory != old.currentCategory) { _toggleBackdropLayerVisibility(); } else if (!_frontLayerVisible) { _controller.fling(velocity: _kFlingVelocity); } } 复制代码

热重载,然后点击菜单图标并选择一个类别。菜单应该自动关闭,然后你将看到所选择类别的物品。现在同样地将这个功能添加到 front layer 。
切换 front layer
backdrop.dart 中,给 backdrop layer 添加一个 on-tap 回调:
class _FrontLayer extends StatelessWidget { // TODO:添加 on-tap 回调(104) const _FrontLayer({ Key key, this.onTap, // 新增代码 this.child, }) : super(key: key); final VoidCallback onTap; // 新增代码 final Widget child; 复制代码

然后将一个 GestureDetector 添加到 _FrontLayer 的孩子 Column 的子节点中:
child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ // TODO:添加一个 GestureDetector(104) GestureDetector( behavior: HitTestBehavior.opaque, onTap: onTap, child: Container( height: 40.0, alignment: AlignmentDirectional.centerStart, ), ), Expanded( child: child, ), ], ), 复制代码

然后在 _buildStack() 方法的 _BackdropState 中实现新的 onTap 属性:
PositionedTransition( rect: layerAnimation, child: _FrontLayer( // TODO:在 _BackdropState 中实现 onTap 属性(104) onTap: _toggleBackdropLayerVisibility, child: widget.frontLayer, ), ), 复制代码

重载并点击 front layer 的顶部。每次你点击 front layer 顶部时都它应该打开或者关闭。
8. 添加品牌图标 品牌肖像也应该延伸到熟悉的图标。让我们自定义显示图标并将其与我们的标题合并,以获得独特的品牌外观。
修改菜单按钮图标


backdrop.dart 中,新建 _BackdropTitle 类。
// TODO:添加 _BackdropTitle 类(104) class _BackdropTitle extends AnimatedWidget { final Function onPress; final Widget frontTitle; final Widget backTitle; const _BackdropTitle({ Key key, Listenable listenable, this.onPress, @required this.frontTitle, @required this.backTitle, }): assert(frontTitle != null), assert(backTitle != null), super(key: key, listenable: listenable); @override Widget build(BuildContext context) { final Animation animation = this.listenable; return DefaultTextStyle( style: Theme.of(context).primaryTextTheme.title, softWrap: false, overflow: TextOverflow.ellipsis, child: Row(children: [ // 品牌图标 SizedBox( width: 72.0, child: IconButton( padding: EdgeInsets.only(right: 8.0), onPressed: this.onPress, icon: Stack(children: [ Opacity( opacity: animation.value, child: ImageIcon(AssetImage('assets/slanted_menu.png')), ), FractionalTranslation( translation: Tween( begin: Offset.zero, end: Offset(1.0, 0.0), ).evaluate(animation), child: ImageIcon(AssetImage('assets/diamond.png')), )]), ), ), // 在这里,我们在 backTitle 和 frontTitle 之间是实现自定义的交叉淡入淡出效果 // 这使得两个文本之间能够平滑过渡。 Stack( children: [ Opacity( opacity: CurvedAnimation( parent: ReverseAnimation(animation), curve: Interval(0.5, 1.0), ).value, child: FractionalTranslation( translation: Tween( begin: Offset.zero, end: Offset(0.5, 0.0), ).evaluate(animation), child: backTitle, ), ), Opacity( opacity: CurvedAnimation( parent: animation, curve: Interval(0.5, 1.0), ).value, child: FractionalTranslation( translation: Tween( begin: Offset(-0.25, 0.0), end: Offset.zero, ).evaluate(animation), child: frontTitle, ), ), ], ) ]), ); } } 复制代码

_BackdropTitle 是一个自定义部件,它将替换 AppBartitle 参数的 Text 部件。它有一个动画菜单图标和前后标题之间的动画过渡。动画菜单图标将使用新资源。因此必须将对新 slanted_menu.png 的引用添加到 pubspec.yaml中。
assets: - assets/diamond.png - assets/slanted_menu.png - packages/shrine_images/0-0.jpg 复制代码

移除 AppBar builder 中的 leading 属性。这样才能在原始 leading 部件的位置显示自定义品牌图标。listenable 动画和品牌图标的 onPress 处理将传递给 _BackdropTitlefrontTitlebackTitle 也会被传递,以便将它们显示在背景标题中。AppBartitle 参数如下所示:
// TODO:使用 _BackdropTitle 参数创建标题(104) title: _BackdropTitle( listenable: _controller.view, onPress: _toggleBackdropLayerVisibility, frontTitle: widget.frontTitle, backTitle: widget.backTitle, ), 复制代码

品牌图标在 _BackdropTitle 中创建。它包含一组动画图标:倾斜的菜单和钻石,它包裹在 IconButton 中,以便可以按下它。然后将 IconButton 包装在 SizedBox 中,以便为图标水平运动腾出空间。
Flutter 的 "everything is a widget" 架构允许更改默认 AppBar 的布局,而无需创建全新的自定义 AppBar 小部件。title 参数最初是一个 Text 部件,可以用更复杂的 _BackdropTitle 替换。由于 _BackdropTitle 还包含自定义图标,因此它取代了 leading 属性,现在可以省略。这个简单的部件替换是在不改变任何其他参数的情况下完成的,例如动作图标,它们可以继续运行。
添加返回登录屏幕的快捷方式
backdrop.dart 中,从应用栏中的两个尾部图标向登录屏幕添加一个快捷方式:更改图标的 semanticLabel 以反映其新用途。
// TODO:添加从尾部图标到登陆页面的快捷方式(104) IconButton( icon: Icon( Icons.search, semanticLabel: 'login', // 新增代码 ), onPressed: () { // TODO:打开登陆(104) Navigator.push( context, MaterialPageRoute(builder: (BuildContext context) => LoginPage()), ); }, ), IconButton( icon: Icon( Icons.tune, semanticLabel: 'login', // 新增代码 ), onPressed: () { // TODO:打开登录(104) Navigator.push( context, MaterialPageRoute(builder: (BuildContext context) => LoginPage()), ); }, ), 复制代码

如果你尝试重载将收到错误消息。导入 login.dart 以修复错误:
import 'login.dart'; 复制代码

重载应用并点击搜索或调整按钮以返回登录屏幕。
9. 总结 通过四篇教程,你已经了解了如何使用 Material 组件来构建表达品牌个性和风格的独特,优雅的用户体验。
【[译]|[译] MDC-104 Flutter(Material 高级组件(Flutter))】完整的 MDC-104 应用可在 104-complete 分支中找到。
您可以使用该分支中的版本测试你的应用。
下一步
MDC-104 到此已经完成。你可以访问 Flutter Widget 目录以在 MDC-Flutter 中探索更多组件。
对于进阶的目标,尝试使用 AnimatedIcon 替换品牌图标。
要了解如何将应用连接到 Firebase 以获得后端支持,请参阅 Flutter 中的 Firebase。
如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。

    推荐阅读