第四百三十九回

文章目录

  • 1. 概念介绍
  • 2. 实现方法
  • 3. 示例代码

我们在上一章回中介绍了dart语言中的setter/getter相关的内容,本章回中将介绍局部动态列表.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

在正常情况下列表位于整个页面中,而且可以在整个页面中滚动,我们在这里说的局部动态列表是指在页面中的某一部分区域中显示一个列表,列表的滚动范围只限于这个
局部区域,我们把这样的列表叫作局部动态列表。在实际项目中这样的场景比较多,本章回中将详细介绍如何实现局部动态列表。

2. 实现方法

我们首先使用使用Column组件划分布局,然后把ListView当作该组件的子组件,这样就创建好了局部动态列表。这个步骤看着简单,不过还有一些细节需要说明,不然
这样的程序会有编译错误:Failed assertion: line 1966 pos 12: 'hasSize。其在原因是Column要求子组件有固定的大小,而子组件ListView没有固定的大小。解决方法有两个:

  • 在ListView外面嵌套一个容器组件,比如Container,并且指定容器的高度,相当于间接指定了ListView的高度。
  • 使用shrinkWrap属性,该属性默认值为false.将它设置为true.表示让ListView拥有一个可扩展的最大值。相当于指定了ListView的高度。
    上面的两种方法都可以,在使用第一种方法时还有一些特殊情况需要注意,为了显示ListView中更多的内容,把它外层嵌套的容器高度放大一些,这样做会有超过屏幕高
    度的风险,此时可以容器的外层再嵌套一个可滚动的组件,比如SingleChildScrollView,这样即使显示的内容超过屏幕了也可以滚动显示。
    在使用第二个方法时,主要是不好理解shrinkWrap属性的功能,大家可以查看源代码中的注释,这个注释写的比较清楚,详细如下:
  /// {@template flutter.widgets.scroll_view.shrinkWrap}/// Whether the extent of the scroll view in the [scrollDirection] should be/// determined by the contents being viewed.////// If the scroll view does not shrink wrap, then the scroll view will expand/// to the maximum allowed size in the [scrollDirection]. If the scroll view/// has unbounded constraints in the [scrollDirection], then [shrinkWrap] must/// be true.////// Shrink wrapping the content of the scroll view is significantly more/// expensive than expanding to the maximum allowed size because the content/// can expand and contract during scrolling, which means the size of the/// scroll view needs to be recomputed whenever the scroll position changes.////// Defaults to false.////// {@youtube 560 315 https://www.youtube.com/watch?v=LUqDNnv_dh0}/// {@endtemplate}final bool shrinkWrap;

3. 示例代码

Column(children: [const Image(width: double.infinity,height: 200,image: AssetImage("images/ex.png"),fit:BoxFit.fill, ),const Text('data sample'),Container(decoration:BoxDecoration(color: Colors.green,borderRadius: BorderRadius.circular(8)) ,height: 200,child: ListView.builder(///column中嵌套ListView会报hassize类型的的错误,即使指定list数量也不行///Failed assertion: line 1966 pos 12: 'hasSize///解决方法1:在ListView外层嵌套一个容器,指定容器大小来限定ListView的大小。///该方法相当于创建了个局部List,容器内的List可以自由滚动,也可以通过physics属性让它不滚动///解决方法2:使用shrinkWrap属性,itemCount: 10,// physics: const NeverScrollableScrollPhysics(),itemBuilder: (context,index){return const Card(child: Padding(padding: EdgeInsets.all(10),child: Text("List item"),),);},),),Container(color: Colors.lightBlue,child: ListView.builder(///用来控制List内部的边距,包含head和tail,如果去掉head和tail可以使用only方法padding: const EdgeInsets.all(10),shrinkWrap: true,physics: const NeverScrollableScrollPhysics(),itemCount: 20,itemBuilder:(context,index){return const Card(color: Colors.orange,child: Padding(///这个padding可以控制card的大小,也就是listItem的大小padding: EdgeInsets.all(8),child: Text('Another List Item'),),);},),),],
),

上面的示例代码中通过两个ListView演示了两种解决方法,大家可以去掉外层的容器,或者修改shrikWrap属性值来看看程序出错时的样子,然后按照我们介绍的方法
来解决错误,这样做的效果比较好,建议大家自己动手去实践。
看官们,关于"局部动态列表"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

相关文章

波士顿房价预测案例(python scikit-learn)---多元线性回归(多角度实验分析)

波士顿房价预测案例(python scikit-learn)—多元线性回归(多角度实验分析) 这次实验,我们主要从以下几个方面介绍: 一、相关框架介绍 二、数据集介绍 三、实验结果-优化算法对比实验,数据标准化对比实验&#xff0…

Rredis缓存常见面试题

文章目录 1.什么是缓存穿透,怎么解决2.什么是缓存击穿,怎么解决3.什么是缓存雪崩,怎么解决4.双写一致性问题5.redisson添加的排他锁是如何保证读写、读读互斥的6.为什么不使用延迟双删7.redis做为缓存,数据的持久化是怎么做的8.re…

MySQL的基本操作(超详细)

👨‍💻作者简介:👨🏻‍🎓告别,今天 📔高质量专栏 :☕java趣味之旅 📔(零基础)专栏:MSQL数据库 欢迎🙏点赞&…

ngAlain下使用nz-select与文件上传框出现灵异bug

bug描述 初始化页面,文件上传框无法出现: 但点击一次选择框以后,就会出现: 真的很神奇。。。 下面逐步排查看看是什么原因。 设想一: 选择框与文件框不可同时存在,删掉选择框看看: 还…

创业者的三大法宝:自我进化、自我激励与诚信坚守

一、摘要: 在创业的道路上,每一位创业者都如同航海家,驾驶着自己的船只,在波涛汹涌的大海中探寻成功的彼岸。而在这条充满未知与挑战的旅程中,创业者们需要具备哪些关键的品质和能力呢?京东集团创始人刘强…

搭建电商网站外贸网站用API接口可以实现哪些功能(天猫API接口|京东API接口)

在电商领域,API接口可以实现多种功能,起到连接内外部系统及优化电商业务流程等多种作用,从而来提高电商企业的运营效率。 具体来看,API接口接入可以用来: 商品管理: API接口能够用来获取商品详情等&#…

华为OD面试手撕算法-合并排序数组

题目描述 本题是leetcode一道简单题:合并两个有序数组,但是对于时间和空间复杂度面试官明确给出了限制。 // 给定两个排序后的数组 A 和 B,其中 A 的末端有足够的缓冲空间容纳 B。 编写一个方法,将 B 合并入 A 并排序。 // 初始化…

马化腾的电商梦,只能靠它来实现了~

我是王路飞。 腾讯要开始加大对电商的投入力度了, 而这些资源所依托的载体,正是【视频号】。 在2023微信公开课PRO上,视频号团队介绍,2022年总用户使用时长已经超过了朋友圈总用户使用时长的80%。视频号直播的看播时长增长156%…

Windows12安装Docker

环境及工具(文末提供) Docker Desktop Installer.exe (官网) 一、查看windows相关配置 查看是否开启相应的功能,如果没有需要开启,然后重启电脑 打开任务管理器(CTRLSHIFTESC)-&g…

高级IO/多路转接-select/poll(1)

概念背景 IO的本质就是输入输出 刚开始学网络的时候,我们简单的写过一些网络服务,其中用到了read,write这样的接口,当时我们用的就是基础IO,高级IO主要就是效率问题。 我们在应用层调用read&&write的时候&…

Webpack部署本地服务器

Webpack部署本地服务器 目录 Webpack部署本地服务器目的认识模块热替换(HMR)什么是 HMRHMR 通过如下几种方式, 来提高开发的速度如何使用 HMRhost 配置 目的 完成自动编译 常用方式: webpack-dev-server webpack-dev-server 是一个用于开发环境的 Web 服…

PCIE学习总结

一、PCIE与SATA区别 1 SATA是半双工,类似于打电话,同一时间只能一端发送或者接收数据;PCIE是全双工,双端可以同时发送或者接收数据; 2 PCIE是串行总线,速率计算,如果双边速率(单边…

vue3+echarts:echarts地图打点显示的样式

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式 series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: &quo…

Qt扫盲-QAssisant 集成其他qch帮助文档

QAssisant 集成其他qch帮助文档 一、概述二、Cmake qch例子1. 下载 Cmake.qch2. 添加qch1. 直接放置于Qt 帮助的目录下2. 在 QAssisant中添加 一、概述 QAssisant是一个很好的帮助文档,他提供了供我们在外部添加新的 qch帮助文档的功能接口,一般有两中添…

Vue3从入门到实战:路由的query和params参数

在Vue 3中,我们可以通过路由的查询参数来传递数据。这意味着我们可以在不同的页面之间传递一些信息,以便页面可以根据这些信息来显示不同的内容或执行不同的操作。 查询参数的使用方式类似于在URL中添加附加信息,以便页面之间可以根据这些信息…

计算机网络-TCP/IP 网络模型

TCP/IP网络模型各层的详细描述: 应用层:应用层为应用程序提供数据传输的服务,负责各种不同应用之间的协议。主要协议包括: HTTP:超文本传输协议,用于从web服务器传输超文本到本地浏览器的传送协议。FTP&…

【Redis基础篇】详细讲解Redis

这篇文章让你详细了解Redis的相关知识,有代码讲解以及图片剖析,让你更轻松掌握 制作不易,感觉不错,请点赞收藏哟 !!! 目录 1 redis基础 1.1 定义 1.2 SQL和NOSQL不同点 1.3 特征 1.4 Redis…

Firefox 关键词高亮插件的简单实现

目录 1、配置 manifest.json 文件 2、编写侧边栏结构 3、查找关键词并高亮的方法 3-1) 如果直接使用 innerHTML 进行替换 4、清除关键词高亮 5、页面脚本代码 6、参考 1、配置 manifest.json 文件 {"manifest_version": 2,"name": &quo…

【芯片验证】通关寄存器与ral_model —— 寄存器生成流程中加入backdoor后门配置

前言 【芯片验证】通关寄存器与ral_model —— backdoor后门访问实操测试-CSDN博客 上一篇文章中,我们通过在环境中配置后门路径的方式来实现了寄存器的后门访问,但是在实际应用中,无论寄存器RTL文件、例化还是寄存器模型大概率都是工具生成的,比如在本专栏中实现的gen_r…

Day57:WEB攻防-SSRF服务端请求Gopher伪协议无回显利用黑白盒挖掘业务功能点

目录 SSRF-原理&挖掘&利用&修复 SSRF无回显解决办法 SSRF漏洞挖掘 SSRF协议利用 http:// (常用) file:/// (常用) dict:// (常用) sftp:// ldap:// tftp:// gopher:// (…