zoukankan      html  css  js  c++  java
  • Flutter 之 ListView

    在 Flutter 中,ListView 可以沿一个方向(垂直或水平方向)来排列其所有子 Widget,常被用于需要展示一组连续视图元素的场景

    ListView 构造方法

    • ListView:仅适用于列表中含有少量元素的场景
    • ListView.build:适用于子 Widget 比较多的场景
    • ListView.separated:适用于需要设置分割线的场景
    构造方法名特点使用场景
    ListView 一次性创建好所有子 Widget 适用于展示少量连续子 Widget 的场景
    ListView.build 提供了子 Widget 创建方法,仅在需要展示时才创建 适用于子 Widget 较多,且视觉效果呈现某种规律性的场景
    ListView.separated 提供了子 Widget 创建方法,仅在需要展示时才创建,且提供了自定义分割线的功能 适用于子 Widget 较多,且视觉效果呈现某种规律性、每个子 Widget 之间需要分割线的场景

    ListView

    可以通过设置 children 参数,将所有子 Widget 包含到 listView 中,但这种创建方法要求提前将所有子 Widget 一次性创建好,而不是等到真正需要在屏幕上显示时才创建,即这种方法是导致性能下降。因此,这种方式只适合列表中含有少量元素的场景

    class List extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Android小白营"),
          ),
          body: ListView(
            children: <Widget>[
              ListTile(
                leading: Icon(
                  Icons.home,
                  color: Colors.cyan, // 图标颜色
                ),
                title: Text("首页"),
                selected: true, // 设置状态为选中状态
              ),
              ListTile(
                leading: Icon(
                  Icons.add_shopping_cart,
                  color: Colors.black54,
                ),
                title: Text("购物车"),
              ),
              ListTile(
                leading: Icon(
                  Icons.account_circle,
                  color: Colors.black54,
                ),
                title: Text("我的"),
              )
            ],
          ),
        );
      }
    }

    资源搜索网站大全 http://www.szhdn.com 广州VI设计公司https://www.houdianzi.com

    ListView.builder

    • itemBuilder:列表项的创建方法。当列表滚动到相应位置时,ListView 会调用该方法创建对应的子 Widget
    • itemCount:列表项的数目。如果不设置或设置为空,则表示 ListView 为无限列表
    • itemExtent:列表项高度。可选参数,但对于定高的列表项元素,建议设置该参数的值(不设置时,ListView 会动态的根据子 Widget 创建完成后的结果,决定自身的视图高度,以及子 Widget 在 ListView 中的相对位置)
    class ListBuild extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: ListView.builder(
            itemBuilder: (context, index) => ListTile(
              leading: Icon(Icons.adb),
              title: Text("下标" + index.toString()),
            ),
            itemExtent: 46, // 列表项高度
            itemCount: 50, //列表项总数,不设置为无限加载
          ),
        );
      }
    }
    

    ListView.separatorBuilder

    设置列表项之间的分隔线,可以根据下标设置不同的分隔线

    class ListSeparated extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Android小白营"),
          ),
          body: ListView.separated(
            itemBuilder: (context, index) => GestureDetector(
              child: ListTile(
                leading: Icon(Icons.adb),
                title: Text("下标" + index.toString()),
              ),
              onTap: () => Fluttertoast.showToast(msg: index.toString()), // 列表项点击事件
            ),
            separatorBuilder: (BuildContext context, index) {
              divider divider;
              if (index % 2 == 0) {
                divider = Divider(
                  thickness: 1, // 分隔线宽度
                  height: 0,
                  color: Colors.black12, // 分隔线颜色
                );
              } else {
                divider = Divider(
                  thickness: 2,
                  height: 0,
                  color: Colors.deepOrangeAccent,
                );
              }
              return divider;
            },
            itemCount: 100,
          ),
        );
      }
    }
  • 相关阅读:
    python模块总结(一)命令行解析模块argparse
    TCP(一)三次握手和四次挥手
    容器网络(四)vxlan
    容器网络(三)容器间通信
    kvm虚拟化(二)网络虚拟化
    KVM虚拟化(一)创建虚拟机
    数字操作 —— 9_ 回文数
    数字操作 —— 8_字符串转换整数(atoi)
    数字操作 —— 7_整数反转
    字符串操作 —— 763_划分字母区间
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14019385.html
Copyright © 2011-2022 走看看