ListView初体验

拉维

发布于 2019-08-12 16:01:31

5910

发布于 2019-08-12 16:01:31

文章被收录于专栏：iOS小生活

垂直列表

ListView(
      children: <Widget>[
        //ListTile是ListView子元素的一个内嵌模式，其类似于OC中的内嵌固定模式的cell
        ListTile(
            title: Text("标题1"),
            subtitle: Text("详细信息1..."),
            leading: Icon(
              Icons.settings,
              color: Colors.yellow,
              size: 10,
            ),
            trailing: Icon(Icons.face)),
        ListTile(
            title: Text("标题2"),
            subtitle: Text("详细信息2..."),
            leading: Icon(Icons.ac_unit, color: Colors.red, size: 20),
            trailing: Image.network(
                "http://pic51.nipic.com/file/20141029/6470615_135409321000_2.jpg")),
        ListTile(
            title: Text("标题3"),
            subtitle: Text("详细信息3..."),
            leading: Icon(Icons.backspace, color: Colors.orange, size: 30)),
        Image.network(
            "http://pic14.nipic.com/20110603/7658638_151231191000_2.jpg"),
        Container(
          height: 10,
          color: Colors.red,
        ),
        Image.network(
            "http://pic62.nipic.com/file/20150318/8684504_093611837474_2.jpg"),
      ], //配置ListView列表子元素
      padding: EdgeInsets.all(10), //设置ListView的内边距
    );

ListView的children属性的值是一个Widget数组，该数组里面装载的就是ListView里面展示的各个子元素。

ListView的子元素可以是任何类型的Widget，可以是Text、可以是Image、也可以是Container，也可以是ListTile。

ListTile是Flutter内置的用于作为ListView子元素的widget，其类似于OC中的内置cell。

Container可用于设置ListView各个子元素之间的间隔。

效果如下：

水平列表

Container(
      height: 180,
      child: ListView(
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.red,
            child: ListView(
              children: <Widget>[
                Image.network("http://pic33.nipic.com/20131010/10391882_093034327358_2.jpg"),
                Text("公司简介")
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.blue,
          ),
          Container(
            width: 180,
            color: Colors.green,
          ),
          Container(
            width: 180,
            color: Colors.brown,
          ),
          Container(
            width: 180,
            color: Colors.yellow,
          ),
        ],
        padding: EdgeInsets.all(10),
        scrollDirection: Axis.horizontal,//通过该参数配置是水平还是垂直
      ),
    );

通过ListView的scrollDirection属性可以配置该ListView是水平还是垂直的。

ListView的元素里面还可以嵌套其他的元素：

Container(
            width: 180,
            color: Colors.red,
            child: ListView(
              children: <Widget>[
                Image.network("http://pic33.nipic.com/20131010/10391882_093034327358_2.jpg"),
                Text("公司简介")
              ],
            ),
          ),

效果图如下：

动态列表

所谓动态列表，其实就是根据数据来控制列表的内容展示。

首先，我们自己创建一个JSON数据数组，放在NormanDatas.dart文件中：

//NormanDatas.dart文件
List listData = [
  {
    "title":"title1",
    "detail":"detail1",
    "imgUrl":"http://pic38.nipic.com/20140217/7643674_131828170000_2.jpg"
  },
  {
    "title":"title2",
    "detail":"detail2",
    "imgUrl":"http://pic23.nipic.com/20120815/7976459_193605074324_2.jpg"
  },
  {
    "title":"title3",
    "detail":"detail3",
    "imgUrl":"http://pic17.nipic.com/20111101/3094309_171235018306_2.jpg"
  },
  {
    "title":"title4",
    "detail":"detail4",
    "imgUrl":"http://pic36.nipic.com/20131216/7205248_104247058321_2.jpg"
  },
  {
    "title":"title5",
    "detail":"detail5",
    "imgUrl":"http://pic27.nipic.com/20130129/11900941_205032216185_2.jpg"
  },
  {
    "title":"title6",
    "detail":"detail6",
    "imgUrl":"http://pic36.nipic.com/20131206/9885883_193903882000_2.jpg"
  },
  {
    "title":"title7",
    "detail":"detail7",
    "imgUrl":"http://pic18.nipic.com/20120114/7303631_154218056334_2.jpg"
  },
  {
    "title":"title8",
    "detail":"detail8",
    "imgUrl":"http://pic26.nipic.com/20130116/6647776_154516318110_2.jpg"
  },
  {
    "title":"title9",
    "detail":"detail9",
    "imgUrl":"http://pic32.nipic.com/20130822/11918471_133412467197_2.jpg"
  },
  {
    "title":"title10",
    "detail":"detail10",
    "imgUrl":"http://pic24.nipic.com/20120922/10614245_073225718000_2.jpg"
  }
];

使用代码如下：

import 'resource/NormanDatas.dart';


class HomeContent extends StatelessWidget {

  List<Widget> _getDatas() {
    List<Widget> datas = new List();
    for (var i = 0; i < listData.length; i++) {
      Map map = listData[i];
      datas.add(ListTile(
        title: Text(map["title"]),
        subtitle: Text(map["detail"]),
        leading: Image.network(map["imgUrl"]),
      ));
    }
    return datas;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this._getDatas(),
    );
  }
  
}

这里我定义了一个私有的方法 _getDatas 用来生成ListView的子元素们。

然后在私有方法 _getDatas 中循环遍历数据源listData，然后依次生成对应的ListTile。

实际上，上述代码中的_getDatas方法：

  List<Widget> _getDatas() {
    List<Widget> datas = new List();
    for (var i = 0; i < listData.length; i++) {
      Map map = listData[i];
      datas.add(ListTile(
        title: Text(map["title"]),
        subtitle: Text(map["detail"]),
        leading: Image.network(map["imgUrl"]),
      ));
    }
    return datas;
  }

可以利用List的map方法来进行简化，简化后的代码如下：

  List<Widget> _getDatas() {
    var datas = listData.map((value){
      return ListTile(
        title: Text(value["title"]),
        subtitle: Text(value["detail"]),
        leading: Image.network(value["imgUrl"]),
      );
    });
    return datas.toList();
  }

需要注意的一点是，List的map方法用于遍历处理List中的每一个元素。

实际上，针对固定格式的子元素，ListView给我们提供了ListView.builder 方法，用于遍历处理每一个子元素，代码如下：

    ListView.builder(
      itemBuilder: (context, index){
        Map value = listData[index];
        return ListTile(
          title: Text(value["title"]),
          subtitle: Text(value["detail"]),
          leading: Image.network(value["imgUrl"]),
        );
      },
    );

以上。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-08-01，如有侵权请联系 cloudcommunity@tencent.com 删除

listview