Flutter Gauges 库
Flutter Gauges 库包含用于创建现代、交互式、动画仪表的可视化小部件：线性仪表（Linear Gauge）和径向仪表（Radial Gauge，也称为圆形仪表）。
概述
线性仪表用于在条形刻度上显示数据，而径向仪表用于在圆形刻度上显示数据。两种仪表都具有丰富的功能，例如轴、范围、指针、平滑交互和动画，这些功能都可完全自定义和扩展。
免责声明：这是一个商业软件包。要使用此软件包，您需要拥有 Syncfusion 商业许可证或 免费 Syncfusion 社区许可证。有关更多详细信息，请查看 许可证 文件。
目录
线性仪表功能
-
方向 – 线性仪表可以设置为垂直或水平方向。
-
轴 – 线性仪表轴是用于绘制一组值的刻度。可以通过更改厚度和边缘样式来定制轴。您也可以反转轴。
-
标签和刻度线 – 线性仪表轴元素，如标签、主刻度线和次刻度线，可以定制为不同的样式。
-
范围 – 范围是一个视觉元素，可帮助您快速可视化范围在轴轨道上的位置。可以将具有不同样式的多个范围添加到线性仪表中。
- 指针 – 指针用于指示轴上的特定值。该小部件有三种类型的指针：形状标记指针、小部件标记指针和条形指针。所有指针都可以根据需要进行自定义。您可以在线性仪表中添加多个指针。
- 指针交互 – 线性仪表中的形状和小部件标记指针可以通过滑动或拖动的手势从一个值移动到另一个值。
-
拖动行为 – 当线性仪表有多个指针时，提供了一个选项来更改标记指针的拖动行为。可用的拖动行为是
free（自由）和constraint（约束）。 -
动画 – 所有仪表元素都可以以具有视觉吸引力的方式进行动画处理。在加载时或值更改时为仪表元素设置动画。
径向仪表功能
-
轴 – 径向仪表轴是一个圆弧，根据设计需求，Along a linear or custom scale along which a set of values are displayed。轴元素，例如标签、刻度线和轴线，可以使用内置属性轻松自定义。
-
范围 – 仪表范围是一个视觉元素，有助于快速可视化轴上的值。文本可以轻松地在范围内注释，以提高可读性。
-
指针 – 指针用于指示轴上的值。它有四种类型的指针：指针、标记指针、范围指针和小部件指针。所有指针都可以根据需要进行自定义。
-
动画 – 当指针从一个值移动到另一个值时，以具有视觉吸引力的方式为指针设置动画。仪表支持各种指针动画。还可以为仪表应用初始加载动画。
-
指针交互 – 径向仪表提供了一个选项，可以将指针从一个值拖动到另一个值，并在拖动时显示叠加层。它用于在运行时更改值。
-
注释 – 在径向仪表中的特定兴趣点添加多个小部件，如文本和图像，作为注释。
获取演示应用程序
通过从以下应用商店安装我们的示例浏览器应用程序，并在 GitHub 上查看示例代码，探索我们的 Flutter 小部件的全部功能。
其他有用链接
请参考以下内容，了解有关 Syncfusion Flutter 仪表的更多信息
安装
从 pub 安装最新版本。
入门
导入以下包。
import 'package:syncfusion_flutter_gauges/gauges.dart';
将线性仪表添加到小部件树
将线性仪表小部件添加为任何小部件的子项。此处，仪表小部件被添加为容器小部件的子项。
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: SfLinearGauge()
))),
);
}
添加线性仪表元素
添加仪表元素，如轴、范围和指针，以指示当前值。
class _DemoAppState extends State<DemoApp> {
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)],
),
))),
);
}
}
以下屏幕截图说明了上述代码示例的结果。
将径向仪表添加到小部件树
将径向仪表小部件添加为任何小部件的子项。此处，仪表小部件被添加为容器小部件的子项。
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: SfRadialGauge()
))),
);
}
添加径向仪表元素
添加仪表元素，如轴、范围、指针和注释，以显示不同的颜色范围，添加指针以指示当前值，并添加注释以显示当前值。
@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
)]
)])
))),
);
}
以下屏幕截图说明了上述代码示例的结果。
支持与反馈
- 如有任何其他疑问，请联系我们的 Syncfusion 支持团队 或通过 社区论坛 提问，并通过我们的 反馈门户 提交功能请求或错误。
- 要续订订阅，请点击 续订 或通过 [email protected] | 免费电话：1-888-9 DOTNET 联系我们的销售团队。
关于 Syncfusion
Syncfusion 成立于 2001 年，总部位于北卡罗来纳州的研究三角园区，拥有超过 20,000 名客户和超过 100 万用户，其中包括大型金融机构、财富 500 强公司和全球 IT 咨询公司。
如今，我们为 Web（ASP.NET Core、ASP.NET MVC、ASP.NET WebForms、JavaScript、Angular、React、Vue 和 Blazor）、移动（Xamarin、.NET MAUI、Flutter、UWP 和 JavaScript）和桌面开发（WinForms、WPF、UWP、.NET MAUI 和 WinUI）提供 1,000 多个控件和框架。我们为仪表板、报告、数据集成和大数据处理提供现成的企业软件。许多客户通过部署我们的软件节省了数百万的许可证费用。
