Flutter延迟进度指示器插件delayed_progress_indicator的使用

Flutter延迟进度指示器插件delayed_progress_indicator的使用

特性

  • 一个在延迟后显示的进度指示器（默认延迟2秒）
  • 可以自定义加载指示器
  • 可以自定义延迟时间

使用方法

首先，确保你已经在项目的pubspec.yaml文件中添加了delayed_progress_indicator依赖。例如：

dependencies:
  delayed_progress_indicator: ^1.0.0

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

接下来，你可以按照以下方式使用DelayedProgressIndicator插件：

import 'package:flutter/material.dart';
import 'package:delayed_progress_indicator/delayed_progress_indicator.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('延迟进度指示器示例'),
        ),
        body: Center(
          child: DelayedProgressIndicator(),
        ),
      ),
    );
  }
}

自定义延迟时间

如果你想自定义延迟时间，可以使用delay参数。例如，将延迟时间设置为5秒：

DelayedProgressIndicator(
  delay: Duration(seconds: 5),
);

自定义加载指示器

你还可以自定义加载指示器。假设你有一个名为MyCustomIndicator的自定义指示器类，你可以这样使用：

class MyCustomIndicator extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
    );
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自定义加载指示器示例'),
        ),
        body: Center(
          child: DelayedProgressIndicator(
            loader: MyCustomIndicator(),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter延迟进度指示器插件delayed_progress_indicator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


delayed_progress_indicator 是一个 Flutter 插件，用于在加载数据时显示一个延迟的进度指示器。它可以帮助你在数据加载时提供更好的用户体验，避免在数据加载非常快时频繁地显示和隐藏进度指示器。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  delayed_progress_indicator: ^1.0.0

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

使用 DelayedProgressIndicator

DelayedProgressIndicator 是一个简单的 widget，它会在指定的延迟时间后显示一个进度指示器。如果在延迟时间内数据加载完成，进度指示器将不会显示。

基本用法

import 'package:flutter/material.dart';
import 'package:delayed_progress_indicator/delayed_progress_indicator.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  Future<void> _loadData() async {
    setState(() {
      _isLoading = true;
    });

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

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Delayed Progress Indicator Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (_isLoading)
              DelayedProgressIndicator(
                delay: Duration(seconds: 1), // 延迟1秒显示进度指示器
              ),
            ElevatedButton(
              onPressed: _isLoading ? null : _loadData,
              child: Text('Load Data'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyHomePage(),
));

参数说明

  • delay: 延迟时间，表示在多长时间后显示进度指示器。默认值为 Duration(seconds: 1)。
  • progressIndicator: 自定义的进度指示器。如果不提供，默认使用 CircularProgressIndicator。
  • size: 进度指示器的大小。默认值为 36.0。
  • color: 进度指示器的颜色。默认值为 Colors.blue。

自定义进度指示器

你可以通过 progressIndicator 参数来自定义进度指示器：

DelayedProgressIndicator(
  delay: Duration(seconds: 1),
  progressIndicator: LinearProgressIndicator(
    backgroundColor: Colors.grey,
    valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  ),
)
回到顶部