第二百五十五回

文章目录

  • 概念介绍
  • 实现方法
  • 示例代码

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

概念介绍

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

实现方法

我们首先使用使用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;

示例代码

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.mzph.cn/news/609110.shtml

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

相关文章

return、break、continue用法和区别(C/C++)

return、break、continue用法和区别 1、Return(跳出函数):跳出当前正在执行函数,即会终止函数的运行,直接返回return的值。可以返回变量、结构体、指针等。不能返回数组和指向(函数内)局部变量…

Spring学习 基于注解的IOC配置

3.基于注解的IOC配置 学习基于注解的IOC配置&#xff0c;大家脑海里首先得有一个认知&#xff0c;即注解配置和xml配置要实现的功能都是一样的&#xff0c;都是要降低程序间的耦合。只是配置的形式不一样。 3.1.创建工程 3.1.1.pom.xml <?xml version"1.0" en…

记录汇川:H5U与Fctory IO测试5

主程序&#xff1a; 子程序&#xff1a; IO映射 子程序&#xff1a; 自动程序 Fctory IO配置&#xff1a; 触摸屏如下&#xff1a; 实际动作如下&#xff1a; Fctory IO测试5

市场复盘总结 20240109

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 昨日主题投资 连板进级率 66% 二进三&#xff1a; 进级率低 最常用的二种方法&#xff1a; 方法一&#x…

一台智能汽车会使用哪些芯片

目录 1.汽车芯片技术逻辑 2.汽车芯片产品详解和厂商一览 2.1 控制芯片 2.2 计算芯片 2.3 传感芯片 2.4 通信芯片 2.5 存储芯片 2.6 安全芯片 2.7 功率芯片 2.8 驱动芯片 2.9 电源管理芯片 2.10 系统基础芯片 3.小结 这两天算是和标准杠上了&#xff0c;哈哈。 昨…

红队打靶练习:RICKDICULOUSLYEASY: 1

目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb 目录探测 gobuster dirsearch WEB get flag1 /robots.txt FTP get flag2 telenet登录 get flag3 get flag4 9090端口 get flag5 dirsearch ssh登录 Summer用户 get flag6 信息收集 get flag7 get fl…

基于ssm的儿童影楼拍摄管理系统的设计与实现+vue论文

基于SSM的儿童影楼拍摄管理系统的设计与实现 摘 要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。以前相关行业对于商品信息的管理和控制&#xff0c;采用人工登记的方式保存相关数据&…

数据结构-函数题

6-2.求二叉树的高度 本题要求给定二叉树的高度。 函数接口定义&#xff1a; int GetHeight( BinTree BT ); typedef struct TNode *Position; typedef Position BinTree; struct TNode{ElementType Data;BinTree Left;BinTree Right; }; 要求函数返回给定二叉树BT的高度值…

.NET学习教程二——.net基础定义+VS常用设置

一&#xff1a;注释 C#编写代码注意事项&#xff1a; 1、写代码切忌括号错误! 2、代码中所有的标点都是英文半角的标点 3、c#代码中每行代码以分号结束. 作用&#xff1a; 1、注销 2、解释 C#的3种注释符 1、单行注释// 2、多行注释/* 注释内容*/ 3、文档注释 ///多用…

国产系统-银河麒麟桌面版安装wps

0安装版本 系统版本 版本名称:银河麒麟桌面版操作系统V10(SP1) 软件版本 wps个人版2019 1双击安装 1.1卸载自带wps 为什么要卸载没有序列号,授权过期,不是免费的,通过先安装/在升级个人版跳过输入序列号问题等等原因 1.1.1当前自带的wps版本 1.1.2卸载 不卸载无法安装在…

vue解析前端对象为Array数组并且遍历

例如这个res.data对象&#xff1a; {"id": "15","name": "火灾" }这样子解析吧&#xff1a; let types JSON.parse(JSON.stringify(res.data))console.log("types is " types)console.dir(types)for(var i 0; i < ty…

实时获取建材网商品数据:API实现详解与代码示例

一、引言 随着电子商务的快速发展&#xff0c;实时获取商品数据对于企业决策、市场分析以及数据驱动的营销策略至关重要。建材网作为国内知名的建材信息平台&#xff0c;提供了API接口&#xff0c;使得第三方开发者可以方便地获取商品数据。本文将详细介绍如何使用​​建材网的…

6.1 截图工具HyperSnap6简介

图片是组成多媒体作品的基本元素之一&#xff0c;利用图片可以增强多媒体作品的亲和力和说说服力。截取图片最简单的方法是直接按下键盘上的“PrintScreen”键截取整个屏幕或按下“AltPrintScreen”组合键截取当前活动窗口&#xff0c;然后在画笔或者其它的图片处理软件中进行剪…

解决word图片格式错乱、回车图片不跟着换行的问题

解决word图片格式错乱、回车图片不跟着换行的问题 1.解决方法。 先设置为嵌入型 但是设置的话会出现下面的问题。图片显示不全。 进一步设置对应的行间距&#xff0c;原先设置的是固定值&#xff0c;需要改为1.5倍行距的形式&#xff0c;也就是说不能设置成固定值就可以。

计算几何学(工程版)

昨天写了计算几何学的东西&#xff0c;今天主要是工程化一下&#xff0c;工程借鉴B站up主 【自动驾驶】自动驾驶planning方向中常用的计算几何学知识 01_哔哩哔哩_bilibili #pragma once#include <cmath> #include <iostream>class Point{ public:Point() defau…

爬取猫咪交易网

爬取猫咪品种&#xff0c;价格等在售数据 代码展现&#xff1a; 具体代码&#xff1a; import requests import re import os filename 声音// if not os.path.exists(filename): os.mkdir(filename) def down_load(page): for page in range(page): page …

简易机器学习笔记(五)更换损失函数:交叉熵

前言 我们之前用的是均方差作为我们神经网络的损失函数评估值&#xff0c;但是我们对于结果&#xff0c;比如给定你一张应该是0的照片&#xff0c;它识别成了6&#xff0c;这个时候这个均方差表达了什么特别的含义吗&#xff1f;显然你识别成6并不代表它比识别成1的情况误差更…

各类Java对象

概念的混淆: 新一代的开发者&#xff0c;学习某一概念的不同描述或是案例后&#xff0c;人脑会去抽象、提取其特征。这一过程可能造成语义扩散、概念扭曲。这是一个盲人摸象的过程。 写到这里时&#xff0c;我在想&#xff1a;“盲人摸象”与“抽象”的“象”是不是一个意思呢&…

灵魂三连问:是5G卡吗?支持5G吗?是5G套餐吗

关于5G的问题&#xff0c;小伙伴们的疑问是不是很多&#xff0c;它和4G到底有什么区别呢&#xff1f;什么是5G卡&#xff1f;什么是5G套餐&#xff1f;支持5G吗&#xff1f;什么是5G基站&#xff1f;我想大家现在一定是晕的&#xff0c;下面小编来给大家解惑&#xff01; 1&…

【elfboard linux 开发板】9. 虚拟机扩容和内核编译

1. 虚拟机扩容 需要将虚拟机的快照全都删除&#xff0c;并且将运行的系统关机点击扩展&#xff0c;改为需要的磁盘大小安装gparted工具 sudo apt-get install gparted 如果报错&#xff0c;则按照出错内容修改&#xff0c;一般是出现下载错误&#xff0c;可以使用下列命令&…