美文网首页flutter 项目实战工具类
Flutter 列表刷新快速集成方案 工具类

Flutter 列表刷新快速集成方案 工具类

作者: 呆头呆脑雷 | 来源:发表于2023-05-07 08:56 被阅读0次

    如果你项目中有大量的列表刷新功能,上拉加载更多需求,你可以尝试这个方案,只需要实例化一个NFTrefreshListController子类,实现对应接口,就可以快速接入列表刷新需求。
    整个列表的需求相当于是独立的,整体相当于已隔离,颗粒度相当满意。

    依赖 easy_refresh, 你也可以替换其他刷新包。

    示例代码

    class HomeTabSocial extends StatefulWidget {
      const HomeTabSocial({Key? key}) : super(key: key);
    
      @override
      State<HomeTabSocial> createState() => _HomeTabSocialState();
    }
    
    class _HomeTabSocialState extends State<HomeTabSocial>
        {
    
    final socialController = HomeTabSocialController()..onLoad();
    
    @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: NFTrefreshList(
            controller: socialController,
            itemBuilder: (context, index) => SocialFeedListTile(
              item: socialController.data[index],
            ),
          ),
        );
      }
    
    
    class HomeTabSocialController extends NFTrefreshListController<SocailFeedItem> {
      @override
      Future<List<SocailFeedItem>> fetchData(int page) async {
        var result = await MyRequest.post('api/v1/newList', data: {
          'member_id': '[memberId]', 
          'page': page,
          'page_size': pageSize,
        });
        var data = result.data['data'] as Map;
        var list = (data['list'] as List)
            .map((e) => SocailFeedItem.from(e, data))
            .toList();
        return list;
      }
    
      @override
      int get pageSize => 3;
    
      @override
      bool get hasFooter => true;
    
      @override
      bool get hasHeader => true;
    }
    

    源码

    import 'dart:async';
    import 'package:flutter/cupertino.dart';
    import 'package:flutter_easyrefresh/easy_refresh.dart';
    import 'package:get/get.dart';
    
    
    class NFTrefreshList extends StatelessWidget {
      final NFTrefreshListController controller;
      final NullableIndexedWidgetBuilder itemBuilder;
      final IndexedWidgetBuilder? separatorBuilder;
    
      const NFTrefreshList({
        Key? key,
        required this.controller,
        required this.itemBuilder,
        this.separatorBuilder,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return StreamBuilder<List>(
          stream: controller.stream,
          initialData: controller.data,
          builder: (context, snap) {
            if (snap.hasData) {
              return EasyRefresh(
                header: ClassicalHeader(),
                footer: ClassicalFooter(),
                controller: controller.easyRefresh,
                onLoad: controller.onLoad,
                onRefresh: controller.onRefresh,
                child: ListView.separated(
                  itemCount: snap.data!.length,
                  itemBuilder: itemBuilder,
                  separatorBuilder:
                      separatorBuilder ?? (_, __) => const SizedBox.shrink(),
                ),
              );
            } else {
              return const CupertinoActivityIndicator();
            }
          },
        );
      }
    }
    
    abstract class NFTrefreshListController<T> {
      bool get hasHeader;
      bool get hasFooter;
      NFTrefreshListController();
    
      final EasyRefreshController easyRefresh = EasyRefreshController();
      final List<T> data = [];
    
      int get pageSize;
      int page = 1;
    
      final _controller = StreamController<List>.broadcast();
      Stream<List> get stream => _controller.stream;
    
      Future<void> onLoad() async {
        var list = await fetchData(page);
        if (list.isNotEmpty) {
          data.addAll(list);
          page += 1;
          _controller.add(data);
        } else {
          easyRefresh.finishLoad(success: true, noMore: true);
        }
        return;
      }
    
      Future<void> onRefresh() async {
        easyRefresh.resetLoadState();
        page = 1;
        var list = await fetchData(page);
        data.clear();
        data.addAll(list);
        page += 1;
        _controller.add(data);
        return;
      }
    
      Future<List<T>> fetchData(int page);
    }
    

    相关文章

      网友评论

        本文标题:Flutter 列表刷新快速集成方案 工具类

        本文链接:https://www.haomeiwen.com/subject/ujofsdtx.html