Flutter ListView控件

news2024/9/27 12:17:34

        ListView是flutter中线性排列的可滚动的列表部件。ListView 是最常用的滚动小部件。它在滚动方向上一个接一个地显示其子项。在交叉轴上,子项需要填满 ListView。 

        如果非空,则 itemExtent 会强制子项在滚动方向上具有给定的范围。

        如果非空,则prototypeItem 会强制子项在滚动方向上具有与给定小部件相同的范围。 指定 itemExtent 或prototypeItem 比让子项确定自己的范围更有效,因为滚动机制可以利用对子项范围的预知来节省工作,例如当滚动位置发生剧烈变化时。 您不能同时指定 itemExtent 和prototypeItem,只能指定其中一个或不指定其中任何一个。

        构建 ListView 有四种选项

        1.默认构造函数采用显式 List<Widget> 子项

        此构造函数适用于子项数量较少的列表视图,因为构造 List 需要为列表视图中可能显示的每个子项(而不仅仅是实际可见的子项)执行工作。默认 List 方式,是把数据添加到列表中,然后直接添加到 ListView。   Tips: 如果需要设置分割线,使用ListTile.divideTiles。

 child: ListView(
          padding: const EdgeInsets.all(8),
          children: <Widget>[
            Container(
              height: 50,
              color: Colors.amber[600],
              child: const Center(child: Text("Entry A")),
            ),
            Container(
              height: 50,
              color: Colors.amber[500],
              child: const Center(child: Text("Entry B")),
            ),
            Container(
              height: 50,
              color: Colors.amber[100],
              child: const Center(child: Text("Entry C")),
            )
          ],
        )

        2.ListView.builder 构造函数采用 IndexedWidgetBuilder,它根据需要构建子项

        此构造函数适用于子项数量较多(或无限)的列表视图,因为仅对实际可见的子项调用构建器。

 child: ListView.builder(
          controller: _scrollController,
          itemBuilder: (context, index) {
            return Card(
              child: Container(
                height: 60,
                alignment: Alignment.centerLeft,
                child: Text("Item $index"),
              ),
            );
          },
          itemCount: 200,
        ),

 如果要添加分割线可以通过一个Column包裹Container和一个Divider。

    child: ListView.builder(
          controller: _scrollController,
          itemBuilder: (context, index) {
            return Card(
              child:Column(
                children: [
                Container(
                    height: 60,
                    alignment: Alignment.centerLeft,
                    child: Text("Item $index"),
                  ),
                  new Divider()
                ],
              ),
            );
          },

        3.ListView.separated 构造函数采用两个 IndexedWidgetBuilder:itemBuilder 根据需要构建子项,separatorBuilder 类似地构建出现在子项之间的分隔符子项

此构造函数适用于子项数量固定的列表视图。通过 separatorBuilder 直接添加分割线。

  final List<String> entries = <String>['C', 'Y', 'Z', 'Y'];
  final List<int> colorCodes = <int>[600, 500, 300, 100];

 
 child: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 50,
                color: Colors.amber[colorCodes[index]],
                child: Center(child: Text('Entry ${entries[index]}')),
              );
            },
            separatorBuilder: (context, index) {
              return const Divider();
            },
            itemCount: entries.length),

4.ListView.custom 构造函数采用 SliverChildDelegate,它提供了自定义子模型其他方面的功能。

例如,SliverChildDelegate 可以控制用于估计实际不可见的子项大小的算法。

List<String> entries = <String>['C', 'Y', 'Z', 'Y'];

class KeepAliveItem extends StatelessWidget {
  const KeepAliveItem({
    required Key super.key,
    required this.data,
  });

  final String data;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text(data),
    );
  }
}

    child: ListView.custom(
            childrenDelegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return KeepAliveItem(
              data: entries[index],
              key: ValueKey<String>(entries[index]),
            );
          },
          childCount: entries.length,
        ))

 

要控制滚动视图的初始滚动偏移,请提供一个已设置其 ScrollController.initialScrollOffset 属性的控制器(ScrollController)。

ScrollController:可用于控制此滚动视图滚动到的位置的对象。

ScrollController.initialScrollOffset:控制初始滚动位置。

ScrollController.keepScrollOffset:用于控制滚动视图是否应自动保存和恢复其在 PageStorage 中的滚动位置。

ScrollController.offset:用于读取当前滚动位置或更改它。

        

        

        

        

        

        

        

        

        

参考:https://api.flutter.dev/flutter/widgets/ListView-class.html?_gl=1*1kk33gn*_ga*NjkxNDYxMjU2LjE3MTMyMzA4MTE.*_ga_04YGWK0175*MTcyNDMzMDgzMi4xNi4xLjE3MjQzMzA5MTcuMC4wLjA.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2067251.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

@Transactional 注解 this调用注解不生效

如果在一个方法上标注Transactional,要确定这个方法的调用方是容器中的代理对象还是普通的java对象. 如果是代理对象事务会开启生效 如果是普通的java对象事务会失效 如果是这样调用,那 grantDayBonus 方法肯定是容器中的代理对象调起的.事务会生效

【机器学习练习】糖尿病预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、数据预处理 1. 数据导入 import numpy as np import pandas as pd import seaborn as sns from sklearn.model_selec…

第二十九节、场景管理和切换

使用这个加载场景&#xff0c;实现场景的切换 是一个打包工具&#xff0c;使包体变小&#xff0c;不会重复打包包体 这个也可以远程进行打包&#xff0c;将代码上传到网上的库中&#xff0c;实现热更新 勾选后就会默认将当前场景加载到这里 简化名字 当物体需要跨场景&#xf…

观测云对接 Pinpoint 最佳实践

简介 Pinpoint 是一个开源的分布式应用性能监控工具&#xff0c;由韩国搜索引擎公司 Naver 开发。它主要用于跟踪和监控分布式应用程序和微服务架构中的性能问题。Pinpoint 的核心功能包括对分布式链路的追踪和监控&#xff0c;通过收集和分析数据来帮助开发者定位问题所在。P…

node版本管理工具Node Version Manager(nvm)的安装及使用

文章目录 一、nvm安装1.1,下载nvm安装包程序&#xff08;选最高版本安装即可&#xff0c;安装前先把本机电脑node卸载&#xff0c;不然管理不到&#xff09;双击安装包进行安装&#xff08;傻瓜式下一步即可&#xff09; 二、配置镜像2.1、使用管理员运行命令提示符2.2、检查nv…

健康减调攻略:1月轻松掉十斤

减调减调&#xff0c;有减才有调&#xff0c;饮食为调、运动重在减&#xff0c;他们是相互作用的&#xff0c;要瘦&#xff0c;只有饮食与运动结合才能事半功倍。 饮食调减&#xff1a; 不需要花多大钱&#xff0c;也不用费精力和时间自己做饭&#xff0c;或狂抠饮食量和食物…

6款ai伪原创软件app,自动生成文章效率更高

在当今信息爆炸的时代&#xff0c;内容创作的需求日益增长。无论是专业的写手、自媒体从业者&#xff0c;还是企业的营销人员&#xff0c;都在不断寻求提高创作效率的方法。而ai伪原创软件app的出现&#xff0c;为创作者们带来了新的解决方案。下面就为大家介绍6个强大的ai伪原…

6款大学生电脑里的必装软件,装进电脑慢慢用

分享6款大学生爱用的windows软件&#xff0c;个个功能强大&#xff0c;装进电脑能提升效率&#xff0c;让大学生活更轻松&#xff01; 1、Everything 大学四年怎么都得积攒下一堆PPT和文档&#xff0c;日子久了存放的乱七八糟&#xff0c;想找的时候一个头两个大。这时候Every…

中断和异常(X86架构)

中断和异常是强制性的执行流的转移&#xff0c;从当前正在执行的任务或程序转移到一个特殊的称作句柄的例程或任务。当硬件发出信号时&#xff0c;便产生中断&#xff0c;中断的产生是同现在正在执行的任务是异步的&#xff0c;即中断的产生是随机的。异常是处理器在执行指令的…

2024年金属非金属矿山(露天矿山)安全管理人员证考试题库及金属非金属矿山(露天矿山)安全管理人员试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年金属非金属矿山&#xff08;露天矿山&#xff09;安全管理人员证考试题库及金属非金属矿山&#xff08;露天矿山&#xff09;安全管理人员试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;…

后端给前端传递数据形式:广播 单播以及组播

目录 1.单播2.广播3.组播4.任播5.总结 网络数据在传输时需要使用特定的传输方式&#xff0c;其中最常见的包括单播、广播、组播和任播。本文将对这四种不同的网络传输方式进行详细介绍&#xff0c;并列举多个例子以说明不同场景下使用何种传输方式。 1.单播 单播是指一种向单个…

联想24春招算法方向部分试题解析

来自牛客题库&#xff0c;浅浅记录一下 CNN模型支持输入不定长序列&#xff1a;错。CNN模型通常用于处理具有固定尺寸输入的图像或类似结构的数据。虽然可以通过一些技术&#xff08;如滑动窗口或填充&#xff09;来处理不同尺寸的图像&#xff0c;但CNN本身并不直接支持输入…

解决arcmap发布影像切片,注册传输数据慢的问题

1、本地服务器进行切片步骤&#xff1a; 开发环境按照正常方案发布影像切片。 2、生产环境切片步骤 a、使用范文等同影像文件范围的矢量面数据&#xff0c;作为切片数据发布切片服务 重点&#xff1a;【服务名称必须一致】 b、获取开发环境切片的切片方案文件conf.xml 重点&am…

探索Python的配置管理大师:ConfigParser的奥秘

文章目录 探索Python的配置管理大师&#xff1a;ConfigParser的奥秘背景&#xff1a;为什么选择ConfigParser&#xff1f;库简介&#xff1a;ConfigParser是什么&#xff1f;安装指南&#xff1a;如何安装ConfigParser&#xff1f;基础用法&#xff1a;五个简单函数介绍1. 创建…

Milvus实践(5) ---- 从attu2.4x窥探Milvus数据结构变化及原理

目录 背景 启动 attu 首页 数据库 系统信息 剖析数据库存储 整体 集合描述 collection & shard segment & partition index 图解 设计动机 可视化对应部分 collection partition segment 查询数据段状态 持久数据段状态 query部分 向量搜索 scal…

PyCharm 运行项目时python 项目时报错:Please select a valid Python interpreter的处理办法

目录 问题现象 问题原因 问题解决办法 问题现象 问题如下图所示&#xff1a; 这种情况下&#xff0c;强行运行也依旧是会报错的。 问题原因 没有选择运行Python的程序。 问题解决办法 修改PyCharm设置&#xff1a; 文件---设置&#xff08;在热键不冲突的情况下&#…

一张期权要多少钱?期权杠杆能做到以小博大吗?

今天带你了解一张期权要多少钱&#xff1f;期权杠杆能做到以小博大吗&#xff1f;做期权交易需要的资金几百元几千元都可以的&#xff0c;除了开户验资的门槛比较高&#xff08;当然也可以选择三方平台开户&#xff09;&#xff0c;期权的权利金都是几元、几百元、几千元都有的…

电容器在高原使用时是否会降容

电容器在高原使用时可能会出现降容现象&#xff0c;主要是由于高原环境的特殊条件引起的。以下是影响电容器在高原地区性能的关键因素&#xff1a; 1、环境气压&#xff1a; 气压降低&#xff1a;在高海拔地区&#xff0c;气压较低&#xff0c;空气密度减少&#xff0c;这会影…

IPython的魔法命令 %timeit 来测试 代码执行时间

在科学计算和数据分析领域&#xff0c;NumPy库是Python中最受欢迎的工具之一。它提供了强大的数组处理能力&#xff0c;使得矩阵运算变得简单高效。本文将介绍如何在Python中使用NumPy进行矩阵乘法&#xff0c;并通过IPython的魔法命令%timeit来测试其执行时间。 # 运行结果&am…

怎么把JPG转成PDF?这3种转换方法一定不要错过

在平时的工作生活当中&#xff0c;把JPG图片转换成PDF文件是一种非常常见的工作需求&#xff0c;无论是为了保护图片文件还是为了方便打印传输&#xff0c;JPG转PDF都是一项非常实用的技术&#xff0c;但是经常有很多新入职场的小伙伴们不知道怎么把图片转成PDF&#xff0c;今天…