針對(duì)開(kāi)發(fā)中涉及到列表展示數(shù)據(jù)煌珊，flutter提供了listview組件來(lái)完整列表展示的功能歼捐；
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(alignment: Alignment.center, child:ListView(
children: <Widget>[
],
));
}
從上編代碼可以看出listview接受的參數(shù)是一個(gè)widget的數(shù)組舞骆，即在此數(shù)組中所包含的元素必須為組件（Container,Text,Image,ListTile等等）
- 靜態(tài)數(shù)據(jù)展示
簡(jiǎn)單數(shù)據(jù)列表的展示惜颇，實(shí)現(xiàn)簡(jiǎn)單文本信息的：
/**
* listview組件為簡(jiǎn)單的組件
* 例如：
* container母蛛，text因宇，image
*/
ListView _getNormalListView() {
return ListView(
children: <Widget>[
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
Text("我是文本"),
],
);
}
定義簡(jiǎn)單方法七婴，返回值為L(zhǎng)istView，在代碼中Widget數(shù)組中班漢多個(gè)簡(jiǎn)單的組件（Text）;如果在列表中想實(shí)現(xiàn)簡(jiǎn)單的提問(wèn)混排察滑，則使用ListTile就可以實(shí)現(xiàn)：
/**
* listview組件元素為L(zhǎng)istTile
* ListTile：可以實(shí)現(xiàn)圖文混排的效果
*/
ListView _getListTileListView() {
return ListView(
children: <Widget>[
ListTile(
title: Text("組件為L(zhǎng)istTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("組件為L(zhǎng)istTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("組件為L(zhǎng)istTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("組件為L(zhǎng)istTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("組件為L(zhǎng)istTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("組件為L(zhǎng)istTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("組件為L(zhǎng)istTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
),
ListTile(
title: Text("組件為L(zhǎng)istTile"),
subtitle: Text("ListTile"),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
)
],
);
}
介于列表的數(shù)據(jù)比較多打厘，手動(dòng)的去拼接是一件比較費(fèi)時(shí)間，精力的事情贺辰，我們這里可以使用循環(huán)的方式來(lái)實(shí)現(xiàn)數(shù)據(jù)的構(gòu)造：
/**
* 利用for循環(huán)進(jìn)行展示數(shù)據(jù)的拼接->靜態(tài)數(shù)據(jù)
*/
List<Widget> _getStaticWidgets() {
List<Widget> list = new List();
for (var i = 0; i < 20; i++) {
list.add(ListTile(
title: Text("這是循環(huán)得到的標(biāo)題$i"),
subtitle: Text("這是循環(huán)得到的自標(biāo)題$i"),
));
}
return list;
}
通過(guò)for循環(huán)我們就可以迅速的完成多條數(shù)據(jù)的生成户盯，并且將數(shù)據(jù)賦值到組件上在Listview
上進(jìn)行展示；
- 動(dòng)態(tài)數(shù)據(jù)展示
以上的數(shù)據(jù)展示都是簡(jiǎn)單的靜態(tài)的數(shù)據(jù)饲化，接下來(lái)我們模擬服務(wù)其請(qǐng)求數(shù)據(jù)莽鸭，展示在列表傷的操作，在項(xiàng)目根目錄創(chuàng)建模擬數(shù)據(jù)：
List listData = [
{"title": "《西游記》", "author": "吳承恩"},
{"title": "《水滸傳》", "author": "施耐庵"},
{"title": "《三國(guó)演義》", "author": "羅貫中"},
{"title": "《紅樓夢(mèng)》", "author": "曹雪芹"},
{"title": "《大學(xué)》", "author": "曾參"},
{"title": "《中庸》", "author": "子思"},
{"title": "《論語(yǔ)》", "author": "孔子"},
{"title": "《孟子》", "author": "孟子"},
];
我們可以講上述的數(shù)據(jù)展示在ListView列表上：
1.常規(guī)方法展示
/**
* 利用for循環(huán)進(jìn)行展示數(shù)據(jù)的拼接->動(dòng)態(tài)數(shù)據(jù)
*/
List<Widget> _getDynamicWidget() {
var tempList = listData.map((value) {
return ListTile(
title: Text(value["title"]),
subtitle: Text(value["author"]),
leading: Icon(Icons.home),
trailing: Icon(Icons.school),
);
});
return tempList.toList();
}
我們將listData數(shù)據(jù)迭代遍歷吃靠，并且在遍歷過(guò)程中將數(shù)據(jù)賦值給組件ListTile上硫眨；
2.通過(guò) ListView.builder（）的方式來(lái)
/**
* listview.builder()操作展示數(shù)據(jù)
*/
ListView _getListViewByBuilder(BuildContext context) {
return ListView.builder(
itemCount: this.list.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(list[index]["title"]),
subtitle: Text(list[index]["author"]),
);
});
}
- itemCount 數(shù)組的長(zhǎng)度
- itemBuilder 每一個(gè)listview條目賦值的操作
1.context: 重寫(xiě)父類方法是build（）的入?yún)ⅲ?br> 2.index : 是遍歷集合的角標(biāo)值
這里itemBuilder: (context, index)為什么這么寫(xiě)，還是有疑問(wèn)的巢块，初學(xué)帶問(wèn)號(hào)礁阁，先記著巧号，待以后解決！至此listview垂直方向展示數(shù)據(jù)已完成姥闭，而水平方向列表只需在ListView如參數(shù)中添加參數(shù)scrollDirection: Axis.horizontal就可以實(shí)現(xiàn)水平方向的列表丹鸿！
