Flutter加载指示器插件progress_hud的使用

progress_hud 是一个用于 Flutter 应用程序的简洁且轻量级的加载指示器。它可以帮助开发者在应用中展示加载状态。

官方地址

https://pub.dartlang.org/packages/progress_hud

示例代码

以下是一个完整的示例，展示了如何在 Flutter 中使用 progress_hud 插件。

import 'package:flutter/material.dart';
import 'package:progress_hud/progress_hud.dart'; // 导入 progress_hud 包

void main() => runApp(new MyApp()); // 主函数

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ProgressHUD 示例', // 设置应用标题
      theme: new ThemeData(
        primarySwatch: Colors.blue, // 设置主题颜色
      ),
      home: new MyHomePage(title: 'ProgressHUD 示例'), // 设置主页
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key); // 构造函数

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => new _MyHomePageState(); // 创建状态类
}

class _MyHomePageState extends State<MyHomePage> {
  ProgressHUD _progressHUD; // 定义进度指示器对象
  bool _loading = true; // 控制加载状态的布尔值

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化 ProgressHUD
    _progressHUD = new ProgressHUD(
      backgroundColor: Colors.black12, // 背景颜色
      color: Colors.white, // 文字颜色
      containerColor: Colors.blue, // 加载框背景颜色
      borderRadius: 5.0, // 圆角半径
      text: 'Loading...', // 显示的文字
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义切换加载状态的方法
    void dismissProgressHUD() {
      setState(() {
        if (_loading) {
          _progressHUD.state.dismiss(); // 隐藏加载指示器
        } else {
          _progressHUD.state.show(); // 显示加载指示器
        }
        _loading = !_loading; // 切换状态
      });
    }

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('ProgressHUD 示例'), // 设置标题
      ),
      body: new Stack( // 使用 Stack 布局
        children: <Widget>[
          new Text( // 显示提示文字
            'A clean and lightweight progress HUD for your Flutter app',
          ),
          _progressHUD, // 添加进度指示器
          new Positioned( // 定位按钮
            child: new FlatButton( // 按钮组件
              onPressed: dismissProgressHUD, // 点击事件
              child: new Text(_loading ? "Dismiss" : "Show"), // 动态显示文字
            ),
            bottom: 30.0, // 按钮位置
            right: 10.0,
          )
        ],
      ),
    );
  }
}

更多关于Flutter加载指示器插件progress_hud的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼•12 天前作者

更多关于Flutter加载指示器插件progress_hud的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

progress_hud 是一个用于 Flutter 的加载指示器插件，它可以在应用执行耗时操作时显示一个加载指示器，提升用户体验。以下是如何在 Flutter 项目中使用 progress_hud 插件的步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 progress_hud 依赖：

dependencies:
  flutter:
    sdk: flutter
  progress_hud: ^1.1.0  # 请检查最新版本

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

2. 导入库

在你的 Dart 文件中导入 progress_hud 库：

import 'package:progress_hud/progress_hud.dart';

3. 使用 ProgressHUD

ProgressHUD 是一个覆盖在整个屏幕上的加载指示器。你可以在需要显示加载指示器的地方使用它。

基本用法

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _loading = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ProgressHUD Example'),
      ),
      body: Stack(
        children: <Widget>[
          Center(
            child: ElevatedButton(
              onPressed: () {
                setState(() {
                  _loading = true;
                });

                // 模拟一个耗时操作
                Future.delayed(Duration(seconds: 2), () {
                  setState(() {
                    _loading = false;
                  });
                });
              },
              child: Text('Show Loading'),
            ),
          ),
          if (_loading)
            ProgressHUD(
              backgroundColor: Colors.black26,
              indicatorColor: Colors.white,
            ),
        ],
      ),
    );
  }
}

解释

ProgressHUD 是一个覆盖在屏幕上的加载指示器。
_loading 是一个布尔值，用于控制加载指示器的显示和隐藏。
当按钮被点击时，_loading 被设置为 true，显示加载指示器。
2秒后，_loading 被设置为 false，隐藏加载指示器。

4. 自定义 ProgressHUD

你可以通过以下属性来自定义 ProgressHUD 的外观和行为：

backgroundColor: 背景颜色。
indicatorColor: 加载指示器的颜色。
child: 自定义加载指示器的内容。
barrierDismissible: 是否可以通过点击背景来关闭加载指示器。

ProgressHUD(
  backgroundColor: Colors.black26,
  indicatorColor: Colors.white,
  child: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
  ),
  barrierDismissible: false,
)

5. 其他方法

ProgressHUD 还提供了一些方法来控制加载指示器的显示和隐藏：

show(): 显示加载指示器。
dismiss(): 隐藏加载指示器。

ProgressHUD _progressHUD;

[@override](/user/override)
void initState() {
  super.initState();
  _progressHUD = ProgressHUD(
    backgroundColor: Colors.black26,
    indicatorColor: Colors.white,
  );
}

void _showLoading() {
  _progressHUD.show();
  Future.delayed(Duration(seconds: 2), () {
    _progressHUD.dismiss();
  });
}