Flutter常用组件ListView

动态列表是我们常用的基本布局方式之一，我们可以通过ListView来实现动态列表，它也支持横向和纵向的方式去展示。我们可以通过ListView去实现垂直列表、垂直图文列表、水平列表、动态列表、矩阵式列表等。

以下是ListView的常用基本参数

名称

类型&说明

scrollDirection

Axis & Axis.horizontal 水平列表 Axis.vertical 垂直列表

padding

EdgeInsetsGeometry & 内边距

resolve

bool & 组件反向排序

children

List< Widget> & 列表元素

我们先实现基本列表

flutter listview item 单个动画 flutter的listview_Text

代码如下，非常简单：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              "我是基本列表",
              style: TextStyle(fontSize: 28.0),
            ),
            subtitle: Text('我是基本列表哦~~~~'),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              "我是基本列表",
              style: TextStyle(fontSize: 28.0),
            ),
            subtitle: Text('我是基本列表哦~~~~'),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              "我是基本列表",
              style: TextStyle(fontSize: 28.0),
            ),
            subtitle: Text('我是基本列表哦~~~~'),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              "我是基本列表",
              style: TextStyle(fontSize: 28.0),
            ),
            subtitle: Text('我是基本列表哦~~~~'),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              "我是基本列表",
              style: TextStyle(fontSize: 28.0),
            ),
            subtitle: Text('我是基本列表哦~~~~'),
          ),ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              "我是基本列表",
              style: TextStyle(fontSize: 28.0),
            ),
            subtitle: Text('我是基本列表哦~~~~'),
          )
        ],
      ),
    );
  }
}

这就是基本列表的实现，如果你觉得不美观，可以在ListTile中间加一个Divider分割线，我就不过多的赘述了。
水平列表我就不说了，基本是一样的操作方式，只是加了一个参数scrollDirection: Axis.horizontal,让他横向而已。

动态列表 动态循环数据

在这里我们只遍历有数的数据，我们在程序中建立一个文件夹，里面存放我们的数据，我们数据的基本形式是这样的

flutter listview item 单个动画 flutter的listview_数据_02

这是我们的数据存放的方式。这里遍历有好几个方式就看你怎么去实现了，你也可以直接在LIstView的builder方法实现，也可以在他的子组件中child参数中返回列表。为了简便，我们就使用了Flutter自带的builder方法了。

我们要遍历这些数据我们要自定义一个方法，而这个方法就是遍历这个数据。而且由于我们知道ListView的列表元素是Widget，所以我们在定义方法的时候返回值要是Widget。

//自定义方法  函数前面加一个"_"表示的是私有  （Flutter的特性）
  Widget _getListData(context,index){  //context参数是内容，index是我们的数据索引（列表）
        return ListTile(           
            title: Text(listData[index]["title"]),
            leading:Image.network(listData[index]["imageUrl"]),          
            subtitle:Text(listData[index]["author"])
        );
  }

这样我们的方法已经写出来了，接着我们就要去实现这个动态列表。
代码如下：

return ListView.builder(
        itemCount:listData.length,  //数据的长度，就是我们动态列表列表项的个数
        itemBuilder:this._getListData  //##必须实现的方法##
    );
  }

对就是这么简单的几行代码我们就实现了动态列表，等会我们可以看演示。

flutter listview item 单个动画 flutter的listview_Flutter常用组件_03

这就是基本的ListView的使用！！！！