17.Quick QML-SpinBox

SpinBox
SpinBox允许用户通过单击向上或向下指示按钮，或通过按键盘上的向上或向下来选择一个整数值。另外，SpinBox也可以是可编辑的，这样用户就可以在输入字段中输入文本值。默认情况下，SpinBox提供[0-99]范围内的整数值，步数stepSize为1。
SpinBox的常用属性如下所示:

• down.pressed : bool,只读属性,返回true,表示向下指示按钮被点击了.
• down.indicator : Item,向下指示按钮指标器,可以重写它自定义样式
• down.hovered : bool,只读属性,返回true,表示鼠标徘徊在向下指示按钮的上方
• editable : bool,输入字段是否可以编辑,默认为false
• from : int,此属性保存范围的起始值。默认值为0。
• inputMethodHints : flags,用来提示QML键盘应该输入的类型的值
• stepSize : int,步长
• textFromValue : 由整数值切换为显示文本时的函数,函数可以有一个或两个参数，第一个参数是要转换的值，第二个可选参数是用于转换的区域设置，可以重写它,让我们显示自定义数值文本
• to : int,此属性保存范围的结束值。默认值为99。
• up.pressed : bool,只读属性,返回true,表示向上指示按钮被点击了.
• up.indicator : Item,向上指示按钮指标器,可以重写它自定义样式
• up.hovered : bool,只读属性,返回true,表示鼠标徘徊在向上指示按钮的上方
• validator : Validator,输入字段编辑的验证器,必须editable为true,并且SpinBox默认是用IntValidator来接受整数的输入,我们也可以改为DoubleValidator,这样就可以写浮点数了
• value : int,当前值,默认值为0。
• valueFromText : function,由当前显示的内容切换为整数值的函数,,函数可以有一个或两个参数，第一个参数是要转换的text，第二个可选参数是用于转换的区域设置，可以重写它,来获取显示的自定义文本对应的数值

示例-SpinBox显示浮点数

Window {
    visible: true;

    Column {
        anchors.centerIn: parent
        SpinBox {
              id: spinbox
              from: 0
              value: 110
              to: 100 * 100
              stepSize: 100
              editable: true
              implicitWidth: 150
              property real realValue: value / 100
              validator: DoubleValidator {
                  bottom: spinbox.from / 100
                  top:  spinbox.to / 100
                  decimals: 2
              }

              textFromValue: function(value, locale) {
                  return value / 100
              }

              valueFromText: function(text, locale) {
                  return Number(text) * 100
              }
        }

        Text {

            text : "当前值为"+ spinbox.textFromValue(spinbox.value)
        }

    }
}

效果如下所示:

示例-自定义SpinBox

import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.2
Window {
    visible: true;

    Column {
        anchors.centerIn: parent

        Loader {
            id: load
            sourceComponent: dynamicSpin
            onLoaded: {

                item.font.pixelSize = 19
            }

        }


        Text {

            text : "当前值为"+ load.item.value
        }

    }

    Component {
        id: dynamicSpin
        SpinBox {
              id: control

              property var valueColor: "#353535"             // 文本颜色
              property string borderColor: "#8B8B8B"         // 边框颜色
              property string selectdBorderColor: "#363636"  // 选中的边框颜色
              property var indicatorColor: "#282828"         // 指标器颜色
              property var indicatorBkColor: "#F0F0F0"       // 指标器背景颜色
              property var indicatorPressBkColor: "#7E807F"  // 指标器按下背景颜色
              property var hintText: ""                      // 字段为空时显示的文本
              value: 50
              editable: true
              implicitWidth: 150
              implicitHeight: 35
              leftPadding: 0
              rightPadding: upIndicator.width - 1
              topPadding: 0
              bottomPadding: 0
              onActiveFocusChanged: {

                  console.log("fouc1"+activeFocus+","+back.border.color)
              }


              contentItem: TextField {

                  z: 2
                  text: control.textFromValue(control.value, control.locale)
                  font: control.font
                  color: valueColor
                  selectionColor: "#5456A1"
                  selectedTextColor: "#ffffff"
                  horizontalAlignment: Qt.AlignHCenter
                  verticalAlignment: Qt.AlignVCenter

                  readOnly: !control.editable
                  validator: control.validator
                  inputMethodHints: Qt.ImhFormattedNumbersOnly
                  clip: true
                   control.width - upIndicator.width + 1
                  placeholderText : hintText

                  background: Rectangle {
                      id: back
                      border.color: control.activeFocus ? selectdBorderColor : borderColor
                 }
              }

              up.indicator: Rectangle {
                  id: upIndicator
                  x: control.mirrored ? 0 : parent.width - width
                  height : parent.height / 2
                   40
                  y: 0
                  color: control.up.pressed ? indicatorPressBkColor : indicatorBkColor
                  border.color: enabled ? (control.activeFocus ? selectdBorderColor : borderColor) : Qt.lighter(borderColor, 1.2)

                  Text {
                      text: "+"
                      font.pixelSize: control.font.pixelSize * 2
                      color: indicatorColor
                      anchors.fill: parent
                      fontSizeMode: Text.Fit
                      horizontalAlignment: Text.AlignHCenter
                      verticalAlignment: Text.AlignVCenter
                  }
              }

              down.indicator: Rectangle {
                  x: control.mirrored ? 0 : parent.width - width
                  height : parent.height  - upIndicator.height
                   40
                  y:  parent.height / 2
                  color: control.down.pressed ? indicatorPressBkColor : indicatorBkColor
                  border.color: enabled ? (control.activeFocus ? selectdBorderColor : borderColor) : Qt.lighter(borderColor, 1.2)

                  Text {
                      text: "-"
                      font.pixelSize: control.font.pixelSize * 2
                      color: indicatorColor
                      anchors.fill: parent
                      fontSizeMode: Text.Fit
                      horizontalAlignment: Text.AlignHCenter
                      verticalAlignment: Text.AlignVCenter
                  }
              }
              Component.onCompleted: {

                  console.log(control.width + "," + upIndicator.width+ "," + control.padding)


              }
          }

    }
}

效果如下所示: