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), ]), ), ), ],);
¹在材料设计指南中向下滚动到“图像灵活的空间”



