flutter组件SliverAppBar

这个是一个交互很好的组件，可定制化程度也很高。可能对各位都很新，我先抛砖引玉用一个最简单的例子，各位可以复制一下代码，根据文档再去定制最复杂的交互和样式。因为属性比较多，而且不涉及原理性的知识，这次就不展开讲了。

代码如下：

import 'package:flutter/material.dart';

class SliverAppBarScreen extends StatefulWidget {
  SliverAppBarScreen({Key key}) : super(key: key);

  @override
  _SliverAppBarScreenState createState() => _SliverAppBarScreenState();
}

class _SliverAppBarScreenState extends State<SliverAppBarScreen> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: true,
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('spectacular'),
            background: Image.network(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597491697639&di=b2de8a48915ca5d13c39f8ee0370e83a&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F00%2F11%2F12%2F6656371539b8f64.jpg',
              fit: BoxFit.fitHeight,
            ),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context,  int index) {
              return Card(
                child: Container(
                  height: 50,
                  alignment: Alignment.center,
                  color: Colors.primaries[(index % 18)],
                  child: Text(''),
                ),
              );
            },
            childCount: 80
          )
        )
      ],
    );
  }
}

效果如下：

AppSliverBar.gif

为了更直观地看到效果，用到了SliverList。如果不清楚SliverList怎么使用，可以看这一篇。

这个系列的文章是根据flutter 的 Widget of the week来做的，欢迎大家斧正。