Flutter圆形进度指示器插件pie_progress_indicator的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter圆形进度指示器插件pie_progress_indicator的使用

pie_progress_indicator 包为您的 Flutter 应用程序提供了一个可定制且灵活的 Cupertino 风格的圆形进度指示器。设计时注重简单性和极小依赖性，此组件可以作为 CircularProgressIndicator 的替代品，允许无缝过渡并增强视觉效果。

功能

  • Cupertino 风格设计

    • 模仿 iOS 中的饼图进度指示器，适用于遵循 Cupertino 设计指南的应用。

  • 直接替换

    • 可以轻松地替换 CircularProgressIndicator 而无需额外调整。

  • 高度可定制

    • 可以调整进度段的颜色、边框宽度和背景颜色。
    • 控制进度段和周围圆圈的大小和厚度。

  • 简洁和轻量级

    • 注重简单易用和轻量级，确保应用保持高效和快速。

  • 无障碍支持

    • 提供语义标签和值选项以提高无障碍性。

使用方法

基本用法

使用 PieProgressIndicator 很简单。你可以仅使用 value 和 color 参数创建一个指示器，也可以根据需要添加更多选项。你还可以直接在代码中将 CircularProgressIndicator 替换为 PieProgressIndicator。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: PieProgressIndicator(
            value: 0.15, // 进度值，范围从 0.0 到 1.0。
            // color: Colors.grey.withOpacity(0.5), // 进度段的颜色，带 50% 透明度。
            // strokeColor: Colors.black, // 周围圆圈的颜色。如果没有提供，则默认为 color 参数。
            // strokeWidth: 8.0, // 周围圆圈的厚度。如果没有提供，默认为 size 参数的 16%。
            // backgroundColor: Colors.white, // 进度指示器背后的背景色。
            // valueColor: AlwaysStoppedAnimation<Color>(Colors.blue), // 进度颜色的可选动画。
            // semanticsLabel: 'Loading progress', // 屏幕阅读器描述进度指示器的标签。
            // semanticsValue: '15%', // 当前进度的屏幕阅读器值描述。
            // size: 100.0, // 进度指示器的大小。如果没有提供，默认为最小 36.0 dp。
            // valueStrokeFactor: 0.5, // 确定进度段相对于周围圆圈的厚度因子。
            // backgroundStrokeFactor: 0.5, // 确定背景相对于周围圆圈的厚度因子。
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用pie_progress_indicator插件来创建一个圆形进度指示器的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  pie_progress_indicator: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的Flutter项目中创建一个圆形进度指示器。下面是一个完整的示例代码，展示了如何使用PieProgressIndicator：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pie Progress Indicator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Pie Progress Indicator Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              PieProgressIndicator(
                percent: 0.75,  // 设置进度百分比，范围为0到1
                radius: 150.0,  // 设置圆圈的半径
                lineWidth: 25.0,  // 设置进度条的宽度
                backgroundColor: Colors.grey[200]!,  // 设置背景颜色
                progressColor: Colors.blue,  // 设置进度颜色
                center: Text(
                  '75%',
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ), // 设置中心显示的文本
                footer: Text(
                  'Completed',
                  style: TextStyle(fontSize: 14, color: Colors.grey),
                ), // 设置底部显示的文本
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 这里你可以添加一些逻辑来动态改变进度
                  // 例如，使用setState来更新一个状态变量，然后将其传递给PieProgressIndicator的percent参数
                },
                child: Text('Change Progress'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个PieProgressIndicator组件。我们设置了进度百分比（percent）、圆圈半径（radius）、进度条宽度（lineWidth）、背景颜色（backgroundColor）和进度颜色（progressColor）。此外，我们还添加了中心显示的文本（center）和底部显示的文本（footer）。

请注意，为了动态更改进度，你可以在MyApp类中定义一个状态变量，并在按钮点击事件中更新该变量。然后，你可以将该变量传递给PieProgressIndicator的percent参数。这需要使用StatefulWidget和setState方法。

希望这个示例能帮助你理解如何在Flutter项目中使用pie_progress_indicator插件来创建圆形进度指示器。

回到顶部