flutter控件之---------listView

可滚动的列表控件。ListView是最常用的滚动widget，它在滚动方向上一个接一个地显示它的孩子。在纵轴上，孩子们被要求填充ListView

构造方法有四种
new ListView
new ListView.builder
new ListView.separated
new ListView.custom

1.new ListView

这是默认的listView构造

 List<Widget> mItem = new List();
    for (int i = 0; i < 20; i++) {
      mItem.add(new ListTile(title: new Text('聆听璇律${i}')));
    }
    //添加分割线
    var divideListItem = ListTile.divideTiles(
        tiles: mItem, context: context, color: Colors.pink).toList();
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第五个页面'),
      ),
      body: new ListView(
        //无分割线
        children: mItem,
        //有分割线
//        children: divideListItem,
      ),
    );

无分割线图

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}个图',)
                ],
              )
          );
        },
      ),

listView_builder.png

3.new ListView.separated
他的特殊地方在于多了一个separatorBuilder参数，这个参数可以用来添加分割线。

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}个图',)
              ],
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return new Divider(height: 1.0, color: Colors.blue,);
        },
      ),

separator.png