Flutter:列表分页,上拉加载下拉刷新,在GetBuilder模板使用方式

GetBuilder模板使用方式参考上一节
本篇主要代码记录如何使用上拉加载下拉刷新,
接口请求和商品组件的代码不包括在内

pubspec.yaml装包

  cupertino_icons: ^1.0.8# 分页 上拉加载,下拉刷新pull_to_refresh_flutter3: 2.0.2

商品列表:controller

import 'package:flutter_aidishi/api/index.dart';
import 'package:flutter_aidishi/models/home/product_model/product_model.dart';
import 'package:flutter_aidishi/models/index.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';class GoodsListController extends GetxController {GoodsListController();final isHot = Get.arguments['hot'];List<ProductModel> items = [];/** 分页* refreshController:分页控制器* _page:分页* _limit:每页条数* _loadNewsSell:拉取数据(是否刷新)* onLoading:上拉加载新商品* onRefresh:下拉刷新* */final RefreshController refreshController = RefreshController(initialRefresh: true,);int _page = 1;int _limit = 20;Future<bool> _loadNewsSell(bool isRefresh) async {var result = await ProductApi.products(ProductsReq(page:isRefresh ? 1:_page,prePage:_limit));if(isRefresh){_page = 1;items.clear();}if(result.isNotEmpty){_page++;items.addAll(result);}// 是否是空return result.isEmpty;}// 上拉载入新商品void onLoading() async{if(items.isNotEmpty){try{// 拉取数据是否为空 ? 设置暂无数据 : 加载完成var isEmpty = await _loadNewsSell(false);isEmpty ? refreshController.loadNoData() :  refreshController.loadComplete();}catch(e){refreshController.loadFailed(); // 加载失败}}else{refreshController.loadNoData(); // 设置无数据}update(["goods_list"]);}// 下拉刷新void onRefresh() async{try{await _loadNewsSell(true);refreshController.refreshCompleted();}catch(e){refreshController.refreshFailed();}update(["goods_list"]);}_initData() async{update(["goods_list"]);}void onTap() {}@overridevoid onInit() {super.onInit();}@overridevoid onReady() {super.onReady();_initData();}@overridevoid onClose() {super.onClose();// 控制器释放refreshController.dispose();}
}

商品列表:view

import 'package:flutter/material.dart';
import 'package:flutter_aidishi/components/product_item.dart';
import 'package:flutter_aidishi/components/refresher.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'index.dart';class GoodsListPage extends GetView<GoodsListController> {const GoodsListPage({super.key});// AppBarAppBar _buildAppBar(){return AppBar(title: const Text("goods_list"));}// 主视图Widget _buildView() {return GridView.builder(itemCount: controller.items.length,itemBuilder: (context,index){var product = controller.items[index];// 自行封装商品item组件return ProductItemWidget(product,imgHeight: 117.w, // 图片高度);},gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, // 每行3个mainAxisSpacing: 10.w, // 主轴间距crossAxisSpacing: 10.w, // 交叉轴间距childAspectRatio: 0.7, // 宽高比),);}@overrideWidget build(BuildContext context) {return GetBuilder<GoodsListController>(init: GoodsListController(),id: "goods_list",builder: (_) {return Scaffold(appBar: _buildAppBar(),body: SmartRefresher(controller: controller.refreshController,enablePullUp: true, // 启用上拉加载onRefresh: controller.onRefresh, // 下拉刷新回调onLoading: controller.onLoading, // 上拉加载回调footer: const SmartRefresherFooterWidget(), // 底部加载更多组件child: _buildView(),),);},);}
}

底部加载更多组件:SmartRefresherFooterWidget

import 'package:flutter/cupertino.dart';
import 'package:flutter_aidishi/extension/index.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';/// 底部加载更多组件
class SmartRefresherFooterWidget extends StatelessWidget {/// 底部高度final double? height;/// 图标大小final double? iconSize;const SmartRefresherFooterWidget({Key? key,this.iconSize,this.height,}) : super(key: key);@overrideWidget build(BuildContext context) {return ClassicFooter(height: height ?? 60 + MediaQuery.of(context).padding.bottom + 30, // 底部高度loadingIcon: const CupertinoActivityIndicator().tight(width: iconSize ?? 25,height: iconSize ?? 25,), // 加载中outerBuilder: (child) => child.center().height(height ?? 60), // 内容);}
}

main也需要启用上拉加载下拉刷新

class MyApp extends StatelessWidget {const MyApp({Key? key}) :super(key: key);@overrideWidget build(BuildContext context) {return ScreenUtilInit(designSize: const Size(375, 812), // 设计稿中设备的尺寸(单位随意,建议dp,但在使用过程中必须保持一致)builder: (context,child){return RefreshConfiguration(headerBuilder: () => const ClassicHeader(), // 自定义刷新头部footerBuilder: () => const ClassicFooter(), // 自定义刷新尾部hideFooterWhenNotFull: true, // 当列表不满一页时,是否隐藏刷新尾部headerTriggerDistance: 80, // 触发刷新的距离maxOverScrollExtent: 100, // 最大的拖动距离footerTriggerDistance: 150, // 触发加载的距离child:GetMaterialApp(......));});}
}

完成!

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

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

相关文章

使用Cmake导入OpenCV库的大坑记录

CMakeLists.txt cmake_minimum_required(VERSION 3.20)set(OpenCV_DIR D:/Package/opencv4/opencv/mingw-build/install) #这里根据自己OpenCV位置设定find_package(OpenCV REQUIRED)project(PROJ1 CXX)add_executable(PROJ1 main.cpp)target_include_directories(PROJ1 PR…

MySQL —— MySQL 程序

目录 前言 一、MySQL 程序简介 二、mysqld -- MySQL 服务器 三、mysql -- MySQL 客户端 1. mysql 客户端简介 2. mysql 客户端选项 &#xff08;1&#xff09;指定选项的方式 &#xff08;2&#xff09;mysql 客户端命令常用选项 &#xff08;3&#xff09;在命令行中使…

STM32 PWM波形详细图解

目录 前言 一 PWM介绍 1.1 PWM简介 1.2 STM32F103 PWM介绍 1.3 时钟周期与占空比 二.引脚映像关系 2.1引脚映像与寄存器 2.2 复用功能映像 三. PWM 配置步骤 3.1相关原理图 3.2配置流程 3.2.1 步骤一二&#xff1a; 3.2.2 步骤三&#xff1a; 3.2.3 步骤四五六七&#xff1a; …

【软件安装】在Ubuntu中安装mysql5.7

参考&#xff1a;cubuntu安装mysql5.6_mob649e81553a70的技术博客_51CTO博客 问题1&#xff1a;sudo apt install mysql-server-5.7 -y 若提示mysql-server 没有可安装候选 答&#xff1a; sudo nano /etc/apt/sources.list 在开头加入&#xff1a; # 阿里源 deb http://mi…

多方法做配对样本t检验(三)

Wilcoxon符号秩检验 Wilcoxon符号秩检验&#xff08;Wilcoxon Signed-Rank Test&#xff09; 是一种非参数统计方法&#xff0c;用于检验两组相关样本&#xff08;配对样本&#xff09;之间的差异是否显著。它通常用来代替配对样本t检验&#xff0c;特别是在数据不符合正态分布…

修改IDEA配置导致Spring Boot项目读取application.properties中文乱码问题

之前很多配置都是放在nacos里面&#xff0c;然后这次同事有个配置写在application.properties中&#xff0c;这个配置含有中文&#xff0c;启动之后发现拿到的中文值会乱码&#xff0c;然后就帮忙看了一下问题。 排查问题 经过不停的百度、排查发现&#xff0c;spring读取app…

0.shell 脚本执行方式

1.脚本格式要求 &#x1f951;脚本以 #!/bin/bash 开头 &#x1f966; 脚本要有可执行权限 2.执行脚本的两种方式 &#x1f96c; 方式1&#xff1a;赋予x执行权限 &#x1f952; ​​​​​​​方式2&#xff1a; sh执行 ​​​​​​​

[2024年3月10日]第15届蓝桥杯青少组stema选拔赛C++中高级(第二子卷、编程题(6))

参考程序&#xff1a; #include<bits/stdc.h> using namespace std; int n; int a[305]; int dp[305][305];//打掉ij之间所有靶子可以获得的最大积分&#xff08;不含i&#xff0c;j&#xff09; int main() {cin>>n;for(int i1;i<n;i){cin>>a[i];}a[0]1…

深入了解 Adam 优化器对显存的需求:以 LLaMA-2 7B 模型为例 (中英双语)

中文版 深入了解 Adam 优化器对显存的额外需求&#xff1a;模型参数与优化器状态的显存开销分析 在深度学习模型的训练过程中&#xff0c;显存是一个关键的资源&#xff0c;尤其在处理大型语言模型或深度神经网络时。训练时的显存需求不仅包括模型参数本身&#xff0c;还涉及…

k8s Init:ImagePullBackOff 的解决方法

kubectl describe po (pod名字) -n kube-system 可查看pod所在的节点信息 例如&#xff1a; kubectl describe po calico-node-2lcxx -n kube-system 执行拉取前先把用到的节点的源换了 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"re…

Vue--------导航守卫(全局,组件,路由独享)

全局导航守卫 beforeEach 全局前置守卫 afterEach 全局后置守卫 路由独享守卫 beforeEnter 路由独享守卫 组件导航守卫 beforeRouteEnter 进入组件前 beforeRouteUpdate 路由改变但是组件复调用 beforeRouteLeave 离开组件之前 执行顺…

入门产品经理,考PMP还是NPDP?

PMP和NPDP都是管理行业内的高含金量证书&#xff0c;不过PMP侧重项目管理&#xff0c;NPDP侧重产品开发。如果你已经确定了自己的职业方向是产品经理的话&#xff0c;那么考NPDP证书会更加契合一些。 PMP和NPDP有什么不同? 1、认证体系不同 PMP&#xff08;项目管理专业人士…

【继承】—— 我与C++的不解之缘(十九)

前言&#xff1a; 面向对象编程语言的三大特性&#xff1a;封装、继承和多态 本篇博客来学习C中的继承&#xff0c;加油&#xff01; 一、什么是继承&#xff1f; ​ 继承(inheritance)机制是⾯向对象程序设计使代码可以复⽤的最重要的⼿段&#xff0c;它允许我们在保持原有类…

OpenCV相机标定与3D重建(6)将3D物体点投影到2D图像平面上函数projectPoints()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::fisheye::projectPoints 是 OpenCV 库中用于鱼眼镜头模型的函数&#xff0c;它将3D物体点投影到2D图像平面上。这个函数对于模拟或者理解鱼眼…

自闭症全托管理:提供综合关怀的专业机构

在当今社会&#xff0c;随着对特殊儿童教育需求的日益增长&#xff0c;寻找一个能够提供全面、专业且充满爱心的全托管理机构&#xff0c;成为了许多自闭症、ADHD&#xff08;注意力缺陷多动障碍&#xff09;、谱系障碍、发育迟缓及注意力缺失等特殊儿童家庭的首要任务。星贝育…

安卓-碎片的使用入门

1.碎片(Fragment)是什么 Fragment是依赖于Activity的&#xff0c;不能独立存在的,是Activity界面中的一部分&#xff0c;可理解为模块化的Activity,它能让程序更加合理和充分地利用大屏幕的空间&#xff0c;因而在平板上应用得非常广泛. Fragment不能独立存在&#xff0c;必须…

WRF-Chem模式安装、环境配置、原理、调试、运行方法;数据准备及相关参数设置方法

大气污染是工农业生产、生活、交通、城市化等方面人为活动的综合结果&#xff0c;同时气象因素是控制大气污染的关键自然因素。大气污染问题既是局部、当地的&#xff0c;也是区域的&#xff0c;甚至是全球的。本地的污染物排放除了对当地造成严重影响外&#xff0c;同时还会在…

Admin.NET框架使用宝塔面板部署步骤

文章目录 Admin.NET框架使用宝塔面板部署步骤&#x1f381;框架介绍部署步骤1.Centos7 部署宝塔面板2.部署Admin.NET后端3.部署前端Web4.访问前端页面 Admin.NET框架使用宝塔面板部署步骤 &#x1f381;框架介绍 Admin.NET 是基于 .NET6 (Furion/SqlSugar) 实现的通用权限开发…

.net —— Razor

文章目录 项目地址一、创建一个Razor项目1.1 创建项目1.2 创建项目所需文件夹1.3 配置项目二、创建Category页面2.1 创建Category的展示页面2.2 增删改2.2.1 创建Edit的razor视图项目地址 教程作者:教程地址:代码仓库地址:所用到的框架和插件:dbt airflow一、创建一个Razo…

C语言——指针初阶(三)

目录 一.指针-指针 代码1&#xff1a; 运行结果&#xff1a; 代码2&#xff1a; 运行结果&#xff1a; 代码3&#xff1a; 运行结果&#xff1a; 二.指针数组 例&#xff1a; 往期回顾 一.指针-指针 指针减去指针的前提&#xff1a;两个指针指向同一块空间。 指针减去指针…