Flutter进度条显示插件sa_progress_bar的使用

Flutter进度条显示插件sa_progress_bar的使用

SaProgressBar

一个简单的进度条控制器。

截图

Progressbar

如何使用

SaProgressBar(
  controller: _controller,
  onMoved: (value) {
    print('onMove: $value');
  },
  onTap: (value) {
    print('onTap: $value');
  },
)

ProgressController: 负责在主流和缓冲流上控制进度。

请检查 controller.moveTo() 和 controller.moveBufferTo() 方法。

onMoved: 拖动指示器时的回调函数。

onTap: 用户点击进度条时的回调函数（这可以让指示器跳转到指定位置）。

完整示例

以下是一个完整的示例代码，展示了如何使用 sa_progress_bar 插件。

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 定义进度值
  double progress = 0.0;

  // 创建进度控制器
  final ProgressController _controller = ProgressController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("SaProgressBar 示例"),
        ),
        body: Container(
          height: 45,
          padding: EdgeInsets.symmetric(horizontal: 45),
          child: SaProgressBar(
            controller: _controller,
            onMoved: (value) {
              // 打印拖动时的进度值
              print('onMove: $value');
            },
            onTap: (value) {
              // 打印点击时的进度值
              print('onTap: $value');
            },
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


sa_progress_bar 是一个用于在 Flutter 应用中显示进度条的插件。它提供了多种样式和自定义选项，使你能够轻松地在应用中展示进度信息。下面是如何使用 sa_progress_bar 插件的基本指南。

1. 安装插件

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

dependencies:
  flutter:
    sdk: flutter
  sa_progress_bar: ^版本号

然后运行 flutter pub get 来安装插件。

2. 基本使用

在 Dart 文件中导入 sa_progress_bar 并使用 SAProgressBar 组件来显示进度条。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SAProgressBar Example'),
        ),
        body: Center(
          child: SAProgressBar(
            value: 0.5, // 当前进度值（0.0 到 1.0）
            backgroundColor: Colors.grey[300],
            valueColor: Colors.blue,
            height: 10.0,
          ),
        ),
      ),
    );
  }
}

3. 参数说明

SAProgressBar 支持以下参数：

  • value: 当前进度值，范围是 0.0 到 1.0。
  • backgroundColor: 进度条的背景颜色。
  • valueColor: 进度条的值颜色，即当前进度的颜色。
  • height: 进度条的高度。
  • borderRadius: 进度条的圆角半径。
  • animationDuration: 进度条动画的持续时间。
  • orientation: 进度条的方向，可以是 Axis.horizontal 或 Axis.vertical。

4. 自定义样式

你可以通过调整上述参数来自定义进度条的样式。例如，你可以设置不同的颜色、高度和圆角：

SAProgressBar(
  value: 0.75,
  backgroundColor: Colors.grey[200],
  valueColor: Colors.green,
  height: 15.0,
  borderRadius: BorderRadius.circular(10.0),
  animationDuration: Duration(milliseconds: 500),
)

5. 控制进度

你可以通过动态改变 value 的值来控制进度条的进度。例如，可以使用 setState 来更新进度：

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

class _ProgressExampleState extends State<ProgressExample> {
  double _progress = 0.0;

  void _incrementProgress() {
    setState(() {
      _progress += 0.1;
      if (_progress > 1.0) _progress = 0.0;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Controlled Progress'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SAProgressBar(
              value: _progress,
              backgroundColor: Colors.grey[300],
              valueColor: Colors.blue,
              height: 10.0,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementProgress,
              child: Text('Increase Progress'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部