Flutter ListView控件

        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;@overrideWidget 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

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

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

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

  final ScrollController _scrollController = ScrollController(initialScrollOffset: 120);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()],),// child: Container(//   height: 60,//   alignment: Alignment.centerLeft,//   child: Text("Item $index"),// ),);},itemCount: 200,)

效果如下,打开时会有120的偏移:(Item0上移了)

ScrollController.keepScrollOffset:用于控制滚动视图是否应自动保存和恢复其在 PageStorage 中的滚动位置。每次滚动完成时,使用 PageStorage 保存当前滚动偏移量,如果重新创建此控制器的可滚动项,则恢复它。

ScrollController.offset:用于读取当前滚动位置或更改它。(可以动态获取偏移量)

  final ScrollController _scrollController = ScrollController();_scrollController.addListener(() {setState(() {offset = _scrollController.offset;isEnd = _scrollController.position.pixels ==_scrollController.position.maxScrollExtent;});});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()],),// child: Container(//   height: 60,//   alignment: Alignment.centerLeft,//   child: Text("Item $index"),// ),);},itemCount: 200,)

 如下图所示:position:114 表示上滑过程中计算出来的偏移量。

子元素的生命周期

Creation

在布局列表时,可见子元素、状态和渲染对象将基于现有小部件(例如使用默认构造函数时)或延迟提供的小部件(例如使用 ListView.builder 构造函数时)延迟创建。

Destruction

当子元素滚动出视图时,关联的元素子树、状态和渲染对象将被销毁。当滚动回时,列表中相同位置的新子元素将与新元素、状态和渲染对象一起延迟重新创建。

Destruction mitigation

        

        

        

        

        

        

        

        

        

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kafka的一个有趣问题(BUG)

这是我的第104篇原创文章 问题由来 在使用kafka时&#xff0c;创建topic&#xff0c;对某个topic进行扩分区的操作&#xff0c;想必大家肯定都使用过。尤其是集群进行扩容时&#xff0c;对流量较大的topic进行扩分区操作。一般而言&#xff0c;期望的效果是&#xff1a;新扩的分…

【Qt】常用控件QPushButton

常用控件QPushButton QWidget中涉及的各种属性/函数/使用方法&#xff0c;对Qt中的各种控件都是有效的。 QPushButton继承自QAbstractButton。这个类是抽象类&#xff0c;是其他按钮的父类。 QAbstractButton中和QPushButton相关性比较大的属性。 属性说明 text 按钮中的⽂本…

TCP/UDP的对比,粘包分包抓包,http协议

服务器端&#xff1a; 一、loop 127.0.0.1本地回环测试地址 二、tcp特点 面向连接、可靠传输、字节流 粘包问题&#xff1a;tcp流式套接字&#xff0c;数据与数据之间没有套接字&#xff0c;导致可能多次的数据粘到一起 解决方法&#xff1a;&#xff08;1&#xff09;规…

后端Java秋招面试中的自我介绍需要说什么?

本文主要面向校招/实习面试中求职后端开发岗位的同学&#xff0c;其他岗位/社招的同学也可以参考&#xff0c;道理都是相通的 1 背景 1.1为什么要认真准备自我介绍&#xff1f; 1. 必要性&#xff1a;在求职面试中&#xff0c;一般来说同学和面试官打过招呼之后第一项就是自…

html+css+js网页设计 电商 珠宝首饰电商3个页面

htmlcssjs网页设计 电商 珠宝首饰电商3个页面 网页作品代码简单&#xff0c;可使用任意HTML编辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1…

网络编程知识点总结

物理链路网络运输会话表示应用 物链网运会表应 实际的数据帧 TCP和UDP的异同&#xff08;笔试面试&#xff09; 主机&#xff1a;host 转换&#xff1a;to 网络&#xff1a;network uint32_t htonl(uint32_t hostlong); //将4字节无符号整数的主机字节序转换为网络字节序&a…

掌握语义内核(Semantic Kernel):如何使用Memories增强人工智能应用

随着人工智能领域的不断发展&#xff0c;语义内核&#xff08;Semantic Kernel&#xff09;的概念应运而生&#xff0c;为我们处理和理解庞大的数据集提供了新的视角。今天&#xff0c;我们将聚焦于语义内核中的一个核心概念——Memories&#xff0c;它是如何使我们的数据查询更…

QT中使用QAxObject类读取xlsx文件内容并显示在ui界面

一、源码 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEclass MainWindow : public QMainWindow {Q_OBJECTpublic:MainWindow(QWidget *parent nullptr);~MainWindow();pr…

鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式

运行机制 共享好端端的一词&#xff0c;近些年被玩坏了&#xff0c;共享单车,共享充电宝,共享办公室&#xff0c;共享雨伞… 甚至还有共享女朋友&#xff0c;真是人有多大胆&#xff0c;共享有多大产。但凡事太尽就容易恶心到人&#xff0c;自己也一度被 共享内存 恶心到了&am…

看图学sql之sql中的子查询

&#xfeff;&#xfeff; &#xfeff;where子句子查询 语法&#xff1a; SELECT column_name [, column_name ] FROM table1 [, table2 ] WHERE column_name OPERATOR(SELECT column_name [, column_name ]FROM table1 [, table2 ][WHERE]) 子查询需要放在括号( )内。O…

解决git checkout -b 拉取远端某分支到本地时报错

问题描述 日常开发场景中&#xff0c;经常会出现切分支的情况&#xff0c;所以git checkout 命令是非常高频的 git checkout -b feature/xxx默认情况下&#xff0c;这条命令是基于当前所在分支来开辟新分支feature/xxx 但是&#xff0c;还有一些情况&#xff0c;我们需要基于…

appium下载及安装

下载地址&#xff1a;https://github.com/appium/appium-desktop/releases 双击安装就可以

基于UE5和ROS2的激光雷达+深度RGBD相机小车的仿真指南(三)---创建自定义激光雷达Componet组件

前言 本系列教程旨在使用UE5配置一个具备激光雷达深度摄像机的仿真小车&#xff0c;并使用通过跨平台的方式进行ROS2和UE5仿真的通讯&#xff0c;达到小车自主导航的目的。本教程默认有ROS2导航及其gazebo仿真相关方面基础&#xff0c;Nav2相关的学习教程可以参考本人的其他博…

数学建模学习(115):主成分分析(PCA)与Python实践

文章目录 一.主成分分析简介1.1 数学背景与维度诅咒1.2 PCA的定义与应用二.协方差矩阵——特征值和特征向量三.如何为数据集选择主成分数量四.特征提取方法五.LDA——与PCA的区别六.PCA的应用七.PCA在异常检测中的应用八.总结一.主成分分析简介 1.1 数学背景与维度诅咒 主成成…

视频智能分析平台烟火检测视频安防监控烟火算法识别应用方案

烟火检测算法的应用方案主要围绕其核心技术——深度学习&#xff08;特别是卷积神经网络CNN&#xff09;和计算机视觉技术展开&#xff0c;旨在实现对监控视频中的烟雾和火焰进行实时、准确的检测与识别。以下是一个详细的烟火检测算法应用方案&#xff1a; 一、技术原理 烟火…

高并发集群饿了么后端的登录模块

高并发集群饿了么后端的登录模块 1.数据库 非交互式python&#xff1a; 非交互式: 2.数据库的负载均衡&#xff1a;阿里巴巴的mycat 修改配置文件 /usr/local/mycat/conf/server.xml :对外的账号 密码 数据库 /usr/local/mycat/conf/schema.xml 如果出现启动异常&…

【微信小程序】自定义组件 - 数据监听器

1. 什么是数据监听器 2. 数据监听器的基本用法 组件的 UI 结构如下&#xff1a; 组件的 .js 文件代码如下&#xff1a; 3. 监听对象属性的变化 数据监听器 - 案例 案例效果 2. 渲染 UI 结构 3. 定义 button 的事件处理函数 4. 监听对象中指定属性的变化 5. 监听对象中所…

readpaper在读论文时候的默认规定

红色代表主旨思想 蓝色代表专业名词解析

【MySQL】 黑马 MySQL进阶 笔记

文章目录 存储引擎MySQL的体系结构存储引擎概念存储引擎特点InnoDBMyISAMMemory 存储引擎选择 索引概述结构B Tree(多路平衡查找树)B TreeHash为什么InnoDB存储引擎选择使用Btree索引结构? 分类思考题 语法SQL性能分析&#xff08;索引相关&#xff09;SQL执行频率慢查询日志p…

XSS game复现(DOM型)

目录 1.Ma Spaghet! 2.Jefff 3.Ugandan Knuckles 4.Ricardo Milos 5.Ah Thats Hawt 6.Ligma 7.Mafia 8.Ok, Boomer 1.Ma Spaghet! 通过简单的尝试发现传递参数可以直接进入h2标签 接下来我们尝试传入一个alert(1) 可以看到并没有触发。原因是在innerHTML中官方禁用了sc…