- 简介
- SliverList和SliverGird详解
- SliverList和SliverGird的使用
- 总结
简介
今天要向大家介绍的就是SliverList和SliverGird。
SliverList和SliverGird详解
我们先来看下这两个组件的定义和构造函数：
class SliverList extends SliverMultiBoxAdaptorWidget {
/// Creates a sliver that places box children in a linear array.
const SliverList({
Key? key,
required SliverChildDelegate delegate,
} : super(key: key, delegate: delegate;
SliverList继承自SliverMultiBoxAdaptorWidget，它的构造函数比较简单，需要传入一个SliverChildDelegate的参数，这里的SliverChildDelegate使用的是delegate的方法来创建SliverList的子组件。
其中SliverChildBuilderDelegate是用的builder模式来生成子widget，在上一篇文章中，我们构建SliverList就是使用的这个builder类。
要注意的是SliverList并不能指定子widget的extent大小，如果你想指定List中的子widget的extent大小的话，那么可以使用SliverFixedExtentList:
class SliverFixedExtentList extends SliverMultiBoxAdaptorWidget {
const SliverFixedExtentList({
Key? key,
required SliverChildDelegate delegate,
required this.itemExtent,
} : super(key: key, delegate: delegate;
可以看到SliverFixedExtentList和SliverList相比，多了一个itemExtent参数，用来控制子widget在main axis上的大小。
class SliverGrid extends SliverMultiBoxAdaptorWidget {
/// Creates a sliver that places multiple box children in a two dimensional
/// arrangement.
const SliverGrid({
Key? key,
required SliverChildDelegate delegate,
required this.gridDelegate,
} : super(key: key, delegate: delegate;
SliverGrid也是继承自SliverMultiBoxAdaptorWidget，和SliverList一样，它也有一个SliverChildDelegate的参数，另外它还多了一个gridDelegate的参数用来控制gird的布局。
SliverGridDelegate也是一个抽象类，它有两个实现类，分别是SliverGridDelegateWithMaxCrossAxisExtent和SliverGridDelegateWithFixedCrossAxisCount,这两个实现类的区别就在于MaxCrossAxisExtent和FixedCrossAxisCount的区别。
crossAxisCount则是直接指定cross axis的child个数有多少。
SliverList和SliverGird的使用
默认情况下SliverList和SliverGird是需要和CustomScrollView一起使用的，所以我们先创建一个CustomScrollView，在它的slivers属性中，放入一个SliverAppBar组件：
CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: true,
snap: false,
floating: false,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('SliverList and SliverGrid',
,
,
],
;
SliverAppBar只是一个AppBar，运行可以得到下面的界面：
首先给他添加一个SliverGrid：
SliverGrid(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 20.0,
crossAxisSpacing: 50.0,
childAspectRatio: 4.0,
,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index {
return Container(
alignment: Alignment.center,
color: Colors.green[100 * (index % 9],
child: Text('grid item $index',
;
},
childCount: 20,
,
,
这里我们设置了gridDelegate属性，并且自定义了SliverChildBuilderDelegate，用来生成20个Container。
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index {
return Container(
color: index.isOdd ? Colors.white : Colors.green,
height: 50.0,
child: Center(
child: ListTile(
title: Text(
'100' + index.toString(,
style: const TextStyle(fontWeight: FontWeight.w500,
,
leading: Icon(
Icons.account_box,
color: Colors.green[100 * (index % 9],
,
,
,
;
},
childCount: 15,
,
,
因为SliverList只需要传入一个delegate参数，这里我们生成了15个child组件。生成的界面如下：
SliverFixedExtentList(
itemExtent: 100.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index {
return Container(
color: index.isOdd ? Colors.white : Colors.green,
height: 50.0,
child: Center(
child: ListTile(
title: Text(
'200' + index.toString(,
style: const TextStyle(fontWeight: FontWeight.w500,
,
leading: Icon(
Icons.account_box,
color: Colors.green[100 * (index % 9],
,
,
,
;
},
childCount: 15,
,
SliverFixedExtentList和SliverList相比多了一个itemExtent属性，这里我们将其设置为100，运行可以得到下面的界面：
总结
在CustomScrollView中使用SliverList和SliverGird，可以实现灵活的呈现效果。
本文的例子：https://github.com/ddean2009/learn-flutter.git