Flutter仪表盘插件syncfusion_flutter_gauges的使用

介绍

syncfusion_flutter_gauges 是一个功能丰富的Flutter库，提供了线性仪表（Linear Gauge）和径向仪表（Radial Gauge，也称圆形仪表）的数据可视化组件。这些组件具有交互性和动画效果，并且高度可定制。

注意: 这是一个商业包。要使用此包，您需要拥有 Syncfusion^® 商业许可证或 免费的Syncfusion^®社区许可证。有关更多详情，请参阅LICENSE文件。

功能概述

线性仪表特性

• 方向：可以设置为垂直或水平。
• 轴：用于绘制数值的刻度，支持自定义厚度和边缘样式。
• 标签和刻度：可以自定义标签、主要刻度和次要刻度的样式。
• 范围：添加不同样式的多个范围以快速可视化数据。
• 指针：包括形状标记指针、小部件标记指针和条形指针，所有指针都可以根据需要进行自定义。
• 交互：支持通过滑动或拖拽手势移动指针。
• 动画：加载或值变化时对元素进行动画处理。

径向仪表特性

• 轴：基于设计需求显示在圆弧上的数值集合，支持自定义标签、刻度和轴线。
• 范围：帮助快速可视化数值所在的区域，并可以在范围内添加文本以提高可读性。
• 指针：包含针形指针、标记指针、范围指针和小部件指针，所有指针均可自定义。
• 动画：当指针从一个值移动到另一个值时提供视觉吸引力的动画效果。
• 交互：允许运行时通过拖拽改变值，并显示覆盖层。
• 注释：在特定位置添加文本或图像等小部件作为注释。

安装与入门

安装

确保您的pubspec.yaml文件中包含以下依赖项：

dependencies:
  syncfusion_flutter_gauges: ^最新版本号

然后执行 flutter pub get 来安装它。

使用示例

添加线性仪表到Widget树中

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

class LinearGaugeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: SfLinearGauge(),
          ),
        ),
      ),
    );
  }
}

添加线性仪表元素

class EnhancedLinearGaugeExample extends StatefulWidget {
  @override
  _EnhancedLinearGaugeExampleState createState() => _EnhancedLinearGaugeExampleState();
}

class _EnhancedLinearGaugeExampleState extends State<EnhancedLinearGaugeExample> {
  double _pointerValue = 45;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: SfLinearGauge(
              ranges: [
                LinearGaugeRange(startValue: 0, endValue: 50),
              ],
              markerPointers: [
                LinearShapePointer(value: 50),
              ],
              barPointers: [LinearBarPointer(value: 80)],
            ),
          ),
        ),
      ),
    );
  }
}

添加径向仪表到Widget树中

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

class RadialGaugeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: SfRadialGauge(),
          ),
        ),
      ),
    );
  }
}

添加径向仪表元素

class EnhancedRadialGaugeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: SfRadialGauge(
              axes: <RadialAxis>[
                RadialAxis(
                  minimum: 0,
                  maximum: 150,
                  ranges: <GaugeRange>[
                    GaugeRange(startValue: 0, endValue: 50, color: Colors.green),
                    GaugeRange(startValue: 50, endValue: 100, color: Colors.orange),
                    GaugeRange(startValue: 100, endValue: 150, color: Colors.red),
                  ],
                  pointers: <GaugePointer>[
                    NeedlePointer(value: 90),
                  ],
                  annotations: <GaugeAnnotation>[
                    GaugeAnnotation(
                      widget: Container(
                        child: Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
                      ),
                      angle: 90,
                      positionFactor: 0.5,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何创建基本的线性和径向仪表，并为其添加一些常见的元素如范围、指针和注释。您可以根据自己的需求进一步调整和扩展这些例子中的配置选项。