Flutter 07 - 列表组件之 ListView 组件详解

一、基本概述

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

1. 垂直列表
2. 垂直图文列表
3. 水平列表
4. 动态列表
5. 矩阵式列表

二、列表参数

名称	类型	说明
scrollDirection	Axis	Axis.horizontal 水平列表 Axis.vertical 垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List	列表元素

三、基本列表

// 垂直列表 组件（默认）
class VerticalListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView(
        children: [
          ListTile(
            leading: Icon(Icons.phone), // Icon 图标组件
            title: Text("this is title0", style: TextStyle(fontSize: 28.0)),
            subtitle: Text("this is lsubtitle0")
          ),
          ListTile(
            title: Text("this is title1"),
            subtitle: Text("this is subtitle1"),
            trailing: Icon(Icons.phone)
          ),
          ListTile(
            title: Text("this is title2"),
            subtitle: Text("this is subtitle2")            
          ),
          ListTile(
            title: Text("this is title3"),
            subtitle: Text("this is subtitle3")
          ),
          ListTile(
            title: Text("this is title4"),
            subtitle: Text("this is subtitle4")
          )
        ]
      )
    );
  }
}

BaseListView.png

四、水平列表

// 水平列表 组件
class HorizontalListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200.0,
      margin: EdgeInsets.all(5),
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          Container(
            width: 180.0,
            color: Colors.lightBlue
          ),
          Container(
            width: 180.0,
            color: Colors.amber,
            child: ListView(
              children: [
                Image.asset("imgs/02.jpeg"),
                Text('这是一个文本信息',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 16.0)
                )
              ]
            )
          ),
          Container(
            width: 180.0,
            color: Colors.deepOrange
          ),
          Container(
            width: 180.0,
            color: Colors.deepPurpleAccent
          )
        ]
      )
    );
  }
}

HorizontalListView.png

五、动态列表（动态循环数据）

// 动态列表 组件
class DynamicListViewWidget extends StatelessWidget {

  List list = new List();
  DynamicListViewWidget({Key key}): super(key: key) {
    for (var i = 0; i < 20; i++) {
      list.add("这是第${i}条数据");
    }
    print(list);
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: this.list.length,
      itemBuilder: (context, index) {
        print(context);
        return ListTile(
          leading: Icon(Icons.phone),
          title: Text("${list[index]}")
        );
      }
    );
  }
}

DynamicListView.png