Flutter(五) ListView组件的使用

一. 基础列表(固定数据)。

1. ListView是iOS上的tableView，ListTile是cell(每一个的item)。如果是普通的列表一般ListTile都能实现，功能相对来说挺全的。其中包括主 副标题 左边右边图标 边距等。

• 全部属性：
  • leading, cell 左边的图标
  • title, cell 主标题
  • subtitle, cell 副标题
  • trailing, cell 右边图标
  • isThreeLine = false, cell 是否三行显示
  • dense, cell 直观感受是整体大小
  • contentPadding, cell 内容内边距
  • enabled = true, cell 是否可以响应
  • onTap, cell onTap cell点击事件
  • onLongPress, cell onLongPress 长按事件
  • selected = false, cell 是否选中状态

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),//外边距
      children: <Widget>[//只要是Widget都可以写
        ListTile(
          title: Text('这是标题'),
          subtitle: Text('这是副标题'),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms ,color: Colors.yellow,size: 40),
          title: Text(
            '这是标题',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0
              ),
            ),
          subtitle: Text('这是副标题'),
          trailing: Icon(Icons.accessibility),
        ),
        //........省略       
      ],
    );
  }

}

效果图

2. ListView默认是垂直列表，通过scrollDirection属性可以设置为水平列表

垂直列表设置宽度是无效的，会自动占满父视图的宽度。水平列表设置高度无效，会自动占满父视图的高度。如果要设定固定宽高需要设置父视图的frame。

scrollDirection: Axis.vertical//水平列表
scrollDirection: Axis.horizontal//垂直列表

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      scrollDirection: Axis.horizontal,
      //scrollDirection: Axis.vertical,
      children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.black,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.orange,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            )
      ],
    );
  }

}

效果图

二. 动态列表。

通过循环语句创建包含ListTile组件的数组，给ListView的children属性。

class HomeContent extends StatelessWidget{
   //自定义方法 私有方法 当前类可以使用 返回的是Widget组件
   List<Widget>  _listViewData(){
    List<Widget> list = List();
    for (var i = 0; i <  20; i++) {
      list.add(
        ListTile(
        title: Text('我是第$i个cell'),
      ));
    }
  return list;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      // padding: EdgeInsets.all(10),
      // scrollDirection: Axis.vertical,
      children: this._listViewData(),
    );
  }

}

效果图

三. ListView绑定列表方式。

1. 默认绑定列表方式

创建包含ListTile的数组，直接for循环创建包含ListTile的数组。或者通过ListTile的divideTiles方法创建数组，其中第一个参数是上下文，第二个参数是包含组件的数组，通过divideTiles创建的数组中ListTile里面有分割线。

var divideListData = ListTile.divideTiles(context: context ,tiles:  this.list).toList();

 //自定义方法 私有方法 当前类可以使用 返回的是Widget组件
   List<Widget> list = List();
  //  HomeContent(){
  //    for (var i = 0; i < 20; i++) {
  //      list.add(
  //        ListTile(
  //          title: Text('我是第$i个cell'),
  //        )
  //      );
  //    }

  //  }
   List<Widget>  _listViewData(BuildContext context){
    for (var i = 0; i <  20; i++) {
      list.add(
        ListTile(
        title: Text('我是第$i个cell'),
        onTap: (){
          showDialog(
            context:context ,
            builder: (BuildContext context){
              return AlertDialog(
                title: Text(
                  '我是标题',
                  style: TextStyle(fontSize: 20),
                ),
                content: Text('我是内容 - 选择的是：$i cell'),
              );
            }
          );
        },
      ));
    }
    return list;
  }

绑定列表：

@override
  Widget build(BuildContext context) {
    var divideListData = ListTile.divideTiles(context: context ,tiles:  this.list).toList();
    // TODO: implement build
    return ListView(
      // padding: EdgeInsets.all(10),
      // scrollDirection: Axis.vertical,
      children: this._listViewData(context),
    );
  }

2. 通过ListView.builder绑定

ListView.builder有两个必须要传的参数itemCount和itemBuilder。前者传的是cell的个数，后者传的是ListTile组件。需要把数组中的每个组件拿出来传给itemBuilder属性。

@override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: this.list.length,
      itemBuilder:(context,index){
        return this.list[index];
      }
    );
  }

3. 通过ListView.separated绑定

ListView.separated绑定和builder差不多，separated方法可以直接通过separatorBuilder属性设置分割线。

return ListView.separated(
      itemCount: this.list.length,
      itemBuilder:(content , index){
          return this.list[index];
      },
      separatorBuilder: (BuildContext context, int index) => new Divider(),  // 分割线
    );