仿网站模板,商业网站建设平台,php网站开发培训,小程序登录不上去一般是什么原因GetBuilder模板使用方式参考上一节 本篇主要代码记录如何使用上拉加载下拉刷新#xff0c; 接口请求和商品组件的代码不包括在内 pubspec.yaml装包 cupertino_icons: ^1.0.8# 分页 上拉加载#xff0c;下拉刷新pull_to_refresh_flutter3: 2.0.2商品列表#xff1a;controlle…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];ListProductModel items [];/** 分页* refreshController分页控制器* _page分页* _limit每页条数* _loadNewsSell:拉取数据是否刷新* onLoading上拉加载新商品* onRefresh下拉刷新* */final RefreshController refreshController RefreshController(initialRefresh: true,);int _page 1;int _limit 20;Futurebool _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 GetViewGoodsListController {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 GetBuilderGoodsListController(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(......));});}
}完成
