[Flutter-24] Slivers

Slivers

1. CustomScrollView + Slivers

/* CustomScrollView + Slivers

需求布局：
    1. 一个标题视图(HeaderView)
    2. 一个列表视图(ListView)
    3. 一个网格视图(GridView)

如何让他们做到统一的滑动效果、常规的单一的列表和gridView都无法做到、
Flutter中有一个可以完全实现这样滚动效果的Widget：CustomScrollView, 可以统一管理多个滚动视图

Slivers可以翻译成多个裂片、每一个滚动的视图都可以当作小裂片。

> 因为我们需要将多个Sliver放在CustomScrollView中、所以CustomScrollView中有一个属性SLivers属性
里面让我们放一些对应的Sliver
- SliverList： 类似于我们之前使用过的ListView
- SliverFixedExtentList: 类似于SliverList只是可以设置滚动的高度

- SliverGrid: 类似于GridView
- SliverPadding: 设置Sliver的内边距，因为可能要单独给Sliver设置内边距

- SliverAppBar: 添加一个AppBar， 通常用来作为CustomScrollView的HeaderView
- SliverSafeArea: 设置内容显示在安全区域(不让齐刘海挡住我们的内容)
*/

/* SliverGrid + SliverPadding + SliverSafeArea 组合使用

*/

class Content1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverSafeArea(
          sliver: SliverPadding(
            padding: EdgeInsets.all(10),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                childAspectRatio: 1.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    color: Colors.tealAccent,
                    alignment: Alignment(0, 0),
                    child: Text('item$index'),
                  );
                },
                childCount: 17,
              ),
            ),
          ),
        )
      ],
    );
  }
}

2. Slivers 组合使用

/* Slivers 组合使用

1. SliverAppBar 头部
2. SliverGrid 网格
3. SliverFixedExtentList 列表

*/

class Content2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        // SliverFixedExtentList
        SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                color: Colors.orangeAccent,
                alignment: Alignment(0, 0),
                child: Text('list item $index'),
              );
            },
            childCount: 1,
          ),
          itemExtent: 250,
        ),
        // SliverGrid -> GridView
        SliverGrid(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                color: Colors.pink[100 * ((index + 1) % 9)],
                alignment: Alignment(0, 0),
                child: Text('GridItem $index'),
              );
            },
            childCount: 11,
          ),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 2.0,
          ),
        ),
        // SliverFixedExtentList
        SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                color: Colors.lightBlue[100 * (index % 9)],
                alignment: Alignment(0, 0),
                child: Text('list item $index'),
              );
            },
            childCount: 1,
          ),
          itemExtent: 80,
        ),
      ],
    );
  }
}

Sliver 官方组合使用

class Content2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        //  SliverAppBar -> HeaderView
        SliverAppBar(
          expandedHeight: 250,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('东方明珠塔'),
            background: Image(
              image: NetworkImage(
                  'https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        // SliverGrid -> GridView
        SliverGrid(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                color: Colors.pink[100 * ((index + 1) % 9)],
                alignment: Alignment(0, 0),
                child: Text('GridItem $index'),
              );
            },
            childCount: 11,
          ),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 2.0,
          ),
        ),
        // SliverFixedExtentList
        SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                color: Colors.lightBlue[100 * (index % 9)],
                alignment: Alignment(0, 0),
                child: Text('list item $index'),
              );
            },
            childCount: 1,
          ),
          itemExtent: 80,
        ),
      ],
    );
  }
}