Flutter仪表盘显示插件gauges的使用

Flutter仪表盘显示插件gauges的使用

注意: 本项目旨在通过构建自定义的Widget、Element和RenderObject来帮助我更好地理解Flutter的工作原理。因此，API可能会频繁变动，并且对于许多问题可能没有最佳实践或最优解决方案。如果你有任何改进建议，请随时提交一个issue。

开始使用

要使用此插件，请在你的pubspec.yaml文件中添加flutter_gauges作为依赖项。

dependencies:
  flutter_gauges: ^x.y.z

使用方法

环形仪表盘

环形仪表盘的基本组件是RadialGauge。你可以添加多个axes（轴）。例如，下面是一个具有三个轴的仪表盘：

这是RadialGauge的基本结构。接下来的部分将详细介绍每个组件。

RadialGauge(
  axes: [
    RadialGaugeAxis(
        segments: [
            RadialGaugeSegment(),
            RadialGaugeSegment(),
            // ...
        ],
        pointers: [
            RadialNeedlePointer(),
            RadialNeedlePointer(),
            // ...
        ],
        ticks: [
            RadialTicks(
                children: [
                    RadialTick(),
                    RadialTick(),
                ],
            ),
            RadialTick(),
            // ...
    ),
    RadialGaugeAxis(
    ),
  ],
)

轴

轴具有一些重要的属性：

• min: 轴的最小值。
• max: 轴的最大值。
• minAngle: 最小值映射到的角度（度）。
• maxAngle: 最大值映射到的角度（度）。
• radius: 轴的半径，以仪表盘大小为单位。
• width: 轴的宽度，以仪表盘大小为单位。
• offset: 轴相对于仪表盘中心的偏移量。
• color: 轴的颜色（支持渐变）。

以下是一个示例：

RadialGauge(
  axes: [
    RadialGaugeAxis(
      minValue: -100,
      maxValue: 100,
      minAngle: -150,
      maxAngle: 150,
      radius: 0.6,
      width: 0.2,
    ),
  ],
)

段

每个轴可以由多个段组成。每个段具有与轴类似的属性。段在轴的segments属性中列出：

RadialGauge(
  axes: [
    RadialGaugeAxis(
      color: Colors.transparent,
      // ...
      segments: [
        RadialGaugeSegment(
          minValue: 0, 
          maxValue: 20, 
          minAngle: -150, 
          maxAngle: -130,
          color: Colors.red,
        ),
        RadialGaugeSegment(
          minValue: 20, 
          maxValue: 40, 
          minAngle: -120, 
          maxAngle: -90,
          color: Colors.orange,
        ),
          // ...
      ],
    ),
  ],
)

刻度

每个轴可以有多个刻度，类型为RadialTick。刻度在轴的ticks属性中列出。创建刻度的方法有多种：

• 间隔: 设置间隔为所需的值。刻度会出现在每个整数倍的间隔上。
• 刻度之间: 设置ticksInBetween为所需数量的刻度，位于父刻度或轴的限制之间。
• 自定义值: 设置values为所需的值，使刻度出现在这些位置。
• 自定义生成器: 设置valuesBuilder和/或anglesBuilder为计算刻度应显示的值和/或角度的自定义函数。

每个RadialTick可以有RadialTicks作为子元素，当设置子刻度的ticksInBetween时特别有用。

RadialGaugeAxis(
  // ...
  color: Colors.transparent,
  ticks: [
    RadialTicks(
        interval: 20,
        alignment: RadialTickAxisAlignment.inside,
        color: Colors.blue,
        length: 0.2,
        children: [
          RadialTicks(
              ticksInBetween: 5,
              length: 0.1,
              color: Colors.grey[500]),
        ])
  ],
)

指针

每个轴可以有多个指针。目前，只有一种类型的指针可用，即RadialNeedlePointer，具有以下属性：

• value: 指针指向的值。
• ticknessStart: 指针开始处的厚度（在轴的中间）。
• ticknessEnd: 指针结束处的厚度。
• length: 指针的长度，以轴的大小为单位。
• knobRadiusAbsolute: 指针旋钮的绝对半径（以像素为单位）。
• color/gradient: 指针填充的颜色/渐变。

以下代码示例展示了一个指针：

RadialGaugeAxis(
    pointers: [
        RadialNeedlePointer(
            value: _pointerValue,
            thicknessStart: 20,
            thicknessEnd: 0,
            length: 0.6,
            knobRadiusAbsolute: 10,
            gradient: LinearGradient(...),
        )
    ],
)

维护者

Julian Aßmann

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gauges Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  double _pointerValue = 50;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gauges Demo'),
      ),
      body: Center(
        child: RadialGauge(
          axes: [
            RadialGaugeAxis(
              minValue: 0,
              maxValue: 100,
              minAngle: -150,
              maxAngle: 150,
              radius: 0.8,
              width: 0.2,
              color: Colors.grey,
              segments: [
                RadialGaugeSegment(
                  minValue: 0,
                  maxValue: 25,
                  minAngle: -150,
                  maxAngle: -120,
                  color: Colors.green,
                ),
                RadialGaugeSegment(
                  minValue: 25,
                  maxValue: 75,
                  minAngle: -120,
                  maxAngle: -60,
                  color: Colors.yellow,
                ),
                RadialGaugeSegment(
                  minValue: 75,
                  maxValue: 100,
                  minAngle: -60,
                  maxAngle: 0,
                  color: Colors.red,
                ),
              ],
              ticks: [
                RadialTicks(
                  interval: 25,
                  color: Colors.black,
                  length: 0.1,
                ),
              ],
              pointers: [
                RadialNeedlePointer(
                  value: _pointerValue,
                  thicknessStart: 20,
                  thicknessEnd: 0,
                  length: 0.6,
                  knobRadiusAbsolute: 10,
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.blue, Colors.indigo],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}