Flutter系列：SliverList和SliverGird的使用介绍

上一篇讲解SliverAppBar的时候有提到，CustomScrollView中一般都会用到Sliver组件。除了SliverAppBar，我们还可以在CustomScrollView中添加List或者Grid，实现更复杂的组合效果。今天要给大家介绍的是SliverList和SliverGird。SliverList和SliverGird详解从名字可以看出SliverList和SliverGird分别是List和Grid的类型。它们与List和Grid最大的区别在于它们可以控制子widget的主轴和横轴的间隔，并且可以通过Extent属性来控制子widget的大小，非常强大。让我们先看看这两个组件的定义和构造函数：constSliverList({Key?key,requiredSliverChildDelegatedelegate,}):super(key:key,delegate:delegate);SliverList继承自SliverMultiBoxAdaptorWidget。它的构造函数比较简单。需要传入一个SliverChildDelegate的参数。这里SliverChildDelegate使用委托方法创建SliverList的子组件。SliverChildDelegate是一个抽象类，有两个实现类，分别是SliverChildBuilderDelegate和SliverChildListDelegate。其中，SliverChildBuilderDelegate使用builder模式生成子widget。在上一篇文章中，我们使用了这个构建器类来构建SliverList。SliverChildBuilderDelegate使用builder生成子Widget，而SliverChildListDelegate需要传入一个childList来完成构建，也就是说SliverChildListDelegate需要一个确切的childList而不是使用builder来构建。需要注意的是，SliverList不能指定sub-widget的extent大小。如果要指定List中子widget的extent大小，可以使用SliverFixedExtentList:classSliverFixedExtentListextendsSliverMultiBoxAdaptorWidget{constSliverFixedExtentList({Key?key,requiredSliverChildDelegatedelegate,requiredthis.itemExtent,}):super(key:键，委托：委托）；可以看到，与SliverList相比，SliverFixedExtentList多了一个itemExtent参数，用于控制子widget在主轴上的大小。然后让我们看一下SliverGrid：constSliverGrid({Key?key,requiredSliverChildDelegatedelegate,requiredthis.gridDelegate,}):super(key:key,delegate:delegate);SliverGrid也是继承自SliverMultiBoxAdaptorWidget。和SliverList一样，它也有一个参数SliverChildDelegate，它也有一个参数gridDelegate来控制网格布局。这里的gridDelegate是SliverGridDelegate类型的参数，用于控制children的大小和位置。SliverGridDelegate也是一个抽象类。它有两个实现类，分别是SliverGridDelegateWithMaxCrossAxisExtent和SliverGridDelegateWithFixedCrossAxisCount。这两个实现类的区别在于MaxCrossAxisExtent和FixedCrossAxisCount的区别。如何理解MaxCrossAxisExtent？比如Grid是垂直的，Grid的宽度是500.0。如果MaxCrossAxisExtent=100，delegate会创建5列，每列的宽度为100。crossAxisCount是直接指定交叉轴的children数量。SliverList和SliverGird的使用有了上面介绍的SliverList和SliverGird的构造函数，我们就来看看如何在项目中使用SliverList和SliverGird。SliverList和SliverGird默认需要和CustomScrollView一起使用，所以我们先创建一个CustomScrollView，在它的slivers属性里面放一个SliverAppBar组件：CustomScrollView(sliver:[constSliverAppBar(pinned:true,snap:false,floating:false,expandedHeight:200.0,flexibleSpace:FlexibleSpaceBar(title:Text('SliverListandSliverGrid'),),),],];SliverAppBar只是一个AppBar，运行它得到如下界面：继续添加其他条子成分。首先给他添加一个SliverGrid：SliverGrid(gridDelegate:constSliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent:200.0,mainAxisSpacing:20.0,crossAxisSpacing:50.0,childAspectRatio:4.0,),delegate:SliverChildBuilderDelegate((BuildContextcontext,intindex){returnContainer(alignment:Alignment.center,color:Colors.green[100*(index%9)],child:Text('griditem$index'),);},childCount:20,),),这里我们设置gridDelegate属性，并且自定义SliverChildBuilderDelegate生成20个Container。运行得到的界面如下：然后添加SliverList:SliverList(delegate:SliverChildBuilderDelegate((BuildContextcontext,intindex){returnContainer(color:index.isOdd?Colors.white:Colors.green,height:50.0,child:中心（子：ListTile（标题：Text（'100'+index.toString（），样式：constTextStyle（fontWeight：FontWeight.w500），），前导：Icon（Icons.account_box，颜色：Colors.green[100*(index%9)],),),),),);},childCount:15,),),因为SliverList只需要传入一个委托参数，这里生成15个子组件。生成的界面如下：因为SliverList无法控制List中子widget的范围，所以我们添加一个SliverFixedExtentList看看效果：SliverFixedExtentList(itemExtent:100.0,delegate:SliverChildBuilderDelegate((BuildContextcontext,intindex){returnContainer（颜色：index.isOdd？Colors.white：Colors.green，高度：50.0，孩子：中心（孩子：ListTile（标题：文本（'200'+index.toString（），样式：constTextStyle（fontWeight：FontWeight。w500),),leading:Icon(Icons.account_box,color:Colors.green[100*(index%9)],),),),);},childCount:15,),SliverFixedExtentList多了一个itemExtent属性与SliverList相比，这里我们设置为100，运行得到如下界面：可以看到List中子Widgets的高度发生了变化。小结在CustomScrollView中使用SliverList和SliverGird可以实现灵活的展示效果。本文示例：https://github.com/ddean2009/learn-flutter.git