Flutter开箱即用一站式解决方案2.0-智能刷新列表

Flutter Chen Common

🌟 简介

本库为Flutter应用开发提供一站式解决方案,包含:

  • 可定制的主题系统
  • 完整的国际化支持
  • 企业级网络请求封装
  • 企业级日志体系封装
  • N+高质量常用组件
  • 常用开发工具及扩展集合
  • 智能刷新列表解决方案
  • 开箱即用的各类通用弹窗
  • 全局统一各状态布局
  • 全局无需Context的Toast

特性

  • 🎨 主题系统 :通过 ThemeExtension 全局配置颜色/圆角/间距等样式
  • 🌍 国际化支持:内置中英文,支持自定义文本和动态语言切换
  • 优先级覆盖:支持全局配置 + 组件级参数覆盖
  • 📱 自适应设计:完美适配 iOS/Material 设计规范
  • 🔥 企业级方案:内置日志/网络/安全等通用模块,提供开箱即用的复杂场景解决方案

🚀 快速接入

安装依赖

pubspec.yaml 中添加依赖:

yaml 复制代码
dependencies:
  flutter_chen_common: 最新版本

智能刷新列表

🌟 特性

  • 🚀 支持下拉刷新和上拉加载
  • 🎨 内置多种布局策略(列表、网格、瀑布流)
  • 🌈 支持自定义布局策略
  • ⚡ 自动处理加载状态(加载中、空数据、错误)
  • 🎯 支持回顶功能
  • 📱 支持自定义刷新和加载动画
  • 🔧 完全可配置
  • 🛡️ 支持分页加载

📱 效果预览

您的浏览器不支持 webm 视频格式

🚀 快速开始

基础使用

dart 复制代码
class ListPage extends StatefulWidget {
  const ListPage({super.key});

  @override
  State<ListPage> createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  late final PagingController pagingController = PagingController.withLoader(
    dataLoader: _loadData,
    pageSize: 20,
  );

  Future<PagingResponse> _loadData(int pageNum, int pageSize) async {
    final result = {
      "pages": 3,
      "records": List.generate(20, (i) => i + (pageNum - 1) * 20)
    };
    await Future.delayed(1.seconds);
    return PagingResponse.fromMapJson(result);
  }

  @override
  void dispose() {
    pagingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("智能刷新列表"),
      ),
      body: SmartRefresh(
        controller: pagingController,
        itemBuilder: (_, item, index) => _buildItem(index),
      ),
      floatingActionButton: BackTopWidget(pagingController.scrollController),
    );
  }

  Widget _buildItem(index) {
    return ListTile(
      title: Text('Item $index'),
    );
  }
}

// 外部切换数据调用接口刷新:pagingController.refreshController.requestRefresh();

🎨 自定义布局

网格布局

dart 复制代码
SmartRefresh(
  controller: pagingController,
  strategy: const GridRefreshStrategy(
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
  ),
  itemBuilder: (_, item, index) => _buildGridItem(index),
)

瀑布流布局

dart 复制代码
SmartRefresh(
  controller: pagingController,
  childBuilder: (_, state) {
    if (state.initialRefresh) {
      return BaseWidget.loadingWidget(context);
    } else if (state.dataList.isEmpty) {
      return BaseWidget.emptyWidget(context);
    }
    return CustomScrollView(
      slivers: [
        SliverPadding(
          padding: const EdgeInsets.all(8),
          sliver: SliverMasonryGrid.count(
            crossAxisCount: 2,
            mainAxisSpacing: 8,
            crossAxisSpacing: 8,
            childCount: state.dataList.length,
            itemBuilder: (context, index) => _buildItem(index),
          ),
        ),
      ],
    );
  },
)

⚡ 自定义控制器

继承 PagingController

dart 复制代码
class ListPagingController extends PagingController<dynamic> {
  @override
  Future<PagingResponse> loadData() async {
    final result = {
      "pages": 3,
      "records": List.generate(20, (i) => i + (state.pageNum - 1) * 20)
    };
    await Future.delayed(1.seconds);
    return PagingResponse.fromMapJson(result);
  }

  @override
  int get pageSize => 20;

  @override
  bool get shouldInitialRefresh => true;
}

工厂方法

dart 复制代码
final pagingController = PagingController.withLoader(
  dataLoader: _loadData,
  pageSize: 20,
);

🔧 自定义布局策略

dart 复制代码
class CustomRefreshStrategy<T> implements IRefreshStrategy<T> {
  @override
  Widget buildLayout({
    required BuildContext context,
    required IRefreshState<T> state,
    required Widget Function(BuildContext, T, int) itemBuilder,
  }) {
    if (state.initialRefresh) {
      return BaseWidget.loadingWidget(context);
    } else if (state.dataList.isEmpty) {
      return BaseWidget.emptyWidget(context);
    }

    return ListView.builder(
      itemCount: state.dataList.length,
      itemBuilder: (context, index) =>
          itemBuilder(context, state.dataList[index], index),
    );
  }
}

📚 API 参考

PagingController

属性 类型 描述
state RefreshState 刷新相关数据
refreshController RefreshController 刷新控制器
scrollController ScrollController 滑动控制器
方法 描述
loadData() 加载数据
refresh() 刷新数据
loadMore() 加载更多
dispose() 释放资源

PagingResponse

参数 类型 描述
pages int 总页数
total int 总条数
records List 数据列表

SmartRefresh

参数 类型 描述
controller PagingController 控制器
strategy IRefreshStrategy 布局策略
itemBuilder WidgetBuilder 项目构建器
childBuilder WidgetBuilder 自定义布局构建器

其他使用以及配置参考pull_to_refresh

相关推荐
键盘鼓手苏苏3 小时前
Flutter 三方库 p2plib 的鸿蒙化适配指南 - 实现高性能的端到端(P2P)加密通讯、支持分布式节点发现与去中心化数据流传输实战
flutter·harmonyos·鸿蒙·openharmony
加农炮手Jinx3 小时前
Flutter for OpenHarmony:postgrest 直接访问 PostgreSQL 数据库的 RESTful 客户端(Supabase 核心驱动) 深度解析与鸿蒙适配指南
数据库·flutter·华为·postgresql·restful·harmonyos·鸿蒙
加农炮手Jinx3 小时前
Flutter 组件 heart 适配鸿蒙 HarmonyOS 实战:分布式心跳监控,构建全场景保活检测与链路哨兵架构
flutter·harmonyos·鸿蒙·openharmony
钛态3 小时前
Flutter 三方库 http_mock_adapter — 赋能鸿蒙应用开发的高效率网络接口 Mock 与自动化测试注入引擎(适配鸿蒙 HarmonyOS Next ohos)
android·网络协议·flutter·http·华为·中间件·harmonyos
王码码20353 小时前
Flutter for OpenHarmony:Flutter 三方库 algoliasearch 毫秒级云端搜索体验(云原生搜索引擎)
android·前端·git·flutter·搜索引擎·云原生·harmonyos
王码码20353 小时前
Flutter 三方库 dns_client 的鸿蒙化适配指南 - 告别 DNS 劫持、探索 DNS-over-HTTPS (DoH) 技术、构建安全的鸿蒙网络请求环境
flutter·harmonyos·鸿蒙·openharmony·dns_client
键盘鼓手苏苏3 小时前
Flutter 组件 highlighter 适配鸿蒙 HarmonyOS 实战:高性能语法高亮,构建大规模代码分析与文本染色架构
flutter·harmonyos·鸿蒙·openharmony
国医中兴3 小时前
Flutter 三方库 langchain_google 的鸿蒙化适配指南 - 链接 Gemini 智慧中枢、LangChain AI 实战、鸿蒙级智能应用专家
flutter·langchain·harmonyos
左手厨刀右手茼蒿3 小时前
Flutter for OpenHarmony: Flutter 三方库 shamsi_date 助力鸿蒙应用精准适配波斯历法(中东出海必备)
android·flutter·ui·华为·自动化·harmonyos
雷帝木木3 小时前
Flutter 三方库 http_client_interceptor 的鸿蒙化适配指南 - 实现原生 HttpClient 的全量请求拦截、支持端侧动态 Headers 注入与网络流量审计实战
flutter·harmonyos·鸿蒙·openharmony·http_client_interceptor