ListView.children
默认构造函数有一个children参数,它接收一个Widget列表 (List),这种方式适合只有少量子组件的情况,因为这种方式需要将所有的children都提前创建好,这是一个较大的工作量,而不是等子widget需要显示的时候在创建,也就是说,通过默认构造函数构建的ListView没有基于懒加载模型.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("List Demo")),
body: ListViewChildrenWidget(),
),
);
}
}
class ListViewChildrenWidget extends StatelessWidget {
// 生成十条Padding 并且left top 依次增大
List<Widget> _getWidgetData() {
List<Widget> list = [];
for (int i = 0; i < 10; i++) {
list.add(Padding(
padding: EdgeInsets.fromLTRB((1.0 + i * 6), (10.0 + i), 0, 0),
child: Text(
"我是第$i 条数据~",
style: TextStyle(
color: Colors.red,
fontSize: (14.0 + i),
),
),
));
}
return list;
}
@override
Widget build(BuildContext context) {
return Center(
child: ListView(
scrollDirection: Axis.vertical,
children: _getWidgetData(),
));
}
}
效果图
ListViewChildrent
ListView.ListTile
class ListViewTileWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: EdgeInsets.all(15),
children: [
ListTile(
trailing: Image.network(
"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
width: 100,
height: 100,
fit: BoxFit.scaleDown,
),
title: Text("Hello"),
subtitle: Text("are you OK ???"),
leading: Icon(Icons.add, color: Colors.red, size: 25),
onTap: (){
print("点击事件");
}),
ListTile(
leading: Image.network(
"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
),
title: Text("gegeg"),
subtitle: Text("nssss"),
trailing: Icon(Icons.map, color: Colors.lightBlue, size: 25),
onLongPress: (){
print("---Long Click View-");
}),
ListTile(
leading: Image.network(
"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png"),
title: Text("xuxux"),
subtitle: Text("kaaakaka"),
trailing: Icon(Icons.list, color: Colors.amberAccent, size: 25)),
ListTile(
leading: Image.network(
"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png"),
title: Text("Hello"),
subtitle: Text("are you OK ??"),
trailing:
Icon(Icons.ac_unit, color: Colors.deepOrangeAccent, size: 25)),
],
);
}
}
ListTile 属性
· leading 头部靠前的图标
· trailing 尾部靠后的图标
· title 标题
· subtitle 副标题
· isThreeLine 是否三行显示
· contentPadding 内容内边距
· onTap item 点击事件
· onLongPress item 长按事件
· selected 是否是选中状态.
效果图
ListTile.png
ListView.builder 构造
class ListBuilderWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
primary: true,
cacheExtent: 5,
physics: BouncingScrollPhysics(),
itemCount: 70,
itemBuilder: (context, position) {
return _getOddDivider(position);
});
}
final _textStyle18 = TextStyle(fontSize: 18.0, color: Colors.black);
final _textStyle16 = TextStyle(fontSize: 16.0, color: Colors.black26);
/**
* 扩展 itemCount 加载divide
*/
_getOddDivider(int position) {
if (position.isOdd) {
// 是奇数
return Divider(height: 1.0);
} else {
position = position ~/ 2;
return Container(
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("标题", style: _textStyle18),
Text("子标题", style: _textStyle16),
Icon(
Icons.ondemand_video,
size: 20,
)
],
),
);
}
}
/**
* Divider 分割线
* 如果把 Divider 放在 Column 布局中 会发现divider 没有横向填充完item. item两端会有padding值.
*/
_getColumn() {
return Container(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
children: [
Text("新闻标题", style: _textStyle18),
Text("内容内容", style: _textStyle16),
Icon(
Icons.ac_unit,
size: 20,
)
],
),
Divider(
height: 1.0,
)
],
),
);
}
ListView.builder构造
· shrinkWrap child 高度适配item填充的内容.
· primary 默认为false, 当为true的时候, controller滑动监听就失效了.
· cacheExtent 预加载
· controller 滑动监听,用于上拉加载更多.
· physics 滑动属性
AlwaysScrollableScrollPhysics() 总是可以滑动.
BouncingScrollPhysics() 内容超过一屏,上拉有回弹的效果.
ClampingScrollPhysics() 包裹内容 不会有回弹.
NeverScrollableScrollPhysics() 禁止滚动.
ListView.builder.png
ListView.separated
多类型item
class ListSeparatedWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.separated(
shrinkWrap: true,
itemBuilder: (context, index) {
if (index.isOdd) {
return ListTile(
leading: Icon(
Icons.ac_unit,
size: 25,
),
title: Text(
"我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
subtitle: Text("文本文本文本"),
onTap: () {
print("---点击事件=$index");
},
);
} else {
return Divider(
height: 1.0,
);
}
},
separatorBuilder: (context, index) {
if (index == 3 || index == 10) {
return InkWell(
onTap: () {
print("分割线点击~$index");
},
child: Container(
height: 30,
color: Colors.deepOrangeAccent,
alignment: Alignment.center,
child: Text("分割线$index",
style: TextStyle(fontSize: 16.0, color: Colors.white)),
));
//
} else {
return Row();
}
},
itemCount: 20);
}
}
ListSeparatedWidget.png
网友评论