跳至主要内容

NumberField

在 ChatGPT 中打开
阴影 dwc-field 23.02
Java API

NumberField组件接受数字输入，并自动拒绝无效值。它支持最小和最大范围、步长间隔以及占位符文本。

使用NumberField​

Inheritance

This class is a Field component, and inherits its features and behaviors. For an overview of Field properties, events, and other important information, please refer to the Field documentation.

NumberField扩展了共享的Field类，提供了所有字段组件的共同特性。以下示例创建了一个带有标签和占位符文本的NumberField。

显示代码

字段值​

NumberField组件将其值存储为Double，可以准确处理整数和小数。

获取当前值​

您可以使用以下方法检索用户输入的数字值：

Double currentValue = numberField.getValue();

设置新值​

要以编程方式设置字段：

numberField.setValue(42.5);

如果未输入值且未设置默认值，getValue()将返回null。

提示

虽然该字段设计用于仅接受有效数字输入，但请记住，底层值是可空的。在使用结果之前，请始终检查是否为null。

用法​

NumberField最适合用于捕获、显示或操作数字数据对您的应用至关重要的场景。以下是使用NumberField的一些示例：

  1. 数字输入表单：在设计需要数字输入的表单时，使用NumberField简化了用户的输入过程。这对于收集用户数据或需要数值的应用程序特别有用。

  2. 数据分析和计算：在涉及数据分析、计算或数学操作的应用中，NumberField尤其有价值。它允许用户准确输入或操控数字值。

  3. 财务和预算应用：涉及财务计算、预算或跟踪开支的应用程序通常需要精确的数字输入。NumberField确保财务数字的准确输入。

  4. 度量和单位转换：在处理测量或单位转换的应用中，NumberField非常适合输入带有单位的数字值，例如长度、重量或体积。

最小和最大值​

使用setMin()方法，您可以指定数字字段中可接受的最小值。如果用户输入的值低于此阈值，组件将无法通过约束验证，并提供适当的反馈。

NumberField numberField = new NumberField();
numberField.setMin(0.0); // 最小允许值: 0.0

单独使用setMax()方法可以定义最大可接受值。如果用户输入的值高于此限制，输入将被拒绝。当设置了最小值和最大值时，最大值必须大于或等于最小值。

numberField.setMax(100.0); // 最大允许值: 100.0

在此配置中，输入 -5 或 150 等值将无效，而接受在 0 到 100 之间的值。

粗细​

您可以使用setStep()方法指定在使用箭头键修改值时值必须遵循的粗细程度。每次按下箭头键时，组件的值将增减一定的步长。这不适用于用户直接输入的值，而仅适用于与NumberField进行交互时使用箭头键。

占位符文本​

您可以使用setPlaceholder()方法为NumberField设置占位符文本。当字段为空时，会显示占位符文本，帮助提示用户输入适当的内容。

提供清晰的上下文以确保准确性

如果数值输入与特定的测量单位相关或具有特定的上下文，请提供清晰的标签或额外信息以引导用户，确保准确输入。

最佳实践​

为确保无缝集成和最佳用户体验，在使用NumberField时请考虑以下最佳实践：

  • 可访问性：在设计时考虑可访问性，遵循可访问性标准，如适当的标签、键盘导航支持和与辅助技术的兼容性。确保残疾人士能够有效与NumberField进行交互。

  • 利用增减按钮：如果适合您的应用，考虑为NumberField增设增减按钮。这使用户能够通过单击特定的增量或减量来调整数字值。