Flutter 如何实现 EasyLoadingMixin

在Flutter项目中使用EasyLoadingMixin时遇到问题，具体表现为：混入该Mixin后，加载动画无法正常显示，控制台也没有报错信息。请问正确的实现步骤是什么？是否需要额外配置？我在pubspec.yaml中已添加easy_loading依赖，并按照文档进行了基础封装，但调用showLoading()时界面无反应。能否提供一个完整的示例代码，包括Mixin的声明和使用场景？

2 回复

在 Flutter 中，可通过 EasyLoadingMixin 结合 flutter_easyloading 库实现全局加载提示。步骤如下：

  1. 添加依赖：flutter_easyloading: ^3.0.0
  2. 在 main.dart 中使用 EasyLoading.init() 初始化
  3. 混入 EasyLoadingMixin 到任意 Widget，调用 showLoading() 和 dismiss() 控制显示与隐藏

示例：

class MyWidget extends StatelessWidget with EasyLoadingMixin {
  void fetchData() {
    showLoading();
    // 执行异步操作
    dismiss();
  }
}

更多关于Flutter 如何实现 EasyLoadingMixin的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，EasyLoadingMixin 通常用于简化加载状态的管理，结合 easy_loading 库实现全局加载指示器。以下是实现步骤：

  1. 添加依赖
    在 pubspec.yaml 中添加：

    dependencies:
  flutter_easyloading: ^3.0.0

  2. 初始化与配置
    在 main.dart 中配置 EasyLoading：

    void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      builder: EasyLoading.init(), // 初始化全局加载器
    );
  }
}

  3. 创建 Mixin
    定义 EasyLoadingMixin 以封装加载状态逻辑：

    import 'package:flutter_easyloading/flutter_easyloading.dart';

mixin EasyLoadingMixin {
  Future<void> showLoading([String? text]) async {
    await EasyLoading.show(status: text ?? 'Loading...');
  }

  Future<void> hideLoading() async {
    await EasyLoading.dismiss();
  }

  Future<T> runWithLoading<T>(Future<T> Function() task, {String? message}) async {
    showLoading(message);
    try {
      final result = await task();
      await hideLoading();
      return result;
    } catch (e) {
      await hideLoading();
      rethrow;
    }
  }
}

  4. 在页面中使用
    通过 with 关键字混入功能：

    class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with EasyLoadingMixin {
  Future<void> fetchData() async {
    await runWithLoading(() async {
      await Future.delayed(Duration(seconds: 2)); // 模拟网络请求
      print('Data loaded');
    }, message: 'Fetching...');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: fetchData,
          child: Text('Load Data'),
        ),
      ),
    );
  }
}

说明：

  • EasyLoadingMixin 提供了 showLoading、hideLoading 和 runWithLoading 方法，自动处理加载状态的显示与隐藏。
  • 使用 runWithLoading 可简化异步操作中的加载管理，避免手动调用显示/隐藏。

通过此混入，可高效统一处理加载状态，提升代码复用性。

回到顶部