【开源鸿蒙跨平台开发先锋训练营】Day4~6 实现上拉加载下拉刷新能力

前提由于第三天的接口只有4条无法显示上拉加载和下拉刷新的功能于是重新用另外一个接口来请求。先说一下最新的接口设计传参有三个字段 分别为page当前页pageSize每页数量category水果类别。query方式返回参数格式为{ success: true, data: { list: [ { chinese: 脐橙, name: 脐橙, english: NavelOrange, nutrition: [ [ 维生素C, 53mg/100g ], [ 膳食纤维, 2.4g/100g ], [ 钾, 159mg/100g ], [ 叶酸, 40μg/100g ], [ 热量, 47kcal/100g ] ], category: 时令水果, colorImageUrl: xxx, transparentImageUrl: , benefits: 富含维生素C增强免疫力促进胶原蛋白合成抗氧化预防感冒, detailImages: [], detailDescription: 脐橙口感酸甜多汁富含维生素C可增强免疫力和抗氧化适合日常食用。, mainColor: #FF9800, mainBg: #FBE185, features: [ { short: 增强免疫, long: 富含维生素C有助于增强身体免疫力。 }, { short: 抗氧化, long: 丰富的抗氧化物质有效对抗自由基延缓衰老。 } ] } ], pagination: { page: 1, pageSize: 1, total: 29, totalPages: 29 } }, message: null, statusCode: 200 }1.鸿蒙手机上上拉加载效果图片使用 Flutter 的RefreshIndicator组件Flutter 提供了内置的RefreshIndicator组件来实现下拉刷新功能。这个组件会包裹一个可滚动的子组件如 ListView、GridView 等当用户在列表顶部向下拉动时会显示一个圆形的加载指示器同时触发onRefresh回调函数。工作流程用户手指在屏幕上向下滑动当滑动距离超过阈值时显示刷新指示器用户松开手指触发onRefresh回调执行异步数据请求请求完成后刷新指示器自动收起列表显示最新数据RefreshIndicator( onRefresh: () _fetchData(isRefresh: true), // 下拉触发的回调 child: ListView.builder( itemCount: _fruitList.length, itemBuilder: (context, index) { return FruitCard(fruit: _fruitList[index]); }, ), )下拉刷新实现Futurevoid _fetchData({bool isRefresh false}) async { if (isRefresh) { _currentPage 1; // 重置页码 _hasMore true; // 重置加载更多状态 } final result await FruitApi.getFruitList( page: _currentPage, pageSize: _pageSize, ); setState(() { if (result ! null) { if (isRefresh) { _fruitList result.list; // 刷新替换整个列表 } else { _fruitList.addAll(result.list); // 加载更多追加数据 } } }); }2.上拉加载Flutter 没有内置的上拉加载组件需要我们通过ScrollController来监听列表的滚动位置。当检测到用户滚动到列表底部时自动触发加载更多数据的操作。步骤创建ScrollController并绑定到 ListView添加滚动监听器监听滚动位置变化当滚动位置等于最大滚动范围时说明已到达底部检查是否正在加载中、是否还有更多数据如果满足条件增加页码并请求下一页数据将新数据追加到现有列表中在列表底部显示加载指示器定义变量int _currentPage 1; // 当前页码final int _pageSize 10; // 每页数量bool _hasMore true; // 是否还有更多数据bool _loading false; // 是否正在加载final ScrollController _scrollController ScrollController(); // 滚动控制器初始化时添加滚动监听overridevoid initState() {super.initState();_scrollController.addListener(_onScroll);}overridevoid dispose() {_scrollController.dispose();super.dispose();}监听滚动到底部void _onScroll() {if (_scrollController.position.pixels _scrollController.position.maxScrollExtent) {if (!_loading _hasMore) {_loadMore();}}}加载更多数据Futurevoid _loadMore() async {_currentPage;await _fetchData();}Futurevoid _fetchData({bool isRefresh false}) async {setState(() { _loading true; });final result await FruitApi.getFruitList(page: _currentPage, pageSize: _pageSize);setState(() {if (result ! null) {_fruitList.addAll(result.list); // 追加数据_hasMore result.list.length _pageSize; // 判断是否还有更多}_loading false;});}列表绑定控制器并显示加载指示器ListView.builder(controller: _scrollController,itemCount: _fruitList.length (_hasMore ? 1 : 0),itemBuilder: (context, index) {if (index _fruitList.length) {return const Center(child: CircularProgressIndicator());}return FruitCard(fruit: _fruitList[index]);},)3.最后欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net