技術標籤：Qtqml數字鍵盤

main.qml

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
//import QtQuick.VirtualKeyboard 2.3

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property int indexSelected: 0

    SpinBox {
        id:
 
 textSpinBox
//        anchors.right: parent.right
        anchors.centerIn: parent
//        anchors.verticalCenter: parent.verticalCenter
        inputMethodHints: Qt.ImhDigitsOnly
        value: 0
        to: 100
        onFocusChanged: {
            if(textSpinBox.focus || textSpinBox2.focus || numberFocusScope.
 
focus) {
                console.log("focus || textSpinBox2.focus || numberFocusScope.focus "+focus)
                numberFocusScope.activedNumer = 1
                numberPad.visible = true
                numberPad.lineValue = value
                numberFocusScope.x = textSpinBox.x
                numberFocusScope.
 
y = textSpinBox.y+textSpinBox.height
            } else{
                console.log("textSpinBox else "+focus)
                numberPad.visible = false
            }
        }
    }

    SpinBox {
        id: textSpinBox2
        anchors.top: textSpinBox.bottom
        anchors.left: textSpinBox.left
//        anchors.right: parent.right
//        anchors.top: textSpinBox.bottom
        inputMethodHints: Qt.ImhDigitsOnly
        value: 0
        to: 100
        onFocusChanged: {
            if(textSpinBox.focus || textSpinBox2.focus || numberFocusScope.focus) {
                console.log("focus || textSpinBox.focus || numberFocusScope.focus "+focus)
                numberFocusScope.activedNumer = 2
                numberPad.visible = true
                numberPad.lineValue = value
                numberFocusScope.x = x
                numberFocusScope.y = y+height
            } else {
                console.log("textSpinBox2 else "+focus)
                numberPad.visible = false
            }
        }
    }


    FocusScope{
        id: numberFocusScope
        property int activedNumer: 0
        onFocusChanged: {
            if(!(textSpinBox.focus || textSpinBox2.focus || numberFocusScope.focus)) {
                console.log("aaaaaaaaaa")
                numberPad.visible = false
            }
        }

        NumberPad {
            id: numberPad
            visible: true
            onValueSet: {
                if(numberFocusScope.activedNumer==1) textSpinBox.value = value
                else if(numberFocusScope.activedNumer == 2) textSpinBox2.value = value
                console.log(value)
            }
        }
    }


    Button {
        id: button
        x: 412
        y: 112
        text: qsTr("Button")
    }
}

NumberPad.qml

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

Rectangle {
    id: numerPad
    property int buttonWidth: 50
    property int buttonHeight: 50
    property string lineValue: "0"
    property string numberColor: "green"
    width: buttonWidth*4.5
    height: buttonHeight*5


    function buttonAddValue(value) {
        if(lineValue == "0") lineValue = lineValue.substring(0, lineValue.length -1)
        lineValue = lineValue +value
    }
    function buttonClean() {
        lineValue = "0"
    }
    function buttonDel() {
        lineValue = lineValue.substring(0, lineValue.length -1)
    }
    function buttonInputDone() {
        valueSet(lineValue)
        numerPad.visible = false
    }
    signal valueSet(string value)

    TextInput {
        id: inputValue
        anchors.top: parent.top
        anchors.left: parent.left
        width: numerPad.width
        height: buttonHeight
        text: lineValue
        font.bold: true
        font.pointSize: 20
        cursorVisible: false
    }

    Button {
        id:button7
        text: "7"
        width: buttonWidth
        height: buttonHeight
        anchors.top: inputValue.bottom
        anchors.left: parent.left
        onClicked: buttonAddValue(text)
    }
    Button {
        id:button8
        text: "8"
        width: buttonWidth
        height: buttonHeight
        anchors.top: inputValue.bottom
        anchors.left: button7.right
        onClicked: buttonAddValue(text)
    }
    Button {
        id:button9
        text: "9"
        width: buttonWidth
        height: buttonHeight
        anchors.top: inputValue.bottom
        anchors.left: button8.right
        onClicked: buttonAddValue(text)
    }

    Button {
        id:button4
        text: "4"
        width: buttonWidth
        height: buttonHeight
        anchors.top: button7.bottom
        anchors.left: parent.left
        onClicked: buttonAddValue(text)
    }
    Button {
        id:button5
        text: "5"
        width: buttonWidth
        height: buttonHeight
        anchors.top: button4.top
        anchors.left: button4.right
        onClicked: buttonAddValue(text)
    }
    Button {
        id:button6
        text: "6"
        width: buttonWidth
        height: buttonHeight
        anchors.top: button4.top
        anchors.left: button5.right
        onClicked: buttonAddValue(text)
    }

    Button {
        id:button1
        text: "1"
        width: buttonWidth
        height: buttonHeight
        anchors.top: button4.bottom
        anchors.left: parent.left
        onClicked: buttonAddValue(text)
    }
    Button {
        id:button2
        text: "2"
        width: buttonWidth
        height: buttonHeight
        anchors.top: button1.top
        anchors.left: button1.right
        onClicked: buttonAddValue(text)
    }
    Button {
        id:button3
        text: "3"
        width: buttonWidth
        height: buttonHeight
        anchors.top: button1.top
        anchors.left: button2.right
        onClicked: buttonAddValue(text)
    }

    Button {
        id:button0
        text: "0"
        width: buttonWidth
        height: buttonHeight
        anchors.top: button1.bottom
        anchors.left: parent.left
        onClicked: buttonAddValue(text)
    }
    Button {
        id:buttonDot
        text: "."
        width: buttonWidth
        height: buttonHeight
        anchors.top: button0.top
        anchors.left: button0.right
        onClicked: buttonAddValue(text)
    }
    Button {
        id:buttonClear
        text: "C"
        width: buttonWidth
        height: buttonHeight
        anchors.top: button0.top
        anchors.left: buttonDot.right
        onClicked: buttonClean()
    }

    Button {
        id:buttonBackSpace
        text: "<"
        width: buttonWidth*1.5
        height: buttonHeight*2
        anchors.top: inputValue.bottom
        anchors.left: button9.right
        onClicked: buttonDel()
    }
    Button {
        id:buttonEnter
        text: "Enter"
        width: buttonWidth*1.5
        height: buttonHeight*2
        anchors.top: buttonBackSpace.bottom
        anchors.left: button6.right
        onClicked: buttonInputDone()
    }
}

還有些小問題。。以後再改