话说很久不起这么早，今儿个早起一次，发现我们小区的早上空气如此沁人心脾，为了不辜负这清晨美景，来继续更新Flutter吧！
一、列表组件
列表布局类似于android原生开发中的listview控件 ，支持垂直和水平滑动。
1）垂直列表
2）垂直图文列表
3）水平列表
4）动态列表
5）矩阵式列表
常用的的属性参数：
1）scrollDirection属性 scrollDirection:Axis.horizontal/vertical表示水平和垂直
2）padding 属性 padding:EdgeInset.all(10) 内边距10
3）resolve 属性 组件的反向排序
4）children 属性 List<Widget> children:<Widget>[]
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
padding: EdgeInsets.all(10),
children: <Widget>[
Image.network("https://www.itying.com/images/flutter/1.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
),
Image.network("https://www.itying.com/images/flutter/2.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
),
Image.network("https://www.itying.com/images/flutter/3.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
),
Image.network("https://www.itying.com/images/flutter/4.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
),
Image.network("https://www.itying.com/images/flutter/1.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
),
Image.network("https://www.itying.com/images/flutter/2.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
),
Image.network("https://www.itying.com/images/flutter/3.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
),
Image.network("https://www.itying.com/images/flutter/1.png"),
Image.network("https://www.itying.com/images/flutter/2.png"),
Image.network("https://www.itying.com/images/flutter/3.png"),
],
);
}
}
上边的写法是图文结合的排版，每个文本item样式设置都封装 在Container组件中 ，图片用远程加载方式Image.network()；padding:EdgeInsets.fromLTRB()设置内边距。
2.图加标题写法
children: <Widget>[
ListTile(
leading:Image.network("https://www.itying.com/images/flutter/1.png"),
title: Text('华北黄淮高温雨今起强势登场'),
subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
),
ListTile(
leading:Image.network("https://www.itying.com/images/flutter/2.png"),
title: Text('保监局50天开32罚单 “断供”违规资金为房市降温'),
subtitle: Text("中国天气网讯 保监局50天开32罚单 “断供”违规资金为房市降温"),
trailing:Image.network("https://www.itying.com/images/flutter/2.png")
),
],
leading:Image.network()左侧标题，只能加一张；title一级标题粗体 ；subtitle二级标题粗体 ；trailing:Image.network()二级标题 。
动态添加数组
class HomeContent extends StatelessWidget {
//自定义方法
Widget _getListData(context,index){
return ListTile(
title: Text(listData[index]["title"]),
leading:Image.network(listData[index]["imageUrl"]),
subtitle:Text(listData[index]["author"])
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount:listData.length,
itemBuilder:this._getListData
);
}
}
如上代码块所示：
自定义一个方法,返回值是 ListTitle组件 ，这就相当于item 的布局了，当然也可以用Container组件，自定义item的布局格式。
