Flutter（二十六）CustomScrollView

解决的问题

当一个页面中，既有GridView 又有ListView，不能进行统一滑动时，二者有各自的滑动区域。CustomScrollView可以将二者结合起来，一起滑动。

CustomScrollView关键属性

• slivers: <Widget>[],将Silver化的GridView与ListView扔到里面即可。

SliverGrid，Silver化的GridView

const SliverGrid({
Key key,
@required SliverChildDelegate delegate,// 构建每个item的widget
@required this.gridDelegate,//计算每行/列的个数算法
})

SliverFixedExtentList，Sliver化的ListView

SliverFixedExtentList({
Key key,
@required SliverChildDelegate delegate, //构建每个item的widget
@required this.itemExtent,//指定行高
})

image.png

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: new SliverGrid(
              //Grid
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, //Grid按两列显示
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  //创建子widget
                  return new Container(
                    alignment: Alignment.center,
                    color: Colors.orange[100 * (index % 9)],
                    child: new Text('grid item $index'),
                  );
                },
                childCount: 10,
              ),
            ),
          ),
          //List
          new SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              //创建列表项
              return new Container(
                alignment: Alignment.center,
                color: Colors.green[100 * (index % 9)],
                child: new Text('list item $index'),
              );
            }, childCount: 5 //10个列表项
                ),
          ),
          new SliverGrid(
            //Grid
            gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 113, //Grid按两列显示
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: new SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                //创建子widget
                return new Container(
                  alignment: Alignment.center,
                  color: Colors.yellow[100 * (index % 9)],
                  child: new Text('grid item $index'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}