/**
ListView({
Key key,
Axis scrollDirection = Axis.vertical,//滚动方向
bool reverse = false,//是否反向显示数据
ScrollController controller,//设置listview初始位置
bool primary,
ScrollPhysics physics,//物理滚动,AlwaysScrollableScrollPhysics()让listview在不满一屏时也能滚动
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,//item有效范围
bool addAutomaticKeepAlives = true,//自动保存视图缓存
bool addRepaintBoundaries = true,//添加重绘边界
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
})*/
ListView可以当列表用(相当于Android中的ListView,RecycleView等)也可以当可滑动布局用(相当于Android中的ScrollView)。
ListView使用方式
第一种:当容器,直接在里面放入组件。适合于具有少量子元素的列表视图,会渲染所有的子组件。
body: ListView(
children: <Widget>[
Text("ListView的一行数据"),
Text("ListView的一行数据"),
Text("ListView的一行数据"),
Text("ListView的一行数据"),
],
),
第二种:ListView.builder方式。适合于具有大量(或无限)子视图的列表视图,因为构建器只对那些实际可见的子视图渲染
1.准备数据
var list = [
ItemInfo("ListView的一行数据"),
ItemInfo("ListView的一行数据"),
ItemInfo("ListView的一行数据"),
ItemInfo("ListView的一行数据")
];
2.创建item布局
import 'package:flutter/material.dart';
import './../bean/ItemInfo.dart';
// 定义一个回调接口
typedef OnItemClickListener = void Function(int position);
class HomeListItem extends StatelessWidget {
int position;
ItemInfo iteminfo;
OnItemClickListener listener;
HomeListItem(this.position, this.iteminfo, this.listener);
@override
Widget build(BuildContext context) {
var widget = Column(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
iteminfo.title,
style: TextStyle(
fontSize: 15.0,
color: Color.fromARGB(255, 51, 51, 51),
),
)
],
),
],
mainAxisAlignment: MainAxisAlignment.center,
),
height: 50.0,
color: Color.fromARGB(255, 241, 241, 241),
padding: EdgeInsets.only(left: 20.0),
),
//用Container设置分割线
Container(
height: 1.0,
color: Color.fromARGB(255, 230, 230, 230),
)
//分割线
// Divider()
],
);
//InkWell点击的时候有水波纹效果
return InkWell(
onTap: () => listener(position),
child: widget
);
}
}
3.使用ListView
body: ListView.builder(
//设置listview初始滑动距离
controller: ScrollController(
initialScrollOffset: 350.0,
),
//列表长度
itemCount: list.length,
//列表item布局
itemBuilder: (context, position) {
return HomeListItem(position, list[position], (index) =>
//点击回调
Navigator.push(
context,
new MaterialPageRoute(builder: (BuildContext context) {
return TextWdigetPage();
}))
);
}),
4.列表刷新,调用setState方法。
setState(() {
list.add(ItemInfo("ListView的一行数据add"));
}
);
第三种:ListView.separated方式。适用于具有固定数量的子控件的列表视图
这种方式和ListView.builder方式使用方法基本一致,不同的是多了separatorBuilder方法,可以直接设置分割线。
body: ListView.separated(
itemBuilder: (context, position) {
return HomeListItem(position, list[position], (index) =>
Navigator.push(
context,
new MaterialPageRoute(builder: (BuildContext context) {
return TextWdigetPage();
}))
);
},
// 添加分割线,
separatorBuilder: (BuildContext context, int index) => new Divider(),
itemCount: list.length,
),
第四种:ListView.custom方式。提供了定制子模型的其他方面的能力。 例如,SliverChildDelegate可以控制用于估计实际上不可见的孩子的大小的算法。
练习demo,链接https://gitee.com/xgljh/Flutter
网友评论