可滾動(dòng)的列表控件与柑。ListView是最常用的滾動(dòng)widget亲轨，它在滾動(dòng)方向上一個(gè)接一個(gè)地顯示它的孩子醇坝。在縱軸上扰柠，孩子們被要求填充ListView
構(gòu)造方法有四種
new ListView
new ListView.builder
new ListView.separated
new ListView.custom
1.new ListView
這是默認(rèn)的listView構(gòu)造
List<Widget> mItem = new List();
for (int i = 0; i < 20; i++) {
mItem.add(new ListTile(title: new Text('聆聽(tīng)璇律${i}')));
}
//添加分割線
var divideListItem = ListTile.divideTiles(
tiles: mItem, context: context, color: Colors.pink).toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('第五個(gè)頁(yè)面'),
),
body: new ListView(
//無(wú)分割線
children: mItem,
//有分割線
// children: divideListItem,
),
);
無(wú)分割線圖
no_divider.png
有分割線圖
divider.png
2.new ListView.Builder
我們可以自定義item的樣式itemBuilder
body: new ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return new Container(
padding: new EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Image.asset(
'images/goods_image.png', width: 100.0, height: 100.0,),
new Padding(padding: new EdgeInsets.all(10.0)),
new Text('第${index}個(gè)圖',)
],
)
);
},
),
listView_builder.png
3.new ListView.separated
他的特殊地方在于多了一個(gè)separatorBuilder參數(shù)，這個(gè)參數(shù)可以用來(lái)添加分割線藐吮。
body: new ListView.separated(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return new Container(
padding: new EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
new Image.asset(
'images/goods_image.png', width: 100.0, height: 100.0,),
new Padding(padding: new EdgeInsets.all(10.0)),
new Text('第${index}個(gè)圖',)
],
),
);
},
separatorBuilder: (BuildContext context, int index) {
return new Divider(height: 1.0, color: Colors.blue,);
},
),
separator.png
