Flutter加载提示插件get_loading的使用
Flutter加载提示插件get_loading的使用
在Flutter开发中，加载提示是一个常见的需求。get_loading 是一个基于 get 路由管理库的加载提示插件，提供了多种加载方式，如普通加载框、加载提示框、加载进度条等。本文将通过示例代码展示如何使用 get_loading 插件。
使用方法
方法 1: 使用 GetModuleLoader
首先，你需要初始化插件。可以通过 GetModuleLoader 来加载模块。
GetModuleLoader([
GetLoadingModule(), // 加载加载提示模块
]);方法 2: 单独安装模块
你也可以单独安装模块：
GetLoadingModule().install();基本用法
以下是一些基本的加载提示用法：
显示普通加载框
Get.loading.show(status: '加载中...');隐藏加载框
Get.loading.hide(animation: false);显示加载提示框
Get.loading.toast('加载完成');显示加载成功提示
Get.loading.success('操作成功');显示加载失败提示
Get.loading.error('操作失败');显示加载信息提示
Get.loading.info('加载中...');显示加载进度条
Get.loading.progress(0.75, status: '加载中...');异步任务示例
你可以将异步任务包裹在 Get.loading 中，以便在任务执行时显示加载提示，并在完成后返回结果。
final result = await Get.loading(() async {
await Future.delayed(const Duration(milliseconds: 1000)); // 模拟耗时操作
return 1; // 返回任务结果
});
print(result); // 输出任务结果完整示例代码
以下是一个完整的示例代码，展示了如何使用 get_loading 插件：
import 'package:get/get.dart';
import 'package:get_loading/get_loading.dart';
void main() async {
// 初始化加载提示模块
GetModuleLoader([
GetLoadingModule(),
]);
// 显示普通加载框
Get.loading.show(status: '加载中...');
// 模拟耗时操作
await Future.delayed(const Duration(seconds: 2));
// 隐藏加载框
Get.loading.hide(animation: false);
// 显示加载成功提示
Get.loading.success('加载成功');
// 显示加载失败提示
Get.loading.error('加载失败');
// 显示加载进度条
for (int i = 0; i <= 100; i += 10) {
Get.loading.progress(i / 100, status: '加载中... $i%');
await Future.delayed(const Duration(milliseconds: 200));
}
// 显示加载提示框
Get.loading.toast('加载完成');
// 包裹异步任务
final result = await Get.loading(() async {
await Future.delayed(const Duration(seconds: 1));
return 2;
});
print(result); // 输出任务结果
}更多关于Flutter加载提示插件get_loading的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter加载提示插件get_loading的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
get_loading 是一个基于 GetX 的 Flutter 插件，用于在应用中显示加载提示。它可以帮助你在进行异步操作时显示一个加载动画，并在操作完成后自动隐藏。
安装
首先，你需要在 pubspec.yaml 文件中添加 get_loading 依赖：
dependencies:
flutter:
sdk: flutter
get_loading: ^1.0.0 # 请使用最新版本然后运行 flutter pub get 来安装依赖。
基本用法
- 导入包：在需要使用
get_loading的地方导入包。
import 'package:get_loading/get_loading.dart';- 显示加载提示：你可以在异步操作开始时显示加载提示，操作完成后自动隐藏。
void fetchData() async {
GetLoading.show(); // 显示加载提示
// 模拟一个异步操作
await Future.delayed(Duration(seconds: 2));
GetLoading.dismiss(); // 隐藏加载提示
}- 自定义加载提示：你可以自定义加载提示的样式、文本等。
void fetchData() async {
GetLoading.show(
message: '加载中...', // 自定义提示文本
indicator: CircularProgressIndicator(), // 自定义加载指示器
backgroundColor: Colors.black.withOpacity(0.5), // 自定义背景颜色
);
// 模拟一个异步操作
await Future.delayed(Duration(seconds: 2));
GetLoading.dismiss();
}- 显示成功或失败提示：你还可以在操作完成后显示成功或失败的提示。
void fetchData() async {
GetLoading.show(message: '加载中...');
try {
// 模拟一个异步操作
await Future.delayed(Duration(seconds: 2));
GetLoading.showSuccess('加载成功！'); // 显示成功提示
} catch (e) {
GetLoading.showError('加载失败: $e'); // 显示失败提示
}
}其他功能
- 显示 Toast 提示：
get_loading还支持显示简单的 Toast 提示。
GetLoading.toast('这是一个 Toast 提示');- 显示 SnackBar 提示：你也可以使用
get_loading来显示 SnackBar 提示。
GetLoading.snackbar('标题', '这是一个 SnackBar 提示');