一、介绍
Listview最常见的滚动小部件，在设置的滚动方向上，一个一个的显示它的子项。
二、源码
ListView({
Key key,
Axis scrollDirection = Axis.vertical,//滚动方向
bool reverse = false,//组件反向排列
ScrollController controller,//滚动监听器
bool primary,//值为false内容不足不可滚动，值为true，可以滚动
ScrollPhysics physics,//滑动类型设置
bool shrinkWrap = false,//内容适配
EdgeInsetsGeometry padding,//内边距
this.itemExtent,//确定每一个子项的高度
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,//设置预加载区域
List children = const [],//子项数组
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior = Clip.hardEdge,
}) : 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,
dragStartBehavior: dragStartBehavior,
keyboardDismissBehavior: keyboardDismissBehavior,
restorationId: restorationId,
clipBehavior: clipBehavior,
);
三、ListView参数介绍
| 属性 | 说明 |
|---|---|
| scrollDirection | 设置滑动方向 Axis.horizontal 水平列表 Axis.vertical 垂直列表 |
| reverse | 组件反向排列，默认false |
| controller | 滚动控制器(滑动监听，为true监听无效) |
| primary | 值为false内容不足不可滚动，值为true，可以滚动 |
| physics | 滑动类型设置 AlwaysScrollableScrollPhysics() 总是可以滑动 NeverScrollableScrollPhysics禁止滚动 BouncingScrollPhysics 内容超过一屏 上拉有回弹效果 ClampingScrollPhysics 包裹内容 不会有回弹 |
| shrinkWrap | 内容适配 |
| padding | 内边距 |
| itemExtent | 确定每一个item的高度 会让item加载更加高效 |
| cacheExtent | 设置预加载的区域 |
| children | 组件元素 const 数组内添加widget类型的数据 flutter的所有组件都是widget,也就是说所有的listView可以添加所有的组件 新闻列表ListTiele,属性简介如下 |
四、ListTitle源码（官方提供的新闻标题列表）
const ListTile({
Key key,
this.leading,//前图标
this.title,//标题
this.subtitle,//简介
this.trailing,//后图标
this.isThreeLine = false,//是否三行显示，默认false
this.dense,//列表平铺是否是垂直密集列表的一部分。
this.visualDensity
this.shape,
this.contentPadding,//内容边距
this.enabled = true,//是否可点击，默认为true
this.onTap,//点击事件
this.onLongPress,//长按事件
this.mouseCursor,
this.selected = false,//是否选中
this.focusColor,
this.hoverColor,
this.focusNode,
this.autofocus = false,
this.tileColor,
this.selectedTileColor,//
}) : assert(isThreeLine != null),
assert(enabled != null),
assert(selected != null),
assert(autofocus != null),
assert(!isThreeLine || subtitle != null),
super(key: key);
五、ListTitle参数介绍
| 属性 | 说明 |
|---|---|
| leading | 前图标 可以添加Icon官方提供的组件，也可以添加image组件等 |
| title | 标题 |
| subtitle | 简介 |
| trailing | 后图标，使用方法和leading相似 |
| dense | 列表平铺是否是垂直密集列表的一部分。 |
| contentPadding | 设置内容边距 |
| enabled | 是否可点击，默认为true |
| onTap | 点击事件 |
| onLongPress | 长按事件 |
| selected | 是否选中 |
六、demo
1、listView添加listTitle
return Center(
child: ListView(
scrollDirection: Axis.vertical,//滚动方向
padding: EdgeInsets.all(10),
children: [
ListTile(
//前图标
leading: Icon(Icons.account_circle_sharp,
color: Colors.red,
),
title: Text("标题1"),//标题
isThreeLine: true,
subtitle: Column(
children: [
Text('Titile2'),
Text('Title 3'),
],
),
trailing: Icon(
Icons.access_time_sharp,
color: Colors.yellow,
),
),
ListTile(
leading: Image.network("https://www.itying.com/images/flutter/1.png"),
title: Text("标题2"),//标题
subtitle: Text("二级标题2二级标题2二级标题2二级标题2二级标题2二级标题2二级标题2二级标题2二级标题2"),
trailing: Image.network("https://www.itying.com/images/flutter/2.png"),
),
ListTile(
title: Text("标题3"),//标题
subtitle: Text("二级标题3"),
),
ListTile(
title: Text("标题4"),//标题
subtitle: Text("二级标题4"),
),
ListTile(
title: Text("标题5"),//标题
subtitle: Text("二级标题5"),
),
],
),
);
效果图
61dee9877cb60094bc7ca77bb53f348.png
2、ListView添加其他组件
listView滚动方向为vertical，内部组件设置宽度无效，都是铺满屏幕宽度,滚动方向为horizontal,内部组件设置高度无效，都会默认铺满屏幕高度
return Center(
child: ListView(
//滚动方向
scrollDirection: Axis.vertical,
//内间距
children: [
Container(
//listView滚动方向为vertical，内部组件设置宽度无效，都是铺满屏幕宽度
// 滚动方向为horizontal,内部组件设置高度无效，都会默认铺满屏幕高度
height: 200,
width: 300,
color: Colors.red,
),
Container(
height: 200,
width: 100,
color: Colors.yellow,
),
Container(
height: 200,
color: Colors.blue,
),Container(
height: 200,
width: 300,
color: Colors.deepPurple,
),
],
),
);
效果图
6ea89ee643a11d3b2afc0583f5d2584.png
3、循环添加
class ListStu extends StatelessWidget{
List getData(){
List list = new List();
for(var i=0;i<20;i++){
list.add(ListTile(
title: Text("我是一个条目$i"),
));
}
return list;
}
@override
Widget build(BuildContext context) {
return Center(
child: ListView(
//滚动方向
scrollDirection: Axis.vertical,
//内间距
padding: EdgeInsets.all(10),
children: this.getData(),
),
);
}
}
效果图
4aa8f64c690a49c6122c5062e09e85e.png
4、ListView.builder添加数据
class ListStu extends StatelessWidget {
List list = new List();
ListStu() {
List listData = [
{"title": "标题1",
"author": "内容1",
"image": "https://www.itying.com/images/flutter/1.png"
}, {"title": "标题2",
"author": "内容2",
"image": "https://www.itying.com/images/flutter/2.png"
}, {"title": "标题3",
"author": "内容3",
"image": "https://www.itying.com/images/flutter/3.png"
}, {"title": "标题4",
"author": "内容4",
"image": "https://www.itying.com/images/flutter/4.png"
}
];
list.addAll(listData);
}
Widget _getListView(context, index){
return ListTile(
title: Text(list[index]["title"]),
subtitle: Text(list[index]["author"]),
leading: Image.network(list[index]["image"]),
);
}
@override
Widget build(BuildContext context) {
return ListView.builder(
//list的长度
itemCount: list.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(list[index]["title"]),
subtitle: Text(list[index]["author"]),
leading: Image.network(list[index]["image"]),
);
});
}
}
效果图
2c087300cb098a7dd7d0d65e82dbedf.png