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.dart
及 model/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。
- 高亮
ShrineApp.
- 按 alt(option)+ enter
- 选择 “Convert to StatefulWidget”。
- 将 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 之间是实现自定义的交叉淡入淡出效果
// 这使得两个文本之间能够平滑过渡。
学习分享
在当下这个信息共享的时代,很多资源都可以在网络上找到,只取决于你愿不愿意找或是找的方法对不对了
很多朋友不是没有资料,大多都是有几十上百个G,但是杂乱无章,不知道怎么看从哪看起,甚至是看后就忘
如果大家觉得自己在网上找的资料非常杂乱、不成体系的话,我也分享一套给大家,比较系统,我平常自己也会经常研读。
2021最新上万页的大厂面试真题
七大模块学习资料:如NDK模块开发、Android框架体系架构…
2021大厂面试真题:
只有系统,有方向的学习,才能在短时间内迅速提高自己的技术,只有不断地学习,不懈的努力才能拥有更好的技术,才能在互联网行业中立于不败之地。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
et>(
begin: Offset.zero,
end: Offset(1.0, 0.0),
).evaluate(animation),
child: ImageIcon(AssetImage(‘assets/diamond.png’)),
)]),
),
),
// 在这里,我们在 backTitle 和 frontTitle 之间是实现自定义的交叉淡入淡出效果
// 这使得两个文本之间能够平滑过渡。
学习分享
在当下这个信息共享的时代,很多资源都可以在网络上找到,只取决于你愿不愿意找或是找的方法对不对了
很多朋友不是没有资料,大多都是有几十上百个G,但是杂乱无章,不知道怎么看从哪看起,甚至是看后就忘
如果大家觉得自己在网上找的资料非常杂乱、不成体系的话,我也分享一套给大家,比较系统,我平常自己也会经常研读。
2021最新上万页的大厂面试真题
[外链图片转存中…(img-P1tH5asM-1715883603856)]
七大模块学习资料:如NDK模块开发、Android框架体系架构…
[外链图片转存中…(img-7x6aZ7cZ-1715883603857)]
2021大厂面试真题:
[外链图片转存中…(img-TzKis4Nt-1715883603859)]
只有系统,有方向的学习,才能在短时间内迅速提高自己的技术,只有不断地学习,不懈的努力才能拥有更好的技术,才能在互联网行业中立于不败之地。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!