29Flutter Sliver家族

Flutter Sliver家族

为什么会有Sliver家族，主要是结合CustomScrollView,统一滑动方式，CustomScrollView中slivers只能是Sliver家族，其他widget会报错

1.SliverAppBar

SliverAppBar 是一个可伸缩的头部，可以实现上拉收起，下拉展开效果

属性：

expandedHeight: 最大扩展高度
flexibleSpace: 扩展内容区域
floating: 为true则在滚动时优先滚动，有下拉动作先appbar后flexibleSpace，反之亦然
snap: 为true时没有变化，正在查证
pinned：为true则appbar不消失，在下拉时会多划出一段距离SliverAppBar才开始滚动

2.SliverPersistentHeader

SliverPersistentHeader有点类似SliverAppBar，同样可以收起和展开，可以放置到slivers任何一个位置，如下例：

属性：

floating: 为 true 时，与SliverAppBar用法一致
pinned：与SliverAppBar用法一致，且与floating不能同时为true
delegate: 构建一个SliverPersistentHeader需要传入一个delegate，这个delegate是SliverPersistentHeaderDelegate类型的，而SliverPersistentHeaderDelegate是一个abstract类，我们不能直接new一个SliverPersistentHeaderDelegate出来，因此，我们需要自定义一个delegate来实现SliverPersistentHeaderDelegate类
    

由于SliverPersistentHeader为abstract抽象类

maxExtent表示header完全展开时的高度，minExtent表示header在收起时的最小高度

import 'package:flutter/material.dart';
import 'dart:math';

class SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  SliverAppBarDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });

  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => max(maxHeight, minHeight);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

import 'package:flutter/material.dart';
import 'SliverAppBarDelegate.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: CustomScrollViewDemo(),
      home: Scaffold(
        body: CustomScrollViewDemo(),
      ),
    );
  }
}
class CustomScrollViewDemo extends StatefulWidget {
  CustomScrollViewDemo({Key key}) : super(key: key);

  @override
  _CustomScrollViewDemoState createState() {
    return _CustomScrollViewDemoState();
  }
}

class _CustomScrollViewDemoState extends State<CustomScrollViewDemo> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CustomScrollView(
      slivers: <Widget>[
        SliverPersistentHeader(
          floating: false,//floating 与pinned 不能同时为true
          pinned: true,
          delegate: SliverAppBarDelegate(
              minHeight: 50.0,
              maxHeight: 200.0,
              child: Container(
                color: Colors.lightBlue,
                child: Center(
                  child: Text('SliverAppBarDelegate'),
                ),
              )
          ),
        ),
        SliverGrid.count(crossAxisCount: 2, children: List.generate(4, (index) {
          return Container(
            color: Colors.primaries[index % Colors.primaries.length],
            alignment: Alignment.center,
            child: Text(
              '$index', style: TextStyle(color: Colors.white, fontSize: 20),),
          );
        }).toList(),),
        SliverList(
          delegate: SliverChildBuilderDelegate((content, index) {
            return Container(
              height: 85,
              alignment: Alignment.center,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Text(
                '$index', style: TextStyle(color: Colors.white, fontSize: 20),),
            );
          }, childCount: 25),
        )
      ],
    );
  }
}

3.SliverList 与ListView 相似，用法也相似

4.SliverFixedExtentList

SliverFixedExtentList与SliverList类似，唯一区别是SliverFixedExtentList可以设置固定高度。

5.SliverGrid 与GridView相似， 用法也相似

6. SliverToBoxAdapter 可以加载普通widget组件

这个控件很有用，可以实现Header，而不是伸缩的Header，可以随着CustomScrollView滑动

  SliverToBoxAdapter(
          child: Container(
            width: double.infinity,
            height: 200,
            color: Colors.red,
          ),
        ),

6.SliverPadding

SliverPadding可以设置padding，子widget为sliver

SliverPadding(
            padding: EdgeInsets.all(10.0),
            sliver: SliverList(
              delegate: SliverChildListDelegate([
                ListTile(title: Text('01'),),
                ListTile(title: Text('02'),),
                ListTile(title: Text('03'),),
              ]),
            ),
          )

完整代码

import 'package:flutter/material.dart';
import 'SliverAppBarDelegate.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: CustomScrollViewDemo(),
      home: Scaffold(
        body: CustomScrollViewDemo(),
      ),
    );
  }
}
class CustomScrollViewDemo extends StatefulWidget {
  CustomScrollViewDemo({Key key}) : super(key: key);

  @override
  _CustomScrollViewDemoState createState() {
    return _CustomScrollViewDemoState();
  }
}

class _CustomScrollViewDemoState extends State<CustomScrollViewDemo> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CustomScrollView(
      slivers: <Widget>[
        SliverToBoxAdapter(
          child: Container(
            width: double.infinity,
            height: 200,
            color: Colors.red,
          ),
        ),
        SliverPersistentHeader(
          floating: false,//floating 与pinned 不能同时为true
          pinned: true,
          delegate: SliverAppBarDelegate(
              minHeight: 50.0,
              maxHeight: 200.0,
              child: Container(
                color: Colors.lightBlue,
                child: Center(
                  child: Text('SliverAppBarDelegate'),
                ),
              )
          ),
        ),
        SliverGrid.count(crossAxisCount: 2, children: List.generate(4, (index) {
          return Container(
            color: Colors.primaries[index % Colors.primaries.length],
            alignment: Alignment.center,
            child: Text(
              '$index', style: TextStyle(color: Colors.white, fontSize: 20),),
          );
        }).toList(),),
        SliverList(
          delegate: SliverChildBuilderDelegate((content, index) {
            return Container(
              height: 85,
              alignment: Alignment.center,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Text(
                '$index', style: TextStyle(color: Colors.white, fontSize: 20),),
            );
          }, childCount: 25),
        ),
        SliverPadding(
          padding: EdgeInsets.all(10.0),
          sliver: SliverList(
            delegate: SliverChildListDelegate([
              ListTile(title: Text('01'),),
              ListTile(title: Text('02'),),
              ListTile(title: Text('03'),),
            ]),
          ),
        )
      ],
    );
  }
}