Flutter中的ListView组件

一、Flutter 列表组件概述 

列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义 列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下 分类：

    1、垂直列表 

    2、垂直图文列表

    3、水平列表

    4、动态列表 

    5、矩阵式列表

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView(
      //排列 方式
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 300,
            color: Colors.red,
          ),
          Container(
            width: 300,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

动态列表

class MyBody extends StatelessWidget {
  static List<Widget> getData() {
    List<Widget> list = [];
    for (var i = 0; i <= 20; i++) {
      list.add(ListTile(
        title: Text('列表第$i项'),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(children: getData()),
    );
  }
}

请求数据

class MyBody extends StatelessWidget {
  static List<Widget> getData() {
    var temList = listData.map((value) {
      return ListTile(
        leading: Image.network(value['imageUrl']),
        title: Text(value['title']),
        subtitle: Text(value['author']),
      );
    });
    return temList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(children: getData()),
    );
  }
}

使用build循环数据

class MyBody extends StatelessWidget {
  static List<String> getData() {
    List<String> list = [];
    for (var i = 0; i <= 11; i++) {
      list.add("列表第$i项");
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    var list = getData();
    return Container(
      child: ListView.builder(
        itemCount: list.length,
        itemBuilder: (ctx, index) {
          return ListTile(
            title: Text(list[index]),
          );
        },
      ),
    );
  }
}