专栏首页iOS小生活ListView初体验

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),作者:拉维

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter中的轮播图组件

    今天我们来介绍一款Flutter的第三方组件库——flutter_swiper。

    拉维
  • Flutter 中的网络请求

    dio 比 http 更强大,它支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等。

    拉维
  • Flutter中的html内容加载

    上一篇文章Flutter 中的下拉刷新和上拉加载中,我介绍了如何在Flutter中实现下拉刷新和上拉加载的效果,今天我们继续以上文中的代码为例,来介绍如何加载H...

    拉维
  • 【Rust每周一库】 http - Rust下简单的webserver库

    本期的每周一库给大家带来的是一个rust下的webserver库,名字很直观就叫http。

    MikeLoveRust
  • Maven安装与配置

     1、Maven下载 http://maven.apache.org/download.cgi 直接解压到一个目录 即可

    week
  • 前端-不要再问跨域的问题了

    跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上,无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试,我每次都随便背几个方案,也不知道为什么要...

    grain先森
  • 平面设计常用的图像文件格式

    用户7657330
  • 浙大版《C语言程序设计(第3版)》题目集 习题6-8 统计一行文本的单词个数

    本题目要求编写程序统计一行字符中单词的个数。所谓“单词”是指连续不含空格的字符串,各单词之间用空格分隔,空格数可以是多个。

    C you again 的博客
  • 跨模块调用

    在ThinkPHP中,使用 $this 可以调用当前模块内的方法,但是很多情况下经常会在当前模块中调用其他模块的方法。

    公众号php_pachong

扫码关注云+社区

领取腾讯云代金券