qml 轮选框SpinBox

• 属性
  displayText : string，保存SpinBox的文本值
  down，下组
  down.hovered : bool，悬停
  down.implicitIndicatorHeight : real
  down.implicitIndicatorWidth : real
  down.indicator : Item
  down.pressed : bool，按压
  editable : bool，保存Spinbox是否可编辑。默认值为false
  from : int，保存范围的起始值。默认值为0
  inputMethodComposing : bool，保存可编辑的SpinBox是否具有从输入法输入的部分文本
  inputMethodHints : flags，向输入方法提供有关SpinBox的预期内容及其应如何操作的提示
  stepSize : int，保存步长。默认值为1
  textFromValue : function，包含一个回调函数，每当需要将整数值转换为显示文本时，就会调用该回调函数
  to : int，保存范围的最终值。默认值为99
  up（上组）
  up.hovered : bool
  up.implicitIndicatorHeight : real
  up.implicitIndicatorWidth : real
  up.indicator : Item
  up.pressed : bool
  validator : Validator，保存可编辑SpinBox的输入文本验证器，当SpinBox处于可编辑状态时，需要按下Return或Enter键，编辑的文本字段才会更新
  value : int，初始值
  valueFromText : function，此属性包含一个回调函数，每当需要将输入文本转换为整数值时，就会调用该函数
  wrap : bool，此属性保存Spinbox是否包装
• 方法
  void decrease()，如果stepsize未定义，则按1增加
  void increase()，如果stepsize未定义，则按1减少
• 信号
  valueModified()，当用户已通过触摸，鼠标，滚轮或按键交互式修改了旋转框值时，将发出此信号。对应的处理程序是onValueModified

整数值轮选框

范围在0-50，初始值20，增减步长是2

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
//import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    SpinBox{
            anchors.centerIn: parent
            from: 0
            to: 50
            value: 20
            stepSize: 2
    }
}

浮点数轮选框

需要用到非整数验证器DoubleValidator

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    SpinBox {
            id: spinbox
            from: 0
            value: 123
            to: 100 * 100
            stepSize: 10
            anchors.centerIn: parent

            //非整数验证器，只有输入包含在有效范围内且格式正确的双精度数，才被允许输入
            validator: DoubleValidator {
                bottom: Math.min(spinbox.from, spinbox.to)
                top:  Math.max(spinbox.from, spinbox.to)
            }

            //第一个参数是要转化的值，第二个参数是可选的，应用于转换的语言环境。默认使用Number.toLocaleString()进行转换
            textFromValue: function(value, locale) {
                //以指定的格式和精度将待转化的值转化为适合于指定环境的字符串，第一个参数指的是语言环境；
                //第二个参数指的是格式，默认是'f'，十进制浮点数；第三个参数指的是精度，默认为2
                return Number(value / 100).toLocaleString(locale, 'f', 2)
            }

            //将自定义的textFromValue应用于可编辑的SpinBox时，必须提供匹配的valueFromText实现，
            //以便能够将自定义文本转化为整数值
            valueFromText: function(text, locale) {
                return Number.fromLocaleString(locale, text) * 100
            }
        }
}

文本轮选框

需要用到RegExpValidator字符串验证器

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    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
            }
        }
}

自定义论选框

• SpinBox包含四个可视项：background背景项，contentItem内容项，up indicator向上指示器和down indicator向下指示器。一般来说up indicator和down indicator的设置是一样的，设置完一个直接复制即可
  

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    SpinBox {
              id: control
              value: 50
              editable: true
              anchors.centerIn: parent

              //内容项
              contentItem: TextInput {
                  text: control.textFromValue(control.value, control.locale)    //取决于SpinBox的值

                  font: control.font //字体大小
                  color: "green"    //字体颜色
                  horizontalAlignment: Qt.AlignHCenter  //水平居中
                  verticalAlignment: Qt.AlignVCenter    //垂直居中

                  readOnly: !control.editable   //只读属性 为false因为SpinBox设置了可编辑
                  validator: control.validator //默认值整数验证器
                  //inputMethodHints指示向输入法提供有关文本输入的预期内容及其应如何操作的提示
                  inputMethodHints: Qt.ImhFormattedNumbersOnly  //设置仅允许输入数字
              }

              //向上指示器
              up.indicator: Rectangle {
                  x:parent.width - implicitWidth //x坐标是Spinbox的坐标减去自身的宽度
                  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" //边界颜色
              }
          }
}