如何在颤振中制作自定义应用栏，就像在汉密尔顿颤振应用程序中一样

Question

LIke This

我的方法：没有应用栏和正文的脚手架：堆叠>[图像，列表视图]

Answer 1

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

要实现此效果，您可以使用顶部带有SliverAppBar，下方带有其他一些薄片组件的CustomScrollView，如下所示：

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),
        ]),
      ),
    ),
  ],
);

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

Answer 2

Appbar 具有前导、标题、操作、灵活的空格和底部。通过使用所有这些，我们可以通过添加来设计应用栏 图标 ， 图片 ， 标题和标题。底部代码演示了带有图标、标题、标题和图像的服装应用栏。在此处输入图像说明

AppBar(
          elevation: 0.0,
          actions: <Widget>[
            Container(
                padding: EdgeInsets.only(right: 5.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'JIMMY FELLON',
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.w600,
                        color: Colors.black87,
                      ),
                    ),
                    Text(
                      'PROJECT OWNER',
                      style: TextStyle(
                        fontSize: 12.0,
                        color: Colors.black54,
                      ),
                    )
                  ],
                )),
            Container(
              child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
                CircleAvatar(
                  backgroundImage: new NetworkImage(
                      'https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&h=350'),
                  radius: 24.0,
                ),
              ]),
            ),
            IconButton(
              icon: new Icon(Icons.more_vert),
              onPressed: () {},
            ),
          ],
        );