Flutter笔记:滚动之-无限滚动与动态加载的实现

Flutter笔记
无限滚动与动态加载的实现

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/133342307


本文还有另外一个版本,基于GetX简单状态管理状态。地址为:https://jclee95.blog.csdn.net/article/details/133365040


1. 无限滚动列表

在 Flutter 中,实现一个无尽滚动列表通常涉及使用 ListView、ListView.builder 或 ListView.separated 组件,并结合数据源和滚动控制器。这使得您可以加载和显示大量数据,只有在需要时才会动态加载更多数据,以实现无尽滚动效果。

2. 模拟滚动列表的基本实现举例(ListView.builder)

2.1 实现思路与步骤介绍

以下是实现 Flutter 无尽滚动列表的一般步骤:

准备数据源

首先需要有一个数据源。比如一个列表或一个数据库查询结果,或者是网络请求的数据,以供列表渲染。通常,这些数据应该是 按需加载 的,而不是一次性加载所有数据。

创建滚动控制器

通过 ScrollController 创建一个滚动控制器,以便监听列表的滚动事件。这将帮助您确定何时加载更多数据。

构建列表视图

使用 ListView.builder 构建一个列表视图,该构造函数会创建一个只渲染可见项的列表。通过指定 itemBuilder 参数来定义如何渲染每个列表项。

设置滚动监听

将滚动控制器添加到列表视图,并使用 addListener 监听滚动事件。当用户滚动列表时,可以在适当的时候触发加载更多数据的操作。

加载更多数据

在需要加载更多数据时,您可以调用数据源的方法或请求数据。这可以是从网络获取数据、从本地数据库查询数据或其他方式。一旦数据准备好,将其添加到数据源中,然后通知列表视图重新构建。

更新列表视图

当有新数据可用时,调用 setState 方法以通知 Flutter 重新构建列表视图。这将导致列表视图加载和显示新数据。

2.2 一个简单例子

依据 2.1 小节的步骤,实现一个模拟无线滚动的例子如下:

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);Widget build(BuildContext context) {return const MaterialApp(home: InfiniteScrollList(),);}
}/// 一个带有无尽滚动列表的 StatefulWidget。
class InfiniteScrollList extends StatefulWidget {const InfiniteScrollList({Key? key}) : super(key: key);State<InfiniteScrollList> createState() => _InfiniteScrollListState();
}/// [InfiniteScrollList] 的状态类,包含滚动逻辑和数据管理。
class _InfiniteScrollListState extends State<InfiniteScrollList> {List<int> items = List.generate(20, (index) => index); // 初始数据final ScrollController _scrollController = ScrollController();bool isLoading = false;void initState() {super.initState();_scrollController.addListener(_loadMore);}/// 处理滚动事件以加载更多数据。void _loadMore() {if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent &&!isLoading) {// 模拟加载更多数据setState(() {isLoading = true;});// 模拟加载数据的延迟Future.delayed(const Duration(seconds: 2), () {setState(() {// 添加新数据到现有列表中items.addAll(List.generate(10, (index) => index + items.length));isLoading = false;});});}}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('无尽滚动列表'),),body: ListView.builder(controller: _scrollController,itemCount: items.length + (isLoading ? 1 : 0),itemBuilder: (context, index) {if (index < items.length) {return ListTile(title: Text('Item ${items[index]}'),);} else {// 显示加载指示器return const Padding(padding: EdgeInsets.all(16.0),child: Center(child: CircularProgressIndicator()),);}},),);}void dispose() {// 释放滚动控制器_scrollController.dispose();super.dispose();}
}

上面的代码中,InfiniteScrollList 是一个 StatefulWidget,它包含了一个可无限滚动的列表视图,可以自动加载更多数据。首先,初始状态下,列表包含20个整数项。当用户滚动到列表的底部时,它会模拟加载更多数据。当加载更多数据时,会显示一个加载指示器。效果如图所示:

在这里插入图片描述
现在我们归纳以下实现的思路。首先我们在 _InfiniteScrollListState 类中,使用 List.generate 创建一个包含初始数据的列表,这些数据将用于初始显示。接着创建一个 ScrollController 对象 _scrollController,它将监听列表的滚动事件。

  • initState 方法中,将滚动监听器添加到 _scrollController,以便在用户滚动到底部时触发加载更多数据的操作。
  • _loadMore 方法处理滚动事件,检查是否滚动到了列表底部,如果是并且没有在加载中,就模拟加载更多数据的过程。
  • build 方法中,使用 ListView.builder 构建列表视图。如果用户滚动到列表底部,会显示加载指示器。
  • dispose 方法中,释放 _scrollController 以防止内存泄漏。

具体的实现步骤包括:

以下是实现无限滚动列表的步骤:

  1. 创建一个 Flutter 应用程序。

  2. 创建一个 StatefulWidget,作为无限滚动列表的容器。

  3. 在状态类中,初始化数据源,包括初始数据列表。

  4. 创建一个滚动控制器(ScrollController)并在 initState 方法中将滚动监听器添加到它。

  5. 在滚动监听器中,检查是否滚动到了列表底部,并根据需要加载更多数据。

  6. 使用 ListView.builder 构建列表视图,根据数据源动态生成列表项。

  7. 在列表的底部显示加载指示器,以指示正在加载更多数据。

  8. dispose 方法中释放滚动控制器。

通过这些步骤,您可以实现一个无限滚动列表,用户可以滚动并加载更多数据,从而创建无限滚动的体验。这对于需要显示大量数据的应用程序非常有用,例如社交媒体新闻源或产品列表。

3. 改造1:仿淘宝无线滚动网格基本实现举例(GridView.builder)

基本原理与无线滚动的列表类似,要改造为模拟无限滚动的 GridView需要进行的步骤包括:

  1. 创建数据源:首先,您需要准备一个数据源,这可以是一个包含商品信息的列表。
  2. 创建滚动视图:替换 ListView.builder 为 GridView.builder,以创建网格视图。设置 gridDelegate 来指定列数和布局。
  3. 滚动监听:使用 ScrollController 监听滚动事件,类似于之前的示例,以确定何时触发加载更多数据的操作。
  4. 动态加载触发:在滚动监听器中,检查滚动位置是否接近底部,如果是,触发加载更多数据的操作。
  5. 更新数据源:当触发加载更多数据时,更新数据源,通常是从网络或其他数据源获取新数据,并将其添加到数据源中。
  6. 重新构建UI:使用 setState() 来通知 Flutter 重新构建 UI,以显示新加载的数据。

具体的实现代码如下:

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);Widget build(BuildContext context) {return const MaterialApp(home: InfiniteScrollGrid(),);}
}class InfiniteScrollGrid extends StatefulWidget {const InfiniteScrollGrid({Key? key}) : super(key: key);State<InfiniteScrollGrid> createState() => _InfiniteScrollGridState();
}class _InfiniteScrollGridState extends State<InfiniteScrollGrid> {List<String> items = List.generate(20, (index) => 'Item $index'); // 初始数据final ScrollController _scrollController = ScrollController();bool isLoading = false;void initState() {super.initState();_scrollController.addListener(_loadMore);}void _loadMore() {if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent &&!isLoading) {setState(() {isLoading = true;});Future.delayed(const Duration(seconds: 1), () {setState(() {items.addAll(List.generate(10, (index) => 'Item ${index + items.length}'));isLoading = false;});});}}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('无尽滚动网格'),),body: GridView.builder(controller: _scrollController,gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, // 列数childAspectRatio: 0.7, // 网格项的宽高比),itemCount: items.length + (isLoading ? 1 : 0),itemBuilder: (context, index) {if (index < items.length) {return Card(elevation: 3,margin: const EdgeInsets.all(8),child: Text(items[index]),);} else {return const Padding(padding: EdgeInsets.all(16.0),child: Center(child: CircularProgressIndicator()),);}},),);}void dispose() {_scrollController.dispose();super.dispose();}
}

这段代码的实现效果为:
在这里插入图片描述

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

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

相关文章

05. 机器学习入门 - 动态规划

文章目录 从一个案例开始动态规划 Hi, 你好。我是茶桁。 咱们之前的课程就给大家讲了什么是人工智能&#xff0c;也说了每个人的定义都不太一样。关于人工智能的不同观点和方法&#xff0c;其实是一个很复杂的领域&#xff0c;我们无法用一个或者两个概念确定什么是人工智能&a…

为什么说阿里云服务器5M带宽是最划算的?

为什么说阿里云服务器5M带宽最合适&#xff1f;因为阿里云服务器公网带宽按固定带宽收费是阶梯收费的&#xff0c;以5M带宽为分割点&#xff0c;当带宽达到6M及以上时&#xff0c;超出5M部分的带宽价格会上涨。 阿里云百科以华北2&#xff08;北京&#xff09;地域为例&#x…

cf 解题报告 01

E. Power of Points Problem - 1857E - Codeforces 题意&#xff1a; 给你 n n n 个点&#xff0c;其整数坐标为 x 1 , … x n x_1,\dots x_n x1​,…xn​&#xff0c;它们位于一条数线上。 对于某个整数 s s s&#xff0c;我们构建线段[ s , x 1 s,x_1 s,x1​], [ s , x…

有时候,使用 clang -g test.c 编译出可执行文件后,发现 gdb a.out 进行调试无法读取符号信息,为什么?

经过测试&#xff0c;gdb 并不是和所有版本的 llvm/clang 都兼容的 当 gdb 版本为 9.2 时&#xff0c;能支持 9.0.1-12 版本的 clang&#xff0c;但无法支持 16.0.6 版本的 clang 可以尝试使用 LLVM 专用的调试器 lldb 我尝试使用了 16.0.6 版本的 lldb 调试 16.0.6 的 clan…

问 ChatGPT 关于 GPT 的事情:数据准备篇

一、假如你是一名人工智能工程师&#xff0c;手里有一个65B的GPT大模型&#xff0c;但你需要一个6B左右的小模型&#xff0c;你会怎么做&#xff1f; 答&#xff1a;作为人工智能工程师&#xff0c;如果我手里有一个65B的GPT大模型&#xff0c;而我需要一个6B左右的小模型&…

机器视觉工程师如何快速停止内耗,与自己和解

十分情绪化的人&#xff0c;是无法更好的成就自我的。 真正让人疲惫的是&#xff0c;不是工作&#xff0c;不是学习&#xff0c;更不是生活。而是你自己的情绪。 我们每一天去上班&#xff0c;感觉自己像个失败者。看不见自身的光芒&#xff0c;被自己的情绪笼罩&#xff0c;饱…

Linux命令(92)之rm

linux命令之rm 1.rm介绍 linux命令rm是用来删除一个或多个文件/目录&#xff0c;由于其删除的不可逆性&#xff0c;建议在日常工作中一定要慎用 2.rm用法 rm [参数] 文件/目录 rm常用参数 参数说明-r递归删除文件或目录-f不提示强制删除-i删除文件或目录前进行确认-v详细显…

掌动智能:UI自动化测试工具的重要性和应用

在软件开发过程中&#xff0c;测试是至关重要的环节。而UI自动化测试工具则成为了测试团队提高效率、降低成本、保证软件质量的重要利器。本文将介绍UI自动化测试工具的概念和重要性&#xff0c;并探讨其在软件开发中的应用和好处。 一、UI自动化测试工具的概念 UI自动化测试工…

23-properties文件和xml文件以及dom4j的基本使用操作

特殊文件 我们利用这些特殊文件来存放我们 java 中的数据信息&#xff0c;当数据量比较大的时候&#xff0c;我们可以利用这个文件对数据进行快速的赋值 对于多个用户数据的存储的时候我们要用这个XML来进行存储 关于这些特殊文件&#xff0c;我们主要学什么 了解他们的特点&…

【AI视野·今日NLP 自然语言处理论文速览 第四十一期】Tue, 26 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 26 Sep 2023 Totally 75 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Physics of Language Models: Part 3.1, Knowledge Storage and Extraction Authors Zeyuan Allen Zhu, Yuanz…

【设计模式】六、建造者模式

文章目录 需求介绍角色应用实例建造者模式在 JDK 的应用和源码分析java.lang.StringBuilder 中的建造者模式 建造者模式的注意事项和细节 需求 需要建房子&#xff1a;这一过程为打桩、砌墙、封顶房子有各种各样的&#xff0c;比如普通房&#xff0c;高楼&#xff0c;别墅&…

Github贡献PR六部曲

Github贡献PR三部曲 1. fork代码 选中自己要贡献PR的仓库&#xff0c;点击Github右上角的fork2. clone代码 git clone gitgithub.com:{username}/seata.git3. 设置提交信息 git config user.name {username} git config user.email {email}git remote add upstream gitgith…

正态分布检验的拟合优度法与综合统计量法

综合统计量方法和正态分布的拟合优度检验方法是常用于检验数据是否呈正态分布的两类主要方法。以下是具体的检验方法&#xff1a; 综合统计量方法&#xff1a; Shapiro-Wilk检验&#xff1a;基于W统计量&#xff0c;适用于各种样本大小。DAgostino检验&#xff1a;结合了偏度…

基于java的鲜花销售系统/网上花店

摘 要 本毕业设计的内容是设计并且实现一个基于Spring Boot框架的驿城鲜花销售系统。它是在Windows下&#xff0c;以MYSQL为数据库开发平台&#xff0c;Tomcat网络信息服务作为应用服务器。驿城鲜花销售系统的功能已基本实现&#xff0c;主要包括首页、个人中心、用户管理、鲜…

虚拟机安装 centos

title: 虚拟机安装 centos createTime: 2020-12-13 12:00:27 updateTime: 2020-12-13 12:00:27 categories: linux tags: 虚拟机安装 centos 路线图 主机(宿主机) —> centos --> docker --> docker 镜像 --> docker 容器 — docker 服务 1.前期准备 一台 主机 或…

pycharm配置python3.8版本专门用于undecteded_chromedriver测试

pycharm配置python3.8版本专门用于undecteded_chromedriver测试 作者&#xff1a;虚坏叔叔 博客&#xff1a;https://pay.xuhss.com 早餐店不会开到晚上&#xff0c;想吃的人早就来了&#xff01;&#x1f604; 一、Pycharm及python环境的配置 1.安装python-3.8.7rc1-amd64.e…

php实战案例记录(12)parse_url函数的用法

parse_url 函数是 PHP 中的一个内置函数&#xff0c;用于解析 URL 并返回其组成部分。 下面是 parse_url 函数的语法&#xff1a; parse_url(string $url, int $component -1): mixed参数说明&#xff1a; $url&#xff1a;要解析的 URL 字符串。$component&#xff1a;可选…

目标检测YOLO实战应用案例100讲-基于端到端的自动驾驶道路环境目标检测(续)

目录 3.1.2 多尺度小目标检测 3.1.3 Swin Transformer Layer 3.1.4 MCS-YOLO网络结构图 3.2 实验环境及参数设置

Python无废话-办公自动化Excel修改数据

如何修改Excel 符合条件的数据&#xff1f;用Python 几行代码搞定。 需求&#xff1a;将销售明细表的产品名称为PG手机、HW手机、HW电脑的零售价格分别修改为4500、5500、7500&#xff0c;并保存Excel文件。如下图 Python 修改Excel 数据&#xff0c;常见步骤&#xff1a; 1&…

【静态代码扫描服务】python实现-附ChatGPT解析

1.题目 静态代码扫描服务 知识点:数组、字符串、哈希表 时间限制:1s 空间限制: 256MB 限定语言:不限 题目描述: 静态扫描快速快速识别源代码的缺陷,静态扫描的结果以扫描报告作为输出: 文件扫描的成本和文件大小相关,如果文件大小为N,则扫描成本为N个金币扫描报告的缓存成本…