• ListView 基础列表组件、水平 列表组件、图标组件


    一、Flutter 列表组件概述
    列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义
    列表项,支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下
    分类:
    1、垂直列表
    2、垂直图文列表
    3、水平列表
    4、动态列表
    5、矩阵式列表
    二、Flutter 列表参数

    /设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直
    scrollDirection: Axis.vertical,
    //内间距
    padding: EdgeInsets.all(10.0),
    //是否倒序显示 默认正序 false 倒序true
    reverse: false,
    //false,如果内容不足,则用户无法滚动 而如果[primary]为true,它们总是可以尝试滚动。
    primary: true,
    //确定每一个item的高度 会让item加载更加高效
    itemExtent: 50.0,
    //内容适配 是否包裹内容
    shrinkWrap: true,
    //item 数量
    itemCount: list.length,
    //滑动类型设置
    physics: new ClampingScrollPhysics(),
    //cacheExtent 设置预加载的区域
    cacheExtent: 30.0,
    //滑动监听
    // controller ,

    shrinkWrap特别推荐
    child 高度会适配 item填充的内容的高度,我们非常的不希望child的高度固定,因为这样的话,如果里面的内容超出就会造成布局的溢出。
    shrinkWrap多用于嵌套listView中 内容大小不确定 比如 垂直布局中 先后放入文字 listView (需要Expend包裹否则无法显示无穷大高度 但是需要确定listview高度 shrinkWrap使用内容适配不会有这样的影响)

    primary
    If the [primary] argument is true, the [controller] must be null.
    在构造中默认是false 它的意思就是为主的意思,primary为true时,我们的controller 滑动监听就不能使用了

    physics
    这个属性几个滑动的选择
    AlwaysScrollableScrollPhysics() 总是可以滑动
    NeverScrollableScrollPhysics禁止滚动
    BouncingScrollPhysics 内容超过一屏 上拉有回弹效果
    ClampingScrollPhysics 包裹内容 不会有回弹

    cacheExtent
    这个属性的意思就是预加载的区域
    设置预加载的区域 cacheExtent 强制设置为了 0.0,从而关闭了“预加载”

    controller
    滑动监听,我们多用于上拉加载更多,通过监听滑动的距离来执行操作。


    三、Flutter 基本列表

    四、Flutter 水平列表

    ListView(

    scrollDirection: Axis.horizontal
    )
     
    动态列表一
    return ListView.builder(
    itemCount: listData.length, // 列表的长度
    itemBuilder: (context, index) {

    return ListTile(
          title: Text(listData[index]['title']),
    subtitle: Text(listData[index]['author']),
    leading: Image.network(listData[index]['imageUrl']),
    );
    },
    );

    动态列表二
    getList() {
    var tempList = listData.map((val) {
    return ListTile(
    title: Text(val['title']),
    subtitle: Text(val['author']),
    leading: Image.network(val['imageUrl']),
    );
    });
    return tempList.toList();
    }
    Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
    children: this.getList()
    );
    }
  • 相关阅读:
    Java HashMap的原理、扩容机制、以及性能
    Istanbul BFT共识算法解读
    golang中slice的扩容机制
    Use the "Enclave Signing Tool" to sign enclave files
    以太坊椭圆曲线Specp256k1通过消息的hash和签名(对消息的hash的签名)来恢复出公钥和计算r值
    Intel SGX SDK toolkits
    Intel SGX Edger8r
    Intel SGX C++ library
    SGX Makefile学习笔记
    在ubuntu中安装gem5
  • 原文地址:https://www.cnblogs.com/zhaofeis/p/12331207.html
Copyright © 2020-2023  润新知