QML之SpinBox

今天使用SpinBox，为了使界面风格统一，需要修改控件的边框颜色，文本颜色，点击时的背景颜色和文本颜色，这时需要对SpinBox作一定程度的定制化。

首先简单说明下SpinBox的参数:

• displayText: 这是一个只读属性，表示SpinBox中显示的文本值。它等同于spinBox.textFromValue(spinBox.value, spinBox.locale)的结果。
• editable: 这是一个布尔值，表示SpinBox是否可以编辑。如果设置为true，用户可以直接在SpinBox中输入数值。
• down: 这是指向下指示器相关的属性组，包括：
  • down.hovered: 布尔值，表示鼠标是否悬停在向下指示器上。
  • down.implicitIndicatorHeight: 实数，定义向下指示器的高度。如果未设置，则使用隐式高度。
  • down.implicitIndicatorWidth: 实数，定义向下指示器的宽度。如果未设置，则使用隐式宽度。
  • down.indicator: Item类型，定义向下指示器的自定义元素。
  • down.pressed: 布尔值，表示向下指示器是否被按下。
• up: 这是指向上指示器相关的属性组，包括：
  • up.hovered: 布尔值，表示鼠标是否悬停在向上指示器上。
  • up.implicitIndicatorHeight: 实数，定义向上指示器的高度。如果未设置，则使用隐式高度。
  • up.implicitIndicatorWidth: 实数，定义向上指示器的宽度。如果未设置，则使用隐式宽度。
  • up.indicator: Item类型，定义向上指示器的自定义元素。
  • up.pressed: 布尔值，表示向上指示器是否被按下。
• from:起始值，默认是0
• to:最大值，默认是99
• stepSize:步长
• textFromValue: 一个Javascript函数，用来把一个数字映射成一个字符串显示在界面上
• valueFromText: 一个Javascript函数,作用和textFromValue相反

SpinBox主要有三部分组成:左右两个按钮，可以点击，中间一个文本框，用来显示数字或者其他文本。

左右两个按钮对应SpinBox的down.indicator和up.indicator参数,

文本框对应Control的contentItem参数.

弄清除了上面两条信息后，就可以开始自定这个控件了,唯一需要注意的是，左右两个按钮的大小需要设置正确，不然会显示不出来，这里需要用implicitHeight参数而不是height参数（宽度设置同理）。

继承标准的SpinBox，代码如下:

import QtQuick 2.15
import QtQuick.Controls 2.15

SpinBox {
    id:control
    width: 80
    height: 25

    property color border_color: "#B0E3F9"
    property color bkg_color: "#2C3E50"
    property color pressed_bkg_color: "#B0E3F9"
    property color txt_color:  "#B0E3F9"
    property color txt_sel_color:  "#2C3E50"

    background: Rectangle{
        border.width: 1
        border.color: border_color
        color: "transparent"
    }

    contentItem: TextInput{
            text: control.displayText
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            overwriteMode: true
            selectByMouse: true
            color: txt_color
            selectionColor: txt_color
            selectedTextColor: bkg_color
        }

    down{
        indicator: Rectangle{
            x:0
            y:0
            implicitHeight: parent.height
            implicitWidth: parent.height
            color: control.down.pressed ? pressed_bkg_color : bkg_color
            border.width: 1
            border.color: txt_color
            Text{
                anchors.centerIn: parent
                text: "-"
                color: control.down.pressed ? bkg_color :txt_color
            }
        }
    }

    up{
        indicator: Rectangle{
            x:parent.width - width
            y:0
            implicitHeight: parent.height
            implicitWidth: parent.height
            color: control.up.pressed ? pressed_bkg_color : bkg_color
            border.width: 1
            border.color: txt_color
            Text{
                anchors.centerIn: parent
                text: "+"
                color: control.up.pressed ? bkg_color :txt_color
            }
        }
    }

}

使用Rectangle，InputBox, Timer的控件来模拟实现SpinbBox的功能，作为练习代码，功能也简单以下：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts

Rectangle {
    id: control
    width: 80
    height: 30

    property int from: 0
    property int to: 100
    property int step: 1
    property int value: 22
    property color text_color: "#B0E3F9"

    border.width: 1
    border.color:  text_color
    color:"transparent"
    RowLayout{
        anchors.fill: parent
        spacing:0
        Rectangle{
            Layout.fillHeight: true
            Layout.margins: control.border.width
            Layout.preferredWidth: parent.height-2*control.border.width
            color:subMouseArea.containsPress ? Qt.darker(text_color, 2) : "transparent"
            Label{
                anchors.centerIn: parent
                text:"-"
                color: subMouseArea.containsPress ? Qt.lighter(text_color, 1.5) : text_color
            }
            MouseArea{
                id:subMouseArea
                anchors.fill: parent
                onClicked: {
                    control.value = control.value-1
                    if(control.value < control.from)
                        control.value = from;
                }
                onPressed: {
                    subTimer.start()
                }

                onReleased: {
                    subTimer.stop()
                    subTimer.interval = 200
                }
            }
        }
        Rectangle{
            Layout.fillHeight: true
            width: control.border.width
            color: text_color
        }
        TextInput{
            Layout.fillHeight: true
            Layout.fillWidth: true
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            overwriteMode: true
            selectByMouse: true
            text: control.value
            color: text_color
            onAccepted: {
                if(isNaN(text)){
                    text = control.value
                }
                else{
                    control.value = text
                }
            }
        }
        Rectangle{
            Layout.fillHeight: true
            width: control.border.width
            color: text_color
        }
        Rectangle{
            Layout.fillHeight: true
            Layout.margins: control.border.width
            Layout.preferredWidth: parent.height-2*control.border.width
            color:addMouseArea.containsPress ? Qt.darker(text_color, 2) : "transparent"

            Label{
                anchors.centerIn: parent
                text:"+"
                color: addMouseArea.containsPress ? Qt.lighter(text_color, 1.5) : text_color
            }
            MouseArea{
                id: addMouseArea
                anchors.fill: parent

                onClicked: {
                    control.value = control.value+1
                    if(control.value > control.to)
                        control.value = control.to
                }

                onPressed: {
                    addTimer.start()
                }

                onReleased: {
                    addTimer.stop()
                    addTimer.interval = 200
                }
            }
        }
    }

    Timer{
        id: addTimer
        interval: 200
        repeat: true
        running: false
        onTriggered: {
            if(interval == 200)
                interval = 100
            control.value = control.value+1
            if(control.value > control.to)
                control.value = control.to
        }
    }

    Timer{
        id: subTimer
        interval: 200
        repeat: true
        running: false
        onTriggered: {
            if(interval == 200)
                interval = 100
            control.value = control.value-1
            if(control.value < control.from)
                control.value = control.from
        }
    }
}

下图中的两个SpinBox就是上面两种实现方式的效果: