2020-05-16 Flutter SliverGrid,Sl

Sliver在使用CustomScrollView自定义滚动列表的时候就会使用到

CustomScrollView({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    Key center,
    double anchor = 0.0,
    double cacheExtent,
    this.slivers = const <Widget>[],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  })

由构造函可以看到里面所有的子元素都是由sliver包裹的一层组件，这层组件其实就是把原始滚动去掉了

Simulator Screen Shot - iPhone 11 - 2020-05-16 at 15.16.50.png

SafeArea(child: 
      CustomScrollView(
            primary: false,
            slivers: <Widget>[
              SliverGrid(
                // 渲染函数
                delegate: SliverChildBuilderDelegate((BuildContext context, int index){
                  return Container(
                    color: Util.slRandomColor(), // 随机颜色函数
                  );
                },
                  childCount: 10,
                ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    mainAxisSpacing: 10, // 主轴间距
                    crossAxisSpacing: 10, // 纵轴间距
                    crossAxisCount: 3 // 纵轴子元素个数
                ),
              ),
              SliverList(
                  delegate:
                  SliverChildBuilderDelegate(
                          (BuildContext context,int index){
                    return Container(
                      height: 50,
                      color: Util.slRandomColor(),
                    );
                    },
                    childCount: 10
                  )
              )
            ],
          )
          )