Flutter水平进度条插件simple_horizontal_bar的使用

Flutter水平进度条插件simple_horizontal_bar的使用

Simple Horizontal Progress Bar

一个为Flutter提供的水平进度条插件，可以轻松有效地可视化数据。

特性

• 以动画条形图的形式展示数据，并带有提示框。
• 支持百分比和原始值显示。
• 可自定义颜色、字体和样式。
• 响应式布局，适用于不同屏幕尺寸。

开始使用

在开始之前，请确保您的项目已配置好Flutter环境。然后按照以下步骤安装并使用该插件。

安装

在项目的pubspec.yaml文件中添加以下依赖项：

dependencies:
  simple_horizontal_bar: ^1.0.0

保存后运行以下命令以获取最新依赖项：

flutter pub get

使用示例

以下是一个简单的示例，演示如何在Flutter应用中使用simple_horizontal_bar插件。

1. 导入插件

首先，在需要使用的dart文件中导入插件：

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

2. 创建一个简单的页面

接下来，创建一个页面并在其中使用SimpleHorizontalBar小部件。

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple Horizontal Bar 示例'),
        ),
        body: Center(
          child: SimpleHorizontalBarExample(),
        ),
      ),
    );
  }
}

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

class _SimpleHorizontalBarExampleState extends State<SimpleHorizontalBarExample> {
  double _value = 0.5; // 进度值，范围从0到1

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 使用SimpleHorizontalBar小部件
        SimpleHorizontalBar(
          value: _value, // 当前进度值
          maxValue: 1, // 最大值
          height: 20, // 条形图的高度
          color: Colors.blue, // 条形图的颜色
          backgroundColor: Colors.grey[200], // 背景颜色
          borderRadius: 10, // 边角半径
          duration: Duration(milliseconds: 500), // 动画持续时间
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _value = _value == 1 ? 0 : _value + 0.1; // 更新进度值
            });
          },
          child: Text('更新进度'),
        ),
      ],
    );
  }
}