Flutter笔记：滚动之-无限滚动与动态加载的实现（GetX简单状态管理版）

Flutter笔记
无限滚动与动态加载的实现
（GeX简单状态管理版）

作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263
邮箱 ：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/133365040

GetX简单状态管理提供了一种更高效的且用于取代Flutter有状态组件（StatefullWidget）的方式。本文是《无限滚动与动态加载的实现》（地址：https://jclee95.blog.csdn.net/article/details/133340592）的另外一个版本，抛弃了Flutter有状态组件，取而代之的是GetX简单状态管理。以GetX简单状态管理的方式实现的。基本过程和思路一样，仅仅是状态管理方式上不一样。另外对于部分效果进行了简单的改进。

目 录

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';
import 'package:get/get.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const MaterialApp(home: InfiniteScrollList(),);}
}class Controller extends GetxController {ScrollController scrollController = ScrollController();List<String> items = <String>[];var isLoading = false;void loadMore() {if (scrollController.position.pixels ==scrollController.position.maxScrollExtent &&!isLoading) {isLoading = true;update();// 模拟加载1秒延时Future.delayed(const Duration(seconds: 1), () {// 生成3项假数据插入items.addAll(List.generate(3, (index) => 'Item ${index + items.length}'));isLoading = false;update();});}}static Controller get to => Get.find();@overridevoid onInit() {// 初始化一些数据items = List.generate(20, (index) => 'Item $index');scrollController = ScrollController();isLoading = false;// 添加滚动监听器scrollController.addListener(loadMore);super.onInit();}@overridevoid onClose() {scrollController.dispose();super.onClose();}
}class InfiniteScrollList extends StatelessWidget {const InfiniteScrollList({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('无尽滚动列表'),),body: GetBuilder<Controller>(init: Controller(),builder: (controller) {return Column(children: [Expanded(child: ListView.builder(controller: controller.scrollController,itemCount:controller.items.length + (controller.isLoading ? 1 : 0),itemBuilder: (context, index) {if (index < controller.items.length) {return Card(elevation: 3,margin: const EdgeInsets.all(8),child: ListTile(title: Text(controller.items[index]),// 在这里添加商品卡片的内容// 例如：商品图片、描述、价格等),);} else {return const Padding(padding: EdgeInsets.all(12.0),child: Center(child: SizedBox(width: 18.0,height: 18.0,child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.grey,), // 颜色为灰色strokeWidth: 3, // 线宽为3),),),);}},),),],);},),);}
}

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

在这里插入图片描述

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

这个代码实现了一个无限滚动的列表，其中使用了GetX来进行简单的状态管理。以下是对这个代码实现无限滚动的解释：

  1. 创建一个Controller类，该类继承自GetxController，用于管理状态和滚动。
class Controller extends GetxController {ScrollController scrollController = ScrollController();List<String> items = <String>[];var isLoading = false;// 省略了其它方法
}
  • scrollController 用于管理列表的滚动。
  • items 用于存储列表中的数据项。
  • isLoading 用于标识是否正在加载更多数据。
  1. 在Controller类中定义了一个名为loadMore的方法，该方法用于检测是否需要加载更多数据。
void loadMore() {if (scrollController.position.pixels ==scrollController.position.maxScrollExtent &&!isLoading) {isLoading = true;update();// 模拟加载1秒延时Future.delayed(const Duration(seconds: 1), () {// 生成3项假数据插入items.addAll(List.generate(3, (index) => 'Item ${index + items.length}'));isLoading = false;update();});}
}
  • loadMore 方法会在滚动到列表底部且不处于加载状态时触发。
  • 在加载数据时，它模拟了1秒的延时，然后生成3个假数据项，将它们添加到 items 列表中。
  • 加载完成后，将 isLoading 设置为 false 并调用 update 方法通知界面更新。
  1. 在Controller类的onInit方法中初始化了一些数据，并为scrollController添加了滚动监听器。
@override
void onInit() {// 初始化一些数据items = List.generate(20, (index) => 'Item $index');scrollController = ScrollController();isLoading = false;// 添加滚动监听器scrollController.addListener(loadMore);super.onInit();
}
  • 在初始化时，生成了20个假数据项并将它们存储在 items 列表中。
  • 创建了 scrollController 并将滚动监听器 loadMore 添加到它上面。
  1. 在InfiniteScrollList小部件中使用了 GetBuilder，它监听 Controller 的状态变化并更新UI。
body: GetBuilder<Controller>(init: Controller(),builder: (controller) {return Column(children: [Expanded(child: ListView.builder(controller: controller.scrollController,itemCount: controller.items.length + (controller.isLoading ? 1 : 0),itemBuilder: (context, index) {if (index < controller.items.length) {// 渲染数据项} else {// 渲染加载指示器}},),),],);},
),
  • GetBuilder 会监听 Controller 的状态变化，包括 items 和 isLoading，以便在数据加载时更新UI。
  • ListView.builder 用于构建列表，它的 itemCount 根据数据项的数量和加载状态动态确定。
  • 在 itemBuilder 中，根据索引渲染数据项或加载指示器。

总结：这个代码通过GetX库实现了一个无限滚动的列表，可以动态加载数据。滚动到列表底部时，它会触发加载更多数据的操作，加载完成后更新UI以显示新的数据项。GetX的简单状态管理使得管理状态变得更加容易。

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';
import 'package:get/get.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const MaterialApp(home: InfiniteScrollGrid(),);}
}class Controller extends GetxController {ScrollController scrollController = ScrollController();List<String> items = <String>[];var isLoading = false;void loadMore() {if (scrollController.position.pixels ==scrollController.position.maxScrollExtent &&!isLoading) {isLoading = true;update();// 模拟加载1秒延时Future.delayed(const Duration(seconds: 1), () {// 生成3项假数据插入items.addAll(List.generate(3, (index) => 'Item ${index + items.length}'));isLoading = false;update();});}}static Controller get to => Get.find();@overridevoid onInit() {// 初始化一些数据items = List.generate(20, (index) => 'Item $index');scrollController = ScrollController();isLoading = false;// 添加滚动监听器scrollController.addListener(loadMore);super.onInit();}@overridevoid onClose() {scrollController.dispose();super.onClose();}
}class InfiniteScrollGrid extends StatelessWidget {const InfiniteScrollGrid({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('无尽滚动网格'),),body: GetBuilder<Controller>(init: Controller(),builder: (controller) {return Column(children: [Expanded(child: GridView.builder(controller: controller.scrollController,gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, // 列数childAspectRatio: 0.7, // 网格项的宽高比),itemCount: controller.items.length,itemBuilder: (context, index) {return Card(elevation: 3,margin: const EdgeInsets.all(8),child: Text(controller.items[index]),);},),),if (controller.isLoading)const Padding(padding: EdgeInsets.all(12.0),child: Center(child: SizedBox(width: 18.0,height: 18.0,child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.grey,), // 颜色为灰色strokeWidth: 3, // 线宽为3),),),),],);},),);}
}

这段代码的实现效果为：

在这里插入图片描述

import 'package:flutter/material.dart';
import 'package:get/get.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const MaterialApp(home: InfiniteScrollGrid(),);}
}class Controller extends GetxController {ScrollController scrollController = ScrollController();List<String> items = <String>[];var isLoading = false;void loadMore() {if (scrollController.position.pixels ==scrollController.position.maxScrollExtent &&!isLoading) {isLoading = true;update();// 模拟加载1秒延时Future.delayed(const Duration(seconds: 1), () {// 生成3项假数据插入items.addAll(List.generate(3, (index) => 'Item ${index + items.length}'));isLoading = false;update();});}}static Controller get to => Get.find();@overridevoid onInit() {// 初始化一些数据items = List.generate(20, (index) => 'Item $index');scrollController = ScrollController();isLoading = false;// 添加滚动监听器scrollController.addListener(loadMore);super.onInit();}@overridevoid onClose() {scrollController.dispose();super.onClose();}
}class InfiniteScrollGrid extends StatelessWidget {const InfiniteScrollGrid({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('无尽滚动网格'),),body: GetBuilder<Controller>(init: Controller(),builder: (controller) {return Column(children: [Expanded(child: GridView.builder(controller: controller.scrollController,gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, // 列数childAspectRatio: 0.7, // 网格项的宽高比),itemCount: controller.items.length,itemBuilder: (context, index) {return Card(elevation: 3,margin: const EdgeInsets.all(8),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// 商品图片Image.network('https://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/4e05b89fedf043f1964e73aa729d21fb/cover.jpg',width: double.infinity, // 图片宽度占满卡片宽度height: 200, // 图片高度fit: BoxFit.cover, // 图片填充方式),// 商品名称const Padding(padding: EdgeInsets.all(8.0),child: Text('商品名称',style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),),),// 商品描述const Padding(padding: EdgeInsets.all(8.0),child: Text('商品描述',style: TextStyle(fontSize: 16),),),// 商品价格const Padding(padding: EdgeInsets.all(8.0),child: Text('¥ 99.99',style: TextStyle(fontSize: 18, color: Colors.red),),),// 在这里添加其他商品信息],),);},),),if (controller.isLoading)const Padding(padding: EdgeInsets.all(12.0),child: Center(child: SizedBox(width: 18.0,height: 18.0,child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.grey,), // 颜色为灰色strokeWidth: 3, // 线宽为3),),),),],);},),);}
}

在这里插入图片描述

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

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

相关文章

stm32 - 初识2

stm32 - 初识2

stm32 - 初识2 工程架构点灯程序寄存器方式点灯库函数的方式点灯 工程架构 启动文件 中断向量表&#xff0c;中断服务函数&#xff0c;其他中断等 中断服务函数中的&#xff0c;复位中断是整个程序的入口&#xff0c;调用systeminit&#xff0c;和main函数 点灯程序 寄存器方式…
阅读更多...
HTML的相关知识

HTML的相关知识

1.什么是HTML&#xff1f;基本语法 HTML: Hyper Text Markup Language &#xff08;超文本标记语言&#xff09; 超文本&#xff1f;超级文本&#xff0c;例如流媒体&#xff0c;声音、视频、图片等。 标记语言&#xff1f;这种语言是由大量的标签组成。HTML标签参考手…
阅读更多...
尚硅谷谷粒商城部分报错问题处理

尚硅谷谷粒商城部分报错问题处理

1、启动报错&#xff1a; 内容&#xff1a; org.springframework.beans.factory.BeanCreationException: Error creating bean with name attrAttrgroupRelationController: Lookup method resolution failed; nested exception is java.lang.IllegalStateException: Failed t…
阅读更多...
Redis配置和优化

Redis配置和优化

Redis配置和优化 一 、Redis介绍二、关系数据库和非关系数据库2.1、关系型数据库2.2、 非关系型数据库2.3、 非关系型数据库的产生背景2.4、 关系型数据库和非关系型数据库区别2.5、 总结 三、缓存概念3.1、系统缓存3.2、 缓存保存位置及分层结构3.2.1、DNS缓存3.2.2、 应用层缓…
阅读更多...
10.1 File类

10.1 File类

前言&#xff1a; java.io包中的File类是唯一一个可以代表磁盘文件的对象&#xff0c;它定义了一些用于操作文件的方法。通过调用File类提供的各种方法&#xff0c;可以创建、删除或者重命名文件&#xff0c;判断硬盘上某个文件是否存在&#xff0c;查询文件最后修改时间&…
阅读更多...
【HTML】表格行和列的合并

【HTML】表格行和列的合并

概述 当我们需要在 HTML 表格中展示复杂的数据时&#xff0c;行和列的合并可以帮助我们实现更灵活的布局和结构。通过合并行和列&#xff0c;我们可以创建具有更多层次和结构的表格&#xff0c;使数据更易于理解和分析。 在 HTML 表格中&#xff0c;我们可以使用 rowspan 和 …
阅读更多...
ELK整合springboot(第二课)

ELK整合springboot(第二课)

一、创建一个springboot的项目 pom文件如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLo…
阅读更多...
lv5 嵌入式开发-12 信号灯

lv5 嵌入式开发-12 信号灯

目录 1 信号量/灯(semaphore)基本概念 2 信号量&#xff0d;&#xff30;&#xff0f;&#xff36;操作概念 3 三种信号灯 3.1 有名信号灯 3.1.1 打开 3.1.2 关闭 3.1.3 删除 3.2 无名信号灯 3.2.1 初始化 3.2.2 销毁 3.3 信号灯P操作 3.4 信号灯V操作 3.5 示例 …
阅读更多...
Visual Studio 中将TAB设置为空格

Visual Studio 中将TAB设置为空格

将TAB设置为空格的原因很多&#xff0c;其中一点是为了统一不同编译器对TAB的解释&#xff0c;防止代码风格在不同编译器下不一致等。 在菜单中选择: 工具-->选项-->文本编辑器--->所有语言-->制表符 在窗口中选择&#xff0c;制表符大小和缩进大小都选为4&#xf…
阅读更多...
10.1 国庆节小任务

10.1 国庆节小任务

目录 select实现服务器并发 服务器 客户端 运行现象 select实现服务器并发 服务器 #include<myhead.h>#define PORT 8888 //1024~49151 #define IP "192.168.1.104" //ifconfig查看本机IPint main(int argc, const char *argv[]) {//创建流式…
阅读更多...
WiFi网络分析工具Airtool for Mac

WiFi网络分析工具Airtool for Mac

Airtool是一款Mac平台上的WiFi网络分析工具&#xff0c;它可以帮助用户监测、分析和管理无线网络。 以下是Airtool的一些主要功能和特点&#xff1a; 实时监测&#xff1a;Airtool可以实时监测当前Mac设备所连接的WiFi网络&#xff0c;包括网络速度、信号强度、连接状态等。信…
阅读更多...
Spark SQL

Spark SQL

Spark SQL 一、Spark SQL概述二、准备Spark SQL的编程环境三、Spark SQL程序编程的入口四、DataFrame的创建五、DataFrame的编程风格六、DataSet的创建和使用七、Spark SQL的函数操作 一、Spark SQL概述 Spark SQL属于Spark计算框架的一部分&#xff0c;是专门负责结构化数据的…
阅读更多...
NIO基础

NIO基础

nio : non-blocking io 非阻塞IO 1. 三大组件 1.1 channel和buffer channel 有点像stream &#xff0c;他就是读写数据的双向通道&#xff0c;可以从channel将数据读入buffer&#xff0c;也可以将buffer的数据写入channel&#xff0c;之前的stream 要么输入&#xff0c;要么…
阅读更多...
建筑能源管理（3）——建筑能源监管

建筑能源管理（3）——建筑能源监管

为了全面落实科学发展观&#xff0c;提高建筑能源管理水平&#xff0c;进一步降低能源和水资源消耗、合理利用资源&#xff0c;以政府办公建筑和大型公共建筑的运行节能管理为突破口&#xff0c;建立了既有政府办公建筑和大型公共建筑运行节能监管体系&#xff0c;旨在提高政府…
阅读更多...
28271-2012 米制超细牙螺纹 公差

28271-2012 米制超细牙螺纹 公差

声明 本文是学习GB-T 28271-2012 米制超细牙螺纹 公差. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了米制超细牙螺纹的公差和标记。 本标准适用于精密仪器和电子设备等领域的螺纹连接。 2 规范性引用文件 下列文件对于本文件…
阅读更多...
windows server 2019 、win11安装docker desktop

windows server 2019 、win11安装docker desktop

Docker Desktop Docker Desktop是可以部署在windows运行docker的应用服务&#xff0c;其基于windos的Hyper-V服务和WSL2内核在windos上创建一个子系统(linux)&#xff0c;从而实现其在windows上运行docker。 前提条件 WSL 查看wsl是否安装 我们可以直接在 cmd 或 powershe…
阅读更多...
MySql出错点

MySql出错点

一、DDL 1.修改表&#xff0c;添加新的字段时&#xff0c;不要加引号 2.在修改表中字段的类型时&#xff0c;会发生数据截断。 像DATETIME 转化为 TIME 二、DML 1.插入和删除的注意点 2.可以通过 select 来协助插入 3.
阅读更多...
Linux 基本语句_4_指针和函数

Linux 基本语句_4_指针和函数

指针函数 顾名思义&#xff0c;即返回值为指针的函数 int * f (int n){int *p NULL;//空指针return p;//返回一个地址 }函数指针 指向函数的指针&#xff0c;每个函数都有自己的入口地址&#xff0c;函数指针专门指向这些地址#include <stdio.h>int max(int a, int b)…
阅读更多...
【Linux】完美解决ubuntu18.04下vi不能使用方向键和退格键

【Linux】完美解决ubuntu18.04下vi不能使用方向键和退格键

今天在刚安装完ubuntu18.04&#xff0c;发现在使用vi命令配置文件时使用方向键并不能移动光标&#xff0c;而是出现一堆奇怪的英文字母&#xff0c;使用退格键也不能正常地删除内容&#xff0c;用惯了CentOS的我已经感觉到ubuntu没有centos用着丝滑&#xff0c;但是没办法&…
阅读更多...
【C++】类和对象（中）

【C++】类和对象（中）

一、类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。但是空类中并不是真的什么都没有&#xff0c;任何类在什么都不写的时候&#xff0c;编译器会自动生成以下 6 个默认成员函数。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器会生成…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023