如何在flutter中实现自定义appbar布局滚动效果

Question

我尝试在 CustomScrollView 中使用 Flutter SliverAppBar，但它无法正常工作。

Answer 1

要使用 SliverAppBar 并让应用栏收缩并粘在顶部，您可以按照以下示例操作：

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 200.0,
        floating: true,
        snap: true,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('SliverAppBar 1'),
          centerTitle: true,
          background: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text('text 1'),
              Text('text 2'),
              Text('text 3'),
            ],
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.greenAccent,
              child: Text('SliverList item'),
              height: 60,
              margin: EdgeInsets.all(4),
            );
          },
          childCount: 20
        ),
      ),
    ],
  )
);