ESpinBox 数值调节

import EUI 1.0

示例与代码

数值调节

QML 代码QML

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

数值调节

QML 代码QML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Flow {
    spacing: 24
    width: parent.width

Column {
        spacing: 10
        width: Math.min(parent.width, 220)

EText {
            font.bold: true
            text: qsTr("默认")
            font.pixelSize: 14
        }
        ESpinBox {
            to: 10
            from: 0
            value: 2
            width: parent.width
        }
        ETag {
            text: "0 – 10"
            effect: "plain"
            styleType: EStyle.Info
        }
    }
    Column {
        spacing: 10
        width: Math.min(parent.width, 220)

EText {
            font.bold: true
            font.pixelSize: 14
            text: qsTr("输入") + " · ±2"
        }
        ESpinBox {
            to: 20
            value: 0
            from: -20
            stepSize: 2
            editable: true
            width: parent.width
        }
        ETag {
            effect: "plain"
            text: "−20 – 20"
            styleType: EStyle.Info
        }
    }
    Column {
        spacing: 10
        width: Math.min(parent.width, 220)

EText {
            font.bold: true
            text: qsTr("校验")
            font.pixelSize: 14
        }
        ESpinBox {
            id: validationSpinBox

from: 0
            to: 100
            value: 20
            stepSize: 5
            iconSize: 18
            editable: true
            indicatorWidth: 42
            size: EStyle.Large
            indicatorHeight: 38
            selectByMouse: true
            width: parent.width
            incIcon: EIcons.PLUS
            decIcon: EIcons.MINUS
            styleType: EStyle.Warning
            validationMessage: qsTr("请检查数值")
            validationState: EValidationState.Warning
            textColor: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Warning)
        }
        ETag {
            text: validationSpinBox.validationMessage
            styleType: validationSpinBox.hasValidationError ? EStyle.Danger : EStyle.Warning
        }
    }
}

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

属性

属性说明取值与默认值

alignstring

输入数字的水平对齐方式。

"left" / "center"
"right"

默认值"center"

controlsbool

是否显示数值增减按钮。

默认值true

controlsPositionstring

增减按钮相对于输入框的位置。

"both" / "right"

默认值"both"

decIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值controlsPosition === "right" ? EIcons.CHEVRON_DOWN : EIcons.MINUS

disabledScientificbool

拒绝科学计数法输入。

默认值false

enabledbool

是否允许交互；false 时控件禁用。

默认值true

formattervar

格式化回调，把当前值转换为显示文字。

默认值null

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

iconSizeint

图标、选项或交互部件的尺寸，单位为像素。

默认值动态绑定

incIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值controlsPosition === "right" ? EIcons.CHEVRON_UP : EIcons.PLUS

indicatorHeightint

图标、选项或交互部件的尺寸，单位为像素。

默认值动态绑定

indicatorWidthint

图标、选项或交互部件的尺寸，单位为像素。

默认值动态绑定

numberFromreal

数值范围的下限或上限。

默认值0

numberStepreal

数值输入每次增加或减少的步长。

默认值1

numberToreal

数值范围的下限或上限。

默认值100

numberValuevar

数值输入当前的实际数值。

默认值0

parservar

输入解析函数，把显示文字转换为底层值。

默认值null

placeholderTextstring

空值时显示的占位文字。

默认值""

precisionint

保留的小数位数。

默认值0

prefixstring

前缀或后缀文字；Mention 的 prefix 为触发字符或字符数组。

默认值""

prefixComponentComponent

自定义前缀的 Component 插槽；null 使用默认内容。委托上下文见本页示例。

默认值null

readOnlybool

禁止用户编辑或评分，仍可通过属性设置值。

默认值false

selectByMousebool

允许用鼠标选择文本。

默认值false

sizeint

控件尺寸；默认继承最近的 EConfigProvider。

EStyle.Small
EStyle.Medium
EStyle.Large

默认值继承 Provider，默认 EStyle.Medium

stepStrictlybool

使数值按步长的整数倍变化。

默认值false

styleTypeint

语义配色风格。

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

默认值EStyle.Default

suffixstring

前缀或后缀文字；Mention 的 prefix 为触发字符或字符数组。

默认值""

suffixComponentComponent

自定义后缀的 Component 插槽；null 使用默认内容。委托上下文见本页示例。

默认值null

textColorcolor

文字颜色。

默认值动态绑定

validateEventbool

值变化时是否向所属表单派发校验请求。

默认值true

validationMessagestring

校验结果说明或外部错误文字。

默认值""

validationStateint

输入校验状态。

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

默认值EValidationState.None

valueOnClearvar

清除后的值，也可传函数返回清除值；默认继承配置。

默认值继承 Provider，默认 null

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

emptybool只读

当前值是否被判定为空。

默认值由运行时计算

hasValidationErrorbool只读

当前校验状态是否为 Error。

默认值由运行时计算

numberScaleint只读

用于小数数值计算的整数缩放倍率。

默认值由运行时计算

信号

签名作用

inputRejected(string text)

输入无法转换为有效值时触发，text 为被拒绝的输入文字。

numberModified(real numberValue)

用户修改数值后触发，numberValue 为新的数值。

businessValueModified(var numberValue)

用户修改业务数值后触发，numberValue 为业务层使用的值。

方法

签名作用

commitInput(input)

提交输入文字；内容无效时保留原值并发出 inputRejected。

ESpinBox 数值调节 ​

示例与代码 ​

数值调节 ​

数值调节 ​

属性 ​

信号 ​

方法 ​

ESpinBox 数值调节

示例与代码

数值调节

数值调节

属性

信号

方法