- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
我正在尝试创建上面模型中描述的动态动画。我需要的是:
PageView
。动画应该如下:
Begin:在一个Stack
中,都以begin为中心。
动画:缩小和滑动必须位于头像右侧的文本(可变长度)。
结束:作为样机中的第二张图片。一边到一边,而下面的内容不断滚动。
SliverPersistentHeader
中的想法与 CustomMultiChildLayout
相结合,但问题是文本开始居中并结束对齐到左侧,我可以动态地制作动画。最后我试图删除居中文本的偏移量,但感觉不对。
任何帮助或仅与此动画有关的示例将不胜感激。谢谢你。
最佳答案
您将需要一个 Sliver 来根据滚动偏移量为您的布局设置动画。更具体地说,SliverPersistentHeader在你的情况下。
CustomMultiChildLayout虽然不是必需的,但您可以使用补间和对齐/填充/填充来实现相同的结果。但是,如果您的布局开始变得过于复杂,您可以试一试。
诀窍是使用 SliverPersistentHeader 给出的滚动偏移量来计算当前进度。然后使用该进程将元素定位在其原始位置和最终位置之间。
这是一个原始示例:
class TransitionAppBar extends StatelessWidget {
final Widget avatar;
final Widget title;
const TransitionAppBar({this.avatar, this.title, Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverPersistentHeader(
pinned: true,
delegate: _TransitionAppBarDelegate(
avatar: avatar,
title: title,
),
);
}
}
class _TransitionAppBarDelegate extends SliverPersistentHeaderDelegate {
final _avatarTween =
SizeTween(begin: Size(150.0, 150.0), end: Size(50.0, 50.0));
final _avatarMarginTween =
EdgeInsetsTween(begin: EdgeInsets.zero, end: EdgeInsets.only(left: 10.0));
final _avatarAlignTween =
AlignmentTween(begin: Alignment.topCenter, end: Alignment.centerLeft);
final _titleMarginTween = EdgeInsetsTween(
begin: EdgeInsets.only(top: 150.0 + 5.0),
end: EdgeInsets.only(left: 10.0 + 50.0 + 5.0));
final _titleAlignTween =
AlignmentTween(begin: Alignment.center, end: Alignment.centerLeft);
final Widget avatar;
final Widget title;
_TransitionAppBarDelegate({this.avatar, this.title})
: assert(avatar != null),
assert(title != null);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
final progress = shrinkOffset / 200.0;
final avatarSize = _avatarTween.lerp(progress);
final avatarMargin = _avatarMarginTween.lerp(progress);
final avatarAlign = _avatarAlignTween.lerp(progress);
final titleMargin = _titleMarginTween.lerp(progress);
final titleAlign = _titleAlignTween.lerp(progress);
return Stack(
fit: StackFit.expand,
children: <Widget>[
Padding(
padding: avatarMargin,
child: Align(
alignment: avatarAlign,
child: SizedBox.fromSize(size: avatarSize, child: avatar),
),
),
Padding(
padding: titleMargin,
child: Align(
alignment: titleAlign,
child: DefaultTextStyle(
style: Theme.of(context).textTheme.title, child: title),
),
)
],
);
}
@override
double get maxExtent => 200.0;
@override
double get minExtent => 100.0;
@override
bool shouldRebuild(_TransitionAppBarDelegate oldDelegate) {
return avatar != oldDelegate.avatar || title != oldDelegate.title;
}
}
您可以将其与 CustomScrollView 一起使用:
Scaffold(
body: CustomScrollView(
slivers: <Widget>[
TransitionAppBar(
avatar: Material(
color: Colors.blue,
elevation: 3.0,
),
title: Text("Hello World"),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return ListTile(
title: Text('$index'),
);
}),
)
],
),
);
关于animation - 如何用 Flutter 在同屏路线上制作英雄风格的动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52494346/
如何从 Android-Native-Screen 打开 flutter 屏幕? 我开了一个 Android-Native-Screen 从现有我们 flutter 项目 . 所以,在 Android
有人知道如何使用 java 和 google chrome 最大化 selenium webdriver 窗口吗? 我已经尝试过一些命令,例如maximize () window (),但没有成功。
Redmi A65 智能电视今天正式开卖,4K 超高清大屏 + 立体声扬声器,到手价 2599 元。 IT之家了解到,Redmi A65 智能电视搭载了一块 65 英寸 4K 屏,支持 HDR
9 月 26 日消息小米电视大师「至尊纪念版」将在 9 月 29 日发布,根据今天小米集团大家电部总经理李肖爽放出的海报显示,小米电视大师至尊版有两款。 小米电视大师「至尊纪念版」是小米首款
华为手环 6 今日在海外正式发布,英文名 Band 6。这款产品是华为手环 4 的升级版,屏幕尺寸由 0.96 英寸升级为 1.47 英寸 AMOLED 屏,分辨率 194 x 368。该手环外形类
我是一名优秀的程序员,十分优秀!