Flutter--SliverList组件

一、SliverList的简介

要同时滚动ListView和GridView的时候可以使用SliverList和SliverGrid

SliverList需要和CustomScrollView配合使用

二、SliverList的源码

const SliverList({
    Key key,
    @required SliverChildDelegate delegate,
  }) : super(key: key, delegate: delegate);

三、SliverList的属性

delegate：SliverChildDelegate 系统提供个两个已经实现好的代理：SliverChildListDelegate/SliverChildBuilderDelegate

四、SliverChildListDelegate的源码

SliverChildListDelegate(
    this.children, {
    this.addAutomaticKeepAlives = true,
    this.addRepaintBoundaries = true,
    this.addSemanticIndexes = true,
    this.semanticIndexCallback = _kDefaultSemanticIndexCallback,
    this.semanticIndexOffset = 0,
  }) : assert(children != null),
       assert(addAutomaticKeepAlives != null),
       assert(addRepaintBoundaries != null),
       assert(addSemanticIndexes != null),
       assert(semanticIndexCallback != null),
       _keyToIndex = <Key, int>{null: 0};

五、SliverChildBuilderDelegate的源码

const SliverChildBuilderDelegate(
    this.builder, {
    this.findChildIndexCallback,
    this.childCount,
    this.addAutomaticKeepAlives = true,
    this.addRepaintBoundaries = true,
    this.addSemanticIndexes = true,
    this.semanticIndexCallback = _kDefaultSemanticIndexCallback,
    this.semanticIndexOffset = 0,
  }) : assert(builder != null),
       assert(addAutomaticKeepAlives != null),
       assert(addRepaintBoundaries != null),
       assert(addSemanticIndexes != null),
       assert(semanticIndexCallback != null);

六、demo

6.1、SliverList属性delegate:SliverChildBuilderDelegate的demo

class _SliverListFulState extends State<SliverListFul> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("SliverList学习"),
          ),
          body:CustomScrollView(
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate((content, index) {
                  return Container(
                    height: 65,
                    color: Colors.primaries[index % Colors.primaries.length],
                  );
                }, childCount: 20),
              ),
            ],
          )

          ),
    );
  }
}

6.2、SliverList属性delegate:SliverChildListDelegate的demo

class _SliverListFulState extends State<SliverListFul> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("SliverList学习"),
          ),
          body: CustomScrollView(
            slivers: [
              SliverList(
                delegate: SliverChildListDelegate([
                  Container(
                    height: 80,
                    color: Colors.primaries[0],
                  ),
                  Container(
                    height: 80,
                    color: Colors.primaries[1],
                  ),
                  Container(
                    height: 80,
                    color: Colors.primaries[2],
                  ),
                  Container(
                    height: 80,
                    color: Colors.primaries[3],
                  ),
                  Container(
                    height: 80,
                    color: Colors.primaries[4],
                  ),
                ]),
              ),
            ],
          )),
    );
  }
}