flutter widget组件之-----------可滚动的组件
flutter widget组件之-----------可滚动的组件
widget分为两类：widgets library中的标准widget和Material Components library中的专用widget;任何应用程序都可以使用widgets library中的widget，但只有Material应用程序可以使用Material Components库。其中Card，ListTitle就是Material Components库中的组件。
GridView
一个可滚动的二维空间数组
- 构造函数
GridView({
Key key,
Axis scrollDirection = Axis.vertical,// 滚动方向，水平和垂直
bool reverse = false,// 子项排列是否倒序
ScrollController controller,
bool primary,//如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动
ScrollPhysics physics,//滑动类型设置
bool shrinkWrap = false,// 内容适配
EdgeInsetsGeometry padding, // 内边距
//gridDelegate 委托类 ,类型是SliverGridDelegate 两个常用的实现类为SliverGridDelegateWithFixedCrossAxisCount（固定列数），SliverGridDelegateWithMaxCrossAxisExtent（用于子元素有最大宽度限制的场景）
@required this.gridDelegate,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
})
GridView.builder({
//省略其它
@required this.gridDelegate,//网格委托
@required IndexedWidgetBuilder itemBuilder,//子项构建者
})
GridView.custom({
//省略其它
@required this.gridDelegate, //网格委托
@required this.childrenDelegate,// 子项委托
})
GridView.count({
//省略其它
@required int crossAxisCount,// 列数
})
GridView.extent({
//省略其它
@required double maxCrossAxisExtent, //子项组件大小
})
- 应用示例
// 定义列表数据类型
class BaseBean {
String name;
int age;
String content;
BaseBean(this.name, this.age, this.content);
}
// 利用list.generate函数 构造列表数据集合
List<BaseBean> list = new List<BaseBean>.generate(
60, (i) => new BaseBean("name$i", i, "content=$i"));
class MyStatePageState extends State<MyStatePage> {
// 构建子项
Widget BuildItem(BaseBean item){
return Container(
child:Column(
children: <Widget>[
new Text(
"${item.name}",
style: new TextStyle(fontSize: 18.0, color: Colors.green),
),
new Text(
"${item.age}",
style: new TextStyle(fontSize: 18.0, color: Colors.red),
),
],
),
);
}
// gridview 构造函数构建
Widget GridViewLayout(){
return GridView(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(20.0),
//
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
),
children:list.map((item)=>BuildItem(item)).toList(),
);
}
// gridView builder 构建视图列表
Widget gridViewLayoutBuilder(List<BaseBean> list) {
return GridView.builder(
scrollDirection: Axis.vertical, // 主轴防线
padding: EdgeInsets.all(10.0),
itemCount:list.length,// 标明list的长度，不然报错
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
) ,
// 创建子项widgets
itemBuilder: (context, i) => new Container(
child: new Row(
children: <Widget>[
new Text(
"${list[i].name}",
style: new TextStyle(fontSize: 18.0, color: Colors.red),
),
],
),
));
}
/// gridView count 构建视图列表
Widget gridViewLayoutCount(List<BaseBean> list) {
return GridView.count(
crossAxisCount: 5,//列数
padding: EdgeInsets.symmetric(vertical: 0),
children: list.map((item)=>BuildItem(item)).toList()
);
}
/// gridView extent 构建视图列表
Widget gridViewLayoutExtent(List<BaseBean> list) {
return GridView.extent(
maxCrossAxisExtent: 200,// 子项组件大小
children: list.map((item)=>BuildItem(item)).toList()
);
}
/// gridView custom 构建视图列表
Widget gridViewLayoutCustom(List<BaseBean> list) {
return GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
// 构建子项的代理
childrenDelegate: MyChildrenDelegate(
(BuildContext context, int i) {
return new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Text(
"${list[i].name}",
style: new TextStyle(fontSize: 18.0, color: Colors.red),
),
],
));
},
childCount: list.length,
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("list body"),),
// body:GridViewLayout(),
// body:gridViewLayoutBuilder(list),
// body:gridViewLayoutCount(list),
// body: gridViewLayoutExtent(list),
body:gridViewLayoutCustom(list),
);
}
}
// 自定义gridview布局的代理类
class MyChildrenDelegate extends SliverChildBuilderDelegate {
MyChildrenDelegate(
Widget Function(BuildContext, int) builder, {
int childCount,
bool addAutomaticKeepAlive = true,
bool addRepaintBoundaries = true,
}) : super(builder,
childCount: childCount,
addAutomaticKeepAlives: addAutomaticKeepAlive,
addRepaintBoundaries: addRepaintBoundaries);
///监听 在可见的列表中 显示的第一个位置和最后一个位置
@override
void didFinishLayout(int firstIndex, int lastIndex) {
print('firstIndex: $firstIndex, lastIndex: $lastIndex');
}
// 可不重写 重写不能为null 默认是true 添加进来的实例与之前的实例是否相同 相同返回true 反之false
// listView 暂时没有看到应用场景 源码中使用在 SliverFillViewport 中
@override
bool shouldRebuild(SliverChildBuilderDelegate oldDelegate) {
// TODO: implement shouldRebuild
// return super.shouldRebuild(oldDelegate);
return this !=oldDelegate;
}
}
NestedScrollView
一个可以嵌套其它可滚动widget的widget
- 构造函数
NestedScrollView({
Key key,
this.controller,
this.scrollDirection = Axis.vertical,
this.reverse = false,
this.physics,
@required this.headerSliverBuilder,
@required this.body,
})
- 应用示例
SingleChildScrollView
有一个子widget的可滚动的widget，子内容超过父容器时可以滚动
- 构造函数
SingleChildScrollView({
Key key,
this.scrollDirection = Axis.vertical, //滚动方向，有水平和垂直连个方向
this.reverse = false,// 子项是否倒序排列
this.padding,// 内边距
bool primary,//控制是否有滑动效果，内容不足的时候，有效果
this.physics,// 滑动类型
this.controller,// 控制滑动位置的控制器
this.child,// 子项
})
- 应用示例
class MyStatePageState extends State<MyStatePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("singleChildScrollView"),),
body:SingleChildScrollView(
scrollDirection:Axis.vertical,
reverse: true,// 子项倒序排列
padding: EdgeInsets.all(10),
primary: true,// 设置为true,即使内容少，也有滚动效果
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: 500,
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
// A fixed-height child.
color: const Color(0xff808000), // Yellow
height: 120.0,
),
Container(
// Another fixed-height child.
color: const Color(0xff008000), // Green
height: 120.0,
),
],
),
),
),
);
}
}
Scrollable
实现了可滚动widget的交互模型，但不包含UI显示相关的逻辑
- 构造函数
Scrollable({
Key key,
this.axisDirection = AxisDirection.down,//滚动方向
this.controller,// 控制滚动位置的控制器
this.physics,// 股东类型
@required this.viewportBuilder,// 创建显示滚动内容窗口的Builder
this.excludeFromSemantics = false,
this.semanticChildCount,// 带有语义信息的子项widget的数量
})
- 应用示例
ScrollBar
一个Material Design 滚动条，表示当前滚动到了什么位置
- 构造函数
Scrollbar({
Key key,
@required this.child, // 子项 滚动条，不知道怎么用呀
})
- 应用示例
CustomScrollView
一个使用slivers创建自定义的滚动效果的ScrollView
- 构造函数
CustomScrollView({
Key key,
Axis scrollDirection = Axis.vertical,// // 滚动方向，水平和垂直
bool reverse = false,// 子项是否倒序排列
ScrollController controller,// 滚动位置控制器
bool primary,// 是否有滚动效果
ScrollPhysics physics,// 滚动类型
bool shrinkWrap = false,
double cacheExtent,
this.slivers = const <Widget>[],// 视图窗口中的sliver组件块
int semanticChildCount,
})
- 应用示例
class MyStatePageState extends State<MyStatePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("scrollable"),),
body:CustomScrollView(
// sliver组件块
slivers: <Widget>[
const SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
),
);
}
}
NotificationListener
一个用来监听树上冒泡通知的widget
- 构造函数
NotificationListener({
Key key,
@required this.child,// 子项
this.onNotification,//
})
- 应用示例
ScrollConfiguration
控制可滚动组件在子树中的表现行为
- 构造函数
ScrollConfiguration({
Key key,
@required this.behavior,// 子项组件scrollable的相关配置
@required Widget child,// 子项组件
})
- 应用示例
refreshIndicator
Material Design下拉刷新指示器，包装一个可滚动widget
- 构造函数
RefreshIndicator({
Key key,
@required this.child,
this.displacement = 40.0,
@required this.onRefresh,
this.color,
this.backgroundColor,
this.notificationPredicate = defaultScrollNotificationPredicate,
this.semanticsLabel,
this.semanticsValue,
})
- 应用示例
class MyStatePageState extends State<MyStatePage>{
// TODO: implement build
var curPage = 1;
ScrollController _controller = new ScrollController();
var listData = List<String>.generate(30, (i) => "CL $i");
Future<Null> _pullToRefresh() async {
print("object.........................................");
// curPage = 1;
//下拉刷新做处理
setState(() {
////改变数据，这里随意发挥
listData = List<String>.generate(30, (i) => "CL $i");
});
return null;
}
MyStatePageState() {
_controller.addListener(() {
var maxScroll = _controller.position.maxScrollExtent;
var pixels = _controller.position.pixels;
if (maxScroll == pixels && listData.length < 100){
// 上拉刷新做处理
print('load more ...');
// curPage++;
setState(() {
//改变数据，这里随意发挥
listData = List<String>.generate(100, (i) => "CL $i");
});
}
});
}
@override
Widget build(BuildContext context) {
// 创建listview 列表
Widget listView = new ListView.builder(
itemCount: listData.length,
itemBuilder: (context,i) {
//这里填充自己想要的列表UI
return new Container(
height: 45.0,
color: Colors.blue,
child: new Text(
"bbbbbbbbbbbbbbbbbbbbbbb___$i",
style: new TextStyle(fontSize: 15.0),
),
);
},
controller: _controller,
);
return new RefreshIndicator(child: listView, onRefresh: _pullToRefresh);
}
}