如何像在Hamilton扑打应用中那样在Flutter中制作自定义AppBar?
问题内容:
我的方法:没有AppBar和主体的脚手架:堆栈> [image,listview]
问题答案:
Flutter附带了一堆所谓的“
sliver”小部件,这些小部件可用于根据用户的滚动动作获得不同的效果。默认情况下,根据材料设计指南¹可以很容易地获得类似的效果,标题从英雄图像的底部开始很大,然后在用户向下滚动页面时动画到顶部。
为了达到这种效果,您可以在顶部使用CustomScrollView
,SliverAppBar
在其下面加上其他条子组件,如下所示:
new CustomScrollView(
slivers: <Widget>[
new SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: new FlexibleSpaceBar(
title: new Text(_shortTitle),
background: new Image.network(_imageUrl),
),
),
new SliverPadding(
padding: new EdgeInsets.all(16.0),
sliver: new SliverList(
delegate: new SliverChildListDelegate([
new Text(_longTitle),
new Text(_body),
new Text(_author),
new Text(_body),
]),
),
),
],
);
¹在材料设计指南中向下滚动到“图像灵活的空间”