简介
使用单个子布局模型的ScrollView
- ListView:一个使用的线性布局的BoxScrollView
- GridView:一个使用二维布局模型的BoxScrollView
- CustomScrollView:可以将多个子布局模型组合到一个滚动视图中
基本用法
由于是抽象类,所以不能直接实例化
- 如上简介,我们可以写一个类继承BoxScrollView
- Demo中,演示ListView的部分源码,用以实现继承BoxScrollView的代码编写,效果和ListView并无两样
实例演示
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class BoxScrollViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Text('滚动一下就看看吧 s( ̄▽ ̄)~*'),
Container(
height: 300.0,
child: ListViewDemo(
children: <Widget>[
BoxItem(),
BoxItem(),
BoxItem(),
BoxItem(),
BoxItem(),
BoxItem(),
BoxItem(),
BoxItem(),
BoxItem(),
],
),
)
],
),
);
}
}
class BoxItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 60.0,
margin: const EdgeInsets.symmetric(vertical: 20.0),
color: Theme.of(context).primaryColor,
child: Text(
'测试继承BoxScrollView',
style: TextStyle(color: Colors.white),
),
);
}
}
class ListViewDemo extends BoxScrollView {
// 构造函数
ListViewDemo({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
}) : childrenDelegate = SliverChildListDelegate(
children,
addAutomaticKeepAlives: addAutomaticKeepAlives,
addRepaintBoundaries: addRepaintBoundaries,
addSemanticIndexes: addSemanticIndexes,
),
super(
key: key,
scrollDirection: scrollDirection,
reverse: reverse,
controller: controller,
primary: primary,
physics: physics,
shrinkWrap: shrinkWrap,
padding: padding,
cacheExtent: cacheExtent,
semanticChildCount: semanticChildCount ?? children.length,
);
final double itemExtent;
final SliverChildDelegate childrenDelegate;
// 子类应重写此方法以构建布局模型。
@override
Widget buildChildLayout(BuildContext context) {
if (itemExtent != null) {
return SliverFixedExtentList(
delegate: childrenDelegate,
itemExtent: itemExtent,
);
}
return SliverList(delegate: childrenDelegate);
}
}