仪表盘#

Gauge 组件是一个用于显示当前值与指定容量之间关系的视图，类似于汽车上的油表。Gauge 组件可以根据配置，显示当前值、显示范围以及描述该量表目的的标签。适用于展示有限容量内的当前值，如进度、水平或数量。

属性#

value (必选)#

• 类型：number
• 描述：要在量表中显示的当前值。该值应当在 min 和 max 属性指定的范围内。

label (必选)#

• 类型：VirtualNode
• 描述：一个视图元素，描述量表的目的或意义。例如，可以使用此属性显示量表的描述性文字，如“电池电量”或“温度”等。

min (可选)#

• 类型：number
• 描述：量表的最小有效值，默认为 0。表示量表的下限。

max (可选)#

• 类型：number
• 描述：量表的最大有效值，默认为 1。表示量表的上限。

currentValueLabel (可选)#

• 类型：VirtualNode
• 描述：一个视图元素，描述当前量表值。例如，可以在量表旁边显示当前值的文本标签。

minValueLabel (可选)#

• 类型：VirtualNode
• 描述：一个视图元素，描述量表的下限。例如，可以在量表的最小值位置显示“0”或“最小”标签。

maxValueLabel (可选)#

• 类型：VirtualNode
• 描述：一个视图元素，描述量表的上限。例如，可以在量表的最大值位置显示“100”或“最大”标签。

gaugeStyle (可选)#

• 类型：GaugeStyle
• 描述：量表的显示风格。此属性可以控制量表的外观样式，有以下几种可选值：
  • automatic：当前上下文中量表的默认样式。
  • accessoryCircular：显示一个开放的圆环，环上有一个标记，指示量表的当前值。
  • accessoryCircularCapacity：显示一个闭合的圆环，部分填充，表示量表的当前值。
  • circular：仅适用于 watchOS，显示一个开放的圆环，环上有一个标记，指示量表的当前值。
  • linearCapacity：显示一个条形图，随着量表的当前值增加，从左到右填充。
  • accessoryLinear：显示一个条形图，条形上有一个标记，指示量表的当前值。
  • accessoryLinearCapacity：显示一个条形图，随着量表的当前值增加，从左到右填充。
  • linear：仅适用于 watchOS，显示一个条形图，条形上有一个标记，指示量表的当前值。

示例代码#

1<Gauge
2  value={0.7}
3  label={<Text>Battery Level</Text>}
4  min={0}
5  max={1}
6  currentValueLabel={<Text>70%</Text>}
7  minValueLabel={<Text>0%</Text>}
8  maxValueLabel={<Text>100%</Text>}
9  gaugeStyle="accessoryCircular"
10/>

使用场景#

Gauge 组件非常适合以下几种场景：

• 显示进度条（如任务进度、下载进度等）。
• 展示设备状态（如电池电量、信号强度等）。
• 显示性能指标（如温度、湿度、CPU 使用率等）。

通过自定义 label 和 currentValueLabel 等属性，Gauge 组件可以灵活适配不同的显示需求，帮助用户清晰了解当前状态。

注意事项#

• value 属性的值应位于 min 和 max 之间，否则会导致显示异常。
• 如果未传递 min 和 max 属性，量表会默认显示在 [0, 1] 范围内。
• 使用不同的 gaugeStyle 可以显著改变量表的外观。根据设备和使用场景选择适当的样式，以提高用户体验。