ListView初体验

垂直列表

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"]),
        );
      },
    );

以上。

原文发布于微信公众号 - iOS小生活(iOSHappyLife)

原文发表时间:2019-08-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券