Progress Dialog 开源项目使用教程

最新推荐文章于 2024-08-24 08:08:58 发布

司莹嫣Maude

最新推荐文章于 2024-08-24 08:08:58 发布

阅读量349

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00002/article/details/139790684

版权

Progress Dialog 开源项目使用教程

progress_dialog A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it. 项目地址: https://gitcode.com/gh_mirrors/pr/progress_dialog

1. 项目介绍

Progress Dialog 是一个轻量级的库，旨在帮助开发者轻松管理进度对话框。无论是在下载文件、加载数据还是其他需要显示进度的场景中，Progress Dialog 都能提供简单易用的接口来显示和隐藏进度对话框。该项目支持动态更新对话框内容，并且可以根据需要自定义对话框的样式。

2. 项目快速启动

2.1 安装

首先，在您的 pubspec.yaml 文件中添加 progress_dialog 依赖：

dependencies:
  progress_dialog: ^1.2.4

然后运行 flutter pub get 来安装依赖。

2.2 基本使用

在您的 Dart 文件中导入 progress_dialog 包：

import 'package:progress_dialog/progress_dialog.dart';

在 build 方法中初始化 ProgressDialog 对象：

final ProgressDialog pr = ProgressDialog(context);

显示进度对话框：

await pr.show();

更新进度对话框内容：

pr.update(
  progress: 50.0,
  message: "请稍候...",
  progressWidget: Container(
    padding: EdgeInsets.all(8.0),
    child: CircularProgressIndicator(),
  ),
  maxProgress: 100.0,
  progressTextStyle: TextStyle(
    color: Colors.black,
    fontSize: 13.0,
    fontWeight: FontWeight.w400,
  ),
  messageTextStyle: TextStyle(
    color: Colors.black,
    fontSize: 19.0,
    fontWeight: FontWeight.w600,
  ),
);

隐藏进度对话框：

await pr.hide();

3. 应用案例和最佳实践

3.1 下载文件时的进度显示

在文件下载过程中，可以使用 ProgressDialog 来显示下载进度。以下是一个简单的示例：

Future<void> downloadFile() async {
  final ProgressDialog pr = ProgressDialog(context, type: ProgressDialogType.Download);
  pr.style(
    message: '正在下载文件...',
    progressWidget: CircularProgressIndicator(),
  );

  await pr.show();

  for (int i = 0; i <= 100; i++) {
    await Future.delayed(Duration(milliseconds: 50));
    pr.update(progress: i.toDouble());
  }

  await pr.hide();
}

3.2 加载数据时的进度显示

在加载数据时，可以使用 ProgressDialog 来显示加载进度。以下是一个简单的示例：

Future<void> loadData() async {
  final ProgressDialog pr = ProgressDialog(context, type: ProgressDialogType.Normal);
  pr.style(
    message: '正在加载数据...',
    progressWidget: CircularProgressIndicator(),
  );

  await pr.show();

  // 模拟数据加载过程
  await Future.delayed(Duration(seconds: 3));

  await pr.hide();
}