ListView概念

在Android开发中，显示列表的控件也叫ListView或者是RecyclerView，在IOS开发中叫TableView或者ScrollView。应该很好理解，用途一般用来显示一个列表，比如新闻列表，商品列表等。

ListView简单使用

在Android里面，ListView需要有一个适配器Adapter去管理列表里面的每一行数据的显示和事件，但是在Flutter中，ListView是一个状态不可变的Widget，并且他的功能只是提供滚动，所以ListView本质工作是去滚动一系列的Widget。

我们先来看一个简单的例子

class _onePageState extends State<onePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text("ListView"),
        ),
        body: new ListView(
          children: [
            new ListTile(
              title: new Text("基础组件"),
            ),
            new ListTile(
              title: new Text("Material Components"),
            )
            ,
            new ListTile(
              title: new Text("Cupertino(iOS风格的widget)"),
            )
          ],
        ));
  }
}

看一下效果图

1604373582(1).jpg

我们来分析一下代码，Scaffold 的 body 属性里面新建一个ListView，然后ListView的children属性接收的是一个数组，然后我们看来一个这个数组是怎么回事
点开LisView的源码，其实就一目了然了

1604374183(1).jpg

源码里面可以看到children其实需要传递的对象就是一个Widget的数组，最开始的时候我们说过，在Flutter里面，一切皆Widget，那这样就是说我们的ListView其实是可以显示任何的Flutter Widget的（表示怀疑）。

首先我们先把代码简单的改一下，只贴核心部分

body: new ListView(
          children: [
            new ListTile(
              title: new Text("基础组件"),
            ),
            new ListTile(
              title: new Text("Material Components"),
            ),
            new ListTile(
              title: new Text("Cupertino(iOS风格的widget)"),
            ),
            new Text("我是Text"),
            new Icon(Icons.phone),
            new RaisedButton(onPressed: null,
            child: new Text("按钮"),),
          ],
        ));

1604375802(1).jpg

简单的验证了一下我们的观点，但是这样写肯定是不符合实际的，一般情况列表的数据和样式都是变化的，所以我们再来改造一下我们的代码

class _onePageState extends State<onePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text("ListView"),
        ),
        body: new ListView(
          children: _getListData(),
        ));
  }

  _getListData() {
    List<Widget> widgets = [];
    for (int i = 0; i < 10; i++) {
      widgets.add(new Padding(
          padding: new EdgeInsets.all(10.0), child: new Text("item $i")));
    }
    return widgets;
  }
}