sliview之SliverList介绍
2023-05-18 本文已影响0人
码农_小斌哥
1.SliverList介绍
CustomScrollView+SliverList组合使用其实就相当于是个ListView
2.SliverList属性
- delegate:SliverChildDelegate 系统提供个两个已经实现好的代理:SliverChildListDelegate/SliverChildBuilderDelegate
3.使用
_mySliverAppBar() {
return SliverAppBar(
title: Text('SliverList'),
expandedHeight: 250,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
ImageUrlConstant.imageUrl1,
fit: BoxFit.cover,
),
collapseMode: CollapseMode.parallax,
),
);
}
_mySliverChildListDelegate() {
return 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],
),
Container(
height: 80,
color: Colors.primaries[5],
),
Container(
height: 80,
color: Colors.primaries[6],
),
]);
}
_mySliverChildBuilderDelegate() {
return SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
height: 80,
color: Colors.primaries[index % 11],
);
},
childCount: 30,
);
}
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: [
_mySliverAppBar(),
SliverList(
delegate: _mySliverChildBuilderDelegate(),
// delegate: _mySliverChildListDelegate(),
)
],
);
}
如果我们将SliverAppBar去掉,CustomScrollView+SliverList就跟ListView是一个效果
<<meta charset="utf-8">
二.GridView介绍
1.GridView属性
- scrollDirection = Axis.vertical:滑动方向
- reverse = false:是否反响
- controller:ScrollController 滑动控制器
- primary:当内容不足以滚动时,是否支持滚动
- physics:控制用户滚动视图的交互
- shrinkWrap = false:滑动方向上是否允许最大允许高度
- padding:内边距
- gridDelegate:SliverGridDelegate
- cacheExtent:缓存
- children = const <Widget>[]:
- dragStartBehavior = DragStartBehavior.start:响应拖动的时机
- clipBehavior = Clip.hardEdge:超出内容的裁剪方式
- keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual:滑动组件键盘隐藏模式
- restorationId:滑动位置记忆标志
GridView的各项属性跟ListView几乎一样,这里就不再赘述,不了解的可以看一下:Flutter(33):Material组件之ListTile、RefreshIndicator、ListView、Divider
关于SliverGridDelegate,SliverChildDelegate在之前Flutter(73):Sliver组件之SliverGrid中也讲解过了,也不再赘述了。
_mySliverGridDelegateWithFixedCrossAxisCount() {
return SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 5,
childAspectRatio: 1.5,
);
}
_myGridView() {
return GridView(
gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
children: [
Container(
height: 80,
color: Colors.blue,
),
Container(
height: 80,
color: Colors.yellow,
),
Container(
height: 80,
color: Colors.red,
),
Container(
height: 80,
color: Colors.green,
),
],
);
}
image
2.GridView.builder属性
- gridDelegate:SliverGridDelegate:SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent
- itemBuilder:IndexedWidgetBuilder
- itemCount:item个数
_myGridViewBuilder() {
return GridView.builder(
gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
itemBuilder: (BuildContext context, int index) {
return Container(
height: 80,
color: Colors.primaries[index % 11],
);
},
itemCount: 5,
);
}
image
3.GridView.count属性
- crossAxisCount:次轴方向item数
- children = const <Widget>[]:
_myGridViewCount() {
return GridView.count(
crossAxisCount: 3,
children: [
Container(
height: 80,
color: Colors.blue,
),
Container(
height: 80,
color: Colors.yellow,
),
Container(
height: 80,
color: Colors.red,
),
Container(
height: 80,
color: Colors.green,
),
],
);
}
image
4.GridView.extent属性
- maxCrossAxisExtent: 次轴方向上item最大长度
- children:
_myGridViewExtent() {
return GridView.extent(
maxCrossAxisExtent: 300,
children: [
Container(
height: 80,
color: Colors.blue,
),
Container(
height: 80,
color: Colors.yellow,
),
Container(
height: 80,
color: Colors.red,
),
Container(
height: 80,
color: Colors.green,
),
],
);
}
image
5.GridView.custom属性
- gridDelegate:SliverGridDelegate:SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent
- childrenDelegate:SliverChildDelegate:SliverChildListDelegate/SliverChildBuilderDelegate
_myGridViewCustom() {
return GridView.custom(
gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
childrenDelegate:
SliverChildBuilderDelegate((BuildContext context, int index) {
return Container(
height: 80,
color: Colors.primaries[index % 11],
);
}, childCount: 5),
);
}
image