QML编程：实现一个数字软件盘的功能(一)

　　本文描述如何通过QML编程实现一个满足自己需求的数字软件盘的功能,
功能需求：
　　1.可以查看临时数值设置，
　　2.可以通过滑动slider实现快速设置
　　3.原值记录功能
首先根据功能需求设计小键盘的风格，可分为临时数值显示区和输入区
画面脚本源码如下：

import QtQuick 2.4
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.2

import Custom.Controls 2.0

CategoryPageBackGround {
    id: categoryPageBackGround
    width: 800
    height: 160
    property alias clear: clear
    property alias cancel: cancel
    property alias enter: enter
    property alias customButton5: customButton5
    property alias customButton3: customButton3
    property alias customButton13: customButton13
    property alias customButton12: customButton12
    property alias customButton7: customButton7
    property alias customButton1: customButton1
    property alias customButton9: customButton9
    property alias customButton6: customButton6
    property alias customButton4: customButton4
    property alias customButton2: customButton2
    property alias customButton: customButton
    property alias customButton8: customButton8
    property alias customButton16: customButton16
    property alias customButton15: customButton15
    property alias customerSlider: customerSlider
    property alias customSpinBox: customSpinBox

    RowLayout {
        x: 8
        y: 11
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 35

        ColumnLayout {

            CustomSpinBox {
                id: customSpinBox
                editable: false
                enabled: false
                value: customerSlider.value
                stepSize: Math.pow(10, -decimals)
                to: customerSlider.to
                from: customerSlider.from
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.preferredHeight: 24
                Layout.preferredWidth: 208
                indicatorsVisible: false
            }

            CustomerSlider {
                id: customerSlider
                from: -20
                orientation: Qt.Horizontal
                stepSize: customSpinBox.stepSize
                focusPolicy: Qt.NoFocus
                to: 100
                value: 0
                handleRadius: 12
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.columnSpan: 2
                Layout.preferredHeight: 48
                Layout.preferredWidth: 208
            }
        }

        Rectangle {
            id: rectangle
            color: "#3c3c3c"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.rowSpan: 3
            Layout.preferredHeight: 143
            Layout.preferredWidth: 2
        }

        GridLayout {
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.rowSpan: 3
            rows: 2
            columns: 6

            CustomButton {
                id: customButton8
                focusPolicy: Qt.NoFocus
                text: "1"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton
                focusPolicy: Qt.NoFocus
                text: "2"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton2
                focusPolicy: Qt.NoFocus
                text: "3"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton4
                focusPolicy: Qt.NoFocus
                text: "4"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton6
                focusPolicy: Qt.NoFocus
                text: "5"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: enter
                focusPolicy: Qt.NoFocus
                text: "Enter"
                Layout.fillHeight: true
                Layout.fillWidth: true
                Layout.rowSpan: 2
                Layout.preferredHeight: 97
                Layout.preferredWidth: 64
            }

            CustomButton {
                id: customButton9
                focusPolicy: Qt.NoFocus
                text: "6"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton1
                focusPolicy: Qt.NoFocus
                text: "7"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton3
                focusPolicy: Qt.NoFocus
                text: "8"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton5
                focusPolicy: Qt.NoFocus
                text: "9"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton7
                focusPolicy: Qt.NoFocus
                text: "0"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton12
                focusPolicy: Qt.NoFocus
                text: "."
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton13
                focusPolicy: Qt.NoFocus
                text: "-"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: clear
                focusPolicy: Qt.NoFocus
                text: "C"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: cancel
                focusPolicy: Qt.NoFocus
                text: "Cancel"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }

            CustomButton {
                id: customButton15
                focusPolicy: Qt.NoFocus
                text: "<<"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
            CustomButton {
                id: customButton16
                focusPolicy: Qt.NoFocus
                text: ">>"
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
        }
    }
}

设计效果如下：

逻辑代码的实现如下：

import QtQuick 2.4
import Custom.Controls 2.0
InputFlowForm {
    property string inputText;
    property bool dot: false;
    property string lastText;
    enter.onClicked: {
        //enter
        if(inputText!=""){
            lastText=inputText;
            inputText="";
            dot=false;
        }
        var obj=CustomSinglentonControls.manager["CurrentObject"];
        obj.value=customSpinBox.value
    }
    cancel.onClicked: {
        //cancel
        inputText="";
        dot=false;
        customSpinBox.value=Number.fromLocaleString(customButton5.locale,lastText);
    }
    customButton5.onClicked: {
        //Number 9
        inputText+=customButton5.text;
        customSpinBox.value=Number.fromLocaleString(customButton5.locale,inputText);
    }
    customButton3.onClicked: {
        //Number 8
        inputText+=customButton3.text;
        customSpinBox.value=Number.fromLocaleString(customButton3.locale,inputText);
    }
    clear.onClicked: {
        //clear
        inputText="";
        dot=false;
        customSpinBox.value=Number.fromLocaleString(clear.locale,inputText);
    }

    customButton13.onClicked: {
        // -
        if(inputText===""){
            console.log("value: ",customSpinBox.value);
            inputText="-0";
            customSpinBox.value=Number.fromLocaleString(customButton13.locale,inputText);
        }
    }
    customButton12.onClicked: {
        // .
        if(dot===false){
            inputText+=customButton12.text;
            dot=true;
        }
    }
    customButton7.onClicked: {
        //Number 0
        inputText+=customButton7.text;
        customSpinBox.value=Number.fromLocaleString(customButton7.locale,inputText);
    }
    customButton1.onClicked: {
        //Number 7
        inputText+=customButton1.text;
        customSpinBox.value=Number.fromLocaleString(customButton1.locale,inputText);
    }
    customButton9.onClicked: {
        //Number 6
        inputText+=customButton9.text;
        customSpinBox.value=Number.fromLocaleString(customButton9.locale,inputText);
    }
    customButton6.onClicked: {
        //Number 5
        inputText+=customButton6.text;
        customSpinBox.value=Number.fromLocaleString(customButton6.locale,inputText);
    }
    customButton4.onClicked: {
        //Number 4
        inputText+=customButton4.text;
        customSpinBox.value=Number.fromLocaleString(customButton4.locale,inputText);
    }
    customButton2.onClicked: {
        //Number 3
        inputText+=customButton2.text;
        customSpinBox.value=Number.fromLocaleString(customButton2.locale,inputText);
    }
    customButton.onClicked: {
        //Number 2
        inputText+=customButton.text;
        customSpinBox.value=Number.fromLocaleString(customButton.locale,inputText);
    }
    customButton8.onClicked: {
        //Number 1
        inputText+=customButton8.text;
        customSpinBox.value=Number.fromLocaleString(customButton8.locale,inputText);
    }

    customButton16.onClicked: {
       // >>
       customerSlider.increase();
       inputText=Number(customerSlider.value).toLocaleString(locale,'f',customSpinBox.decimals)
    }
    customButton15.onClicked: {
        // <<
        customerSlider.decrease();
        inputText=Number(customerSlider.value).toLocaleString(locale,'f',customSpinBox.decimals)
    }
    customerSlider.onValueChanged: {
        if(customerSlider.value!=customSpinBox.value){
            customSpinBox.value=customerSlider.value;
        }
    }
    customSpinBox.onValueChanged: {
        if(customerSlider.value!=customSpinBox.value){
            customerSlider.value=customSpinBox.value;
        }
    }
}

最终的显示效果如下：