3.5.2.1.41. 滑动条

在线示例

Slider 是一个竖直或水平的条。通过鼠标拖拽条上的小控件可以为其设定某个范围内的一个数值。拖拽小控件同时也会显示值的大小。

该组件的 XML 名称： slider

滑动条的默认数据类型是 double。可以用组件的 datatype 属性设置其数据类型，比如 int、long、double 和 decimal，支持在 XML 描述中或者使用 API 设置。

用 dataContainer 和 property 属性可以创建数据关联的滑动条。此时，数据类型由 property 指定的实体属性决定。

下面例子中，滑动条的数据类型设置为 Order 实体的 amount 数据类型。

<data>
    <instance id="orderDc" class="com.company.sales.entity.Order" view="_local">
        <loader/>
    </instance>
</data>
<layout>
    <slider dataContainer="orderDc" property="amount"/>
</layout>

滑动条组件有下列特殊属性：

• max - 滑动条数值范围的最大值，默认 100。

• min - 滑动条数值范围的最小值，默认 0。

• resolution - 小数点后数字的位数。默认值 0。

• orientation - 滑动条竖直还是水平。默认值 horizontal - 水平。

• updateValueOnClick - 如果设置为 true，可以通过点击滑动条设置值。默认值 false。

这个例子中滑动条竖直放置，使用整数类型，数值范围从 2 到 20。

<slider id="slider"
        orientation="vertical"
        datatype="int"
        min="2"
        max="20"/>

值可以通过 getValue() 方法获取，setValue() 方法设置。

如需跟踪滑动条值的变化，或者其他实现了 Field 接口的组件值的变化，使用 ValueChangeListener 监听器并订阅对应事件。 下面例子中，如果 Slider 的值发生变化，则将其值写入 TextField。

@Inject
private TextField<Integer> textField;
@Subscribe("slider")
private void onSliderValueChange(HasValue.ValueChangeEvent<Integer> event) {
  textField.setValue(event.getValue());
}

slider 属性

align - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datasource - datatype - description - descriptionAsHtml - enable - box.expandRatio - height - icon - id - max - min - orientation - property - requiredMessage - resolution - responsive - required - rowspan - stylename - updateValueOnClick - visible - width

API

setContextHelpText - addValueChangeListener