当前位置: 首页 > news >正文

Flutter 中,ListView 中需要放置 ListView 需要怎么处理才高效?

问题及场景

ListView 是 Flutter 开发者第一个学习到的 Widget,因为它可以滑动。一切都会运行得很好,直到 ListView 中的 Item 本身也是一个 ListView。你可能会看到 Flutter 建议你将内部的 ListView 的ShrinkWrap 属性设置为 True。虽然错误消除了,但是威胁还在。因为 ShrinkWrap 属性会将 ListView 一次性全部填充,算出所有高度,如果内部 ListView 的数据量比较大,那将产生性能问题,会有很大的风险掉帧、jank 和 stutters。

假设你遇到下面这样的场景

final outerListChildren = <ListView>[ListView(children: <Wdiget>[...]),...
];return ListView.Builder(itemCount: outerListChildren.length,itemBuilder: (context, index) {return outerListChildren[index]}
)

然后我们按照 Flutter 的提示,将内部的 ListView 加上 shrinkWrap 和 physics 属性如下

final outerListChildren = <ListView>[ListView(shrinkWrap: true,physics: const NeverScrollableScrollPhysics(),children: <Wdiget>[...]),...
];return ListView.Builder(itemCount: outerListChildren.length,itemBuilder: (context, index) {return outerListChildren[index]}
)

解决方法:

1、首先,将最外层的 ListView 改为 CustomScrollView

return CustomScrollView(children: outerListChildren}
)

2、然后我们将外部的 ListView 列表改为 SliverList 列表

final outerListChildren = <SliverList>[];
return CustomScrollView(children: outerListChildren}
)

3、所有 SliverList 添加 delegate,并使用 SliverChildBuilderDelegate 作为 value,_myWidgets 是之前的 inner ListView 需要显示的内容

final outerListChildren = <SliverList>[SliverList(delegate: SliverChildBuilderDelegate(childCount: _myWidgets.length,(context, index) => _myWidgets[index]))
];
return CustomScrollView(children: outerListChildren}
)

至此,大功告成

http://www.lryc.cn/news/125971.html

相关文章:

  • Appium Desktop安装
  • Open3D 最小二乘拟合平面(SVD分解法)
  • Pytorch源码搜索与分析
  • 运维监控学习笔记9
  • gulimall-缓存-缓存使用
  • 概述、搭建Redis服务器、部署LNP+Redis、创建Redis集群、连接集群、集群工作原理
  • redis数据类型与底层数据结构对应关系
  • SpringBoot请求响应
  • 功能上新|全新GPU性能优化方案
  • 试岗第一天问题
  • 2023-08-15力扣每日一题
  • Java单例模式详解(五种实现方式)
  • 【javaweb】学习日记Day1 - HTML CSS入门
  • 贴吧照片和酷狗音乐简单爬取
  • Databend 开源周报第 106 期
  • Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
  • IL汇编ldc指令学习
  • 【Redis基础篇】浅谈分布式系统(一)
  • CSS中的calc()函数有什么作用?
  • 由浅入深学习Tapable
  • YOLOv5白皮书-第Y6周:模型改进
  • word之插入尾注+快速回到刚才编辑的地方
  • Qt扫盲-QTableView理论总结
  • 从外部访问K8s中Pod的五种方式
  • 什么是A股交易接口_(股票交易c接口)开发原理
  • STM32F4X NVIC中断概念
  • 关于consul的下载方法
  • 应用在汽车前照灯系统中的环境光传感芯片
  • Python Flask+Echarts+sklearn+MySQL(评论情感分析、用户推荐、BI报表)项目分享
  • 开源项目-高校自动排课系统