如何在Hamilton颤振应用程序中使自定义AppBar像Flutter一样？

Question

像这样

我的方法:没有AppBar和身体的脚手架:Stack> [image,listview]

Answer 1

Flutter带有一堆所谓的"银色"小部件,可用于根据用户的滚动动作实现不同的效果.默认情况下,从材质设计指南¹中获得类似的效果相当容易,其中标题在英雄图像的底部开始相当大,然后当用户在页面上向下滚动时动画到顶部.

要实现此效果,您可以使用顶部的a 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),
        ]),
      ),
    ),
  ],
);

¹向下滚动到" 材料设计"指南中的"带图像的灵活空间"