話說很久不起這么早当凡，今兒個(gè)早起一次挤茄，發(fā)現(xiàn)我們小區(qū)的早上空氣如此沁人心脾如叼，為了不辜負(fù)這清晨美景，來繼續(xù)更新Flutter吧穷劈！
一笼恰、列表組件
列表布局類似于android原生開發(fā)中的listview控件 片酝，支持垂直和水平滑動(dòng)。
1）垂直列表
2）垂直圖文列表
3）水平列表
4）動(dòng)態(tài)列表
5）矩陣式列表
常用的的屬性參數(shù)：
1）scrollDirection屬性 scrollDirection:Axis.horizontal/vertical表示水平和垂直
2）padding 屬性 padding:EdgeInset.all(10) 內(nèi)邊距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(
'我是一個(gè)標(biāo)題',
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(
'我是一個(gè)標(biāo)題',
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(
'我是一個(gè)標(biāo)題',
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(
'我是一個(gè)標(biāo)題',
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(
'我是一個(gè)標(biāo)題',
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(
'我是一個(gè)標(biāo)題',
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(
'我是一個(gè)標(biāo)題',
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"),
],
);
}
}
上邊的寫法是圖文結(jié)合的排版挖腰，每個(gè)文本item樣式設(shè)置都封裝 在Container組件中 雕沿，圖片用遠(yuǎn)程加載方式Image.network()；padding:EdgeInsets.fromLTRB()設(shè)置內(nèi)邊距猴仑。
2.圖加標(biāo)題寫法
children: <Widget>[
ListTile(
leading:Image.network("https://www.itying.com/images/flutter/1.png"),
title: Text('華北黃淮高溫雨今起強(qiáng)勢登場'),
subtitle: Text("中國天氣網(wǎng)訊 21日開始审轮，華北黃淮高溫雨今起強(qiáng)勢登場"),
),
ListTile(
leading:Image.network("https://www.itying.com/images/flutter/2.png"),
title: Text('保監(jiān)局50天開32罰單 “斷供”違規(guī)資金為房市降溫'),
subtitle: Text("中國天氣網(wǎng)訊 保監(jiān)局50天開32罰單 “斷供”違規(guī)資金為房市降溫"),
trailing:Image.network("https://www.itying.com/images/flutter/2.png")
),
],
leading:Image.network()左側(cè)標(biāo)題，只能加一張辽俗；title一級標(biāo)題粗體 疾渣；subtitle二級標(biāo)題粗體 ；trailing:Image.network()二級標(biāo)題 崖飘。
動(dòng)態(tài)添加數(shù)組
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
);
}
}
如上代碼塊所示：
自定義一個(gè)方法,返回值是 ListTitle組件 榴捡，這就相當(dāng)于item 的布局了，當(dāng)然也可以用Container組件朱浴，自定義item的布局格式吊圾。
