前言这一节我们学习的控件名称是轮选框SpinBox，所谓轮选框的概念，就是允许用户通过单击向上或向下指示按钮或在键盘上向上或向下选择整数值，或者将SpinBox设置为可编辑的，以便用户可以在输入字段下输入文本值。SpinBox的属性
SpinBox的方法信号valueModified()，当用户已通过触摸，鼠标，滚轮或按键交互式修改了旋转框值时，将发出此信号。对应的处理程序是onValueModified。 方法
SpinBox的例程整数值轮选框第一个例程我们先来看一个最简单的整数值轮选框，导入Controls2控件库，新建一个工程，输入以下代码。 SpinBox{
anchors.centerIn: parent
from: 0
to: 50
value: 20
stepSize: 2
}这样就建立好了一个范围为0-50，初始值为20，增减步长为2的轮选框。
浮点数轮选框因为SpinBox是没有单独的属性设置浮点数的，所以我们需要通过validator验证器来设置，默认情况下，SpinBox使用IntValidator接受整数输入，当我们需要设置浮点数时，需要使用DoubleValidator非整数验证器。 SpinBox {
id: spinbox
from: 0
value: 110
to: 100 * 100
stepSize: 10
anchors.centerIn: parent
validator: DoubleValidator {
bottom: Math.min(spinbox.from, spinbox.to)
top: Math.max(spinbox.from, spinbox.to)
}
textFromValue: function(value, locale) {
return Number(value / 100).toLocaleString(locale, 'f', 2)
}
valueFromText: function(text, locale) {
return Number.fromLocaleString(locale, text) * 100
}
}我们想要实现一个带有两位小数的浮点数轮选框，通过DoubleValidator非整数验证器，只有输入包含在有效范围内且格式正确的双精度数，才被允许输入。所以需要设置其范围。 设置了验证器的类型后，需要用到SpinBox的属性textFromValue，这个属性包含一个回调函数function，每当需要将整数值转化为显示文本时，就会调用该回调函数。function有两个参数，第一个参数是要转化的值，第二个参数是可选的，应用于转换的语言环境。默认使用Number.toLocaleString()进行转换。 toLocaleString()以指定的格式和精度将待转化的值转化为适合于指定环境的字符串，第一个参数指的是语言环境；第二个参数指的是格式，默认是'f'，十进制浮点数；第三个参数指的是精度，默认为2。 注意：valueFromText属性不是必须的，但是将自定义的textFromValue应用于可编辑的SpinBox时，必须提供匹配的valueFromText实现，以便能够将自定义文本转化为整数值。 运行程序，效果如下：
文本轮选框文本和轮选框的实现是一样的原理，只不过文本需要用到的验证器是RegExpValidator字符串验证器。 SpinBox {
from: 0
to: items.length - 1
value: 1 // "Medium"
anchors.centerIn: parent
property var items: ["Small", "Medium", "Large"]
validator: RegExpValidator {
regExp: new RegExp("(Small|Medium|Large)", "i")
}
textFromValue: function(value) {
return items[value];
}
valueFromText: function(text) {
for (var i = 0; i < items.length; ++i) {
if (items[i].toLowerCase().indexOf(text.toLowerCase()) === 0)
return i
}
return sb.value
}
}RegExpValidator类型提供了一个验证器，该验证器会将与指定正则表达式匹配的任何字符串视为有效。它有一个属性regExp，保存用于验证的正则表达式。因为是文本轮选框，所以需要用到textFromValue属性，每当需要将整数值转换为显示文本时，就会调用该回调函数。
自定义轮选框SpinBox包含四个可视项：background背景项，contentItem内容项，up indicator向上指示器和down indicator向下指示器。一般来说up indicator和down indicator的设置是一样的，设置完一个直接复制就可以。 SpinBox {
id: control
value: 50
editable: true
anchors.centerIn: parent
contentItem: TextInput {
text: control.textFromValue(control.value, control.locale)
font: control.font
color: "green"
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
readOnly: !control.editable
validator: control.validator
inputMethodHints: Qt.ImhFormattedNumbersOnly
}
up.indicator: Rectangle {
x:parent.width - implicitWidth
implicitWidth: 40
implicitHeight: 40
color: control.up.pressed ? "lightgray" : "orange"
border.color: "green"
Text {
text: "+"
font.pixelSize: control.font.pixelSize * 2
color: "green"
anchors.fill: parent
fontSizeMode: Text.Fit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
down.indicator: Rectangle {
x: 0
implicitWidth: 40
implicitHeight: 40
color: control.down.pressed ? "lightgray" : "orange"
border.color: "green"
Text {
text: "-"
font.pixelSize: control.font.pixelSize * 2
color: "green"
anchors.fill: parent
fontSizeMode: Text.Fit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
background: Rectangle {
implicitWidth: 140
border.color: "green"
}
}先来看可视化项的TextInput，text属性的值主要取决于SpinBox的值，设置字体大小和颜色。设置水平和垂直居中。readOnly只读属性，因为SpinBox设置了可编辑，所以readOnly为false，也是取决于SpinBox。验证器为默认值整数值验证器，inputMethodHints指示向输入法提供有关文本输入的预期内容及其应如何操作的提示。这里设置的是仅允许输入数字。其他选项可参考以下链接。 向上指示器和向下指示器一样的设置，我们以向上指示器为例讲解，它的x坐标为Spinbox的坐标减去自身的宽度。color设置当按下时为lightgray，不按时为orange。指示器中的文字设置+，fontSizeMode指的是确定显示的文本的字体大小，这里设置了Text.Fit，指的是使用最大大小直到指定大小以适合项目的宽度和高度。位置也是处于水平和垂直居中。 最后的背景项就很简单了，就只是设置了一下宽度和边界颜色，运行，看一下效果。
总结SpinBox的难点主要是在验证器和两个回调函数上，想要设置样式丰富的SpinBox,还是需要多练习一下这两个点。SpinBox的内容就到这了，我们下节再会！ |
