クイックコントロール--5.digitalキーボード

1件の結果

2はじめに

デジタルキーボードをコントロール、カスタムスタンバイを使用しました。

3制御コード

3.1 SenDigitalKeyBoard.qml

import QtQuick 2.12

// SenComBtn control used by this control

Rectangle {
    property int dkbFormSize: 200
    property int dkbFontSize: 20
    property int dkbBtnSize: dkbFormSize / 5
    property int dkbMaiginSize: dkbBtnSize / 5
    property color dkbTextColor: "white"
    property color dkbPressedTextColor: "red"
    property color dkbReleaseTextColor: dkbTextColor
    property color dkbBtnColor: "grey"
    property color dkbPressedColor: dkbBtnColor
    property color dkbReleaseColor: dkbBtnColor
    property color dkbFormColor: "lightgrey"

    property string leftArrow: "\u2190"
    property string upperArrow: "\u2191"

    signal btnPressed(string numb)
    signal quitClicked()

    id: digitalVKey
    width: dkbFormSize
    height: dkbFormSize
    color: dkbFormColor

    Column {
        id: kbCol
        anchors {
            horizontalCenter: parent.horizontalCenter
            verticalCenter: parent.verticalCenter
            margins: dkbMaiginSize
        }
        spacing: dkbMaiginSize

        Row {
            spacing: dkbMaiginSize
            anchors.horizontalCenter: parent.horizontalCenter

            SenComBtn {
                id: btn1
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "7"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("7")
            }

            SenComBtn {
                id: btn2
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "8"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("8")
            }

            SenComBtn {
                id: btn3
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "9"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("9")
            }

            SenComBtn {
                id: btn4
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: leftArrow
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("delete")
            }
        }

        Row {
            spacing: dkbMaiginSize
            anchors.horizontalCenter: parent.horizontalCenter

            SenComBtn {
                id: btn5
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "4"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("4")
            }

            SenComBtn {
                id: btn6
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "5"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("5")
            }

            SenComBtn {
                id: btn7
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "6"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("6")
            }

            SenComBtn {
                id: btn8
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "C"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("clear")
            }
        }

        Row {
            spacing: dkbMaiginSize
            anchors.horizontalCenter: parent.horizontalCenter

            SenComBtn {
                id: btn9
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "1"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("1")
            }

            SenComBtn {
                id: btn10
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "2"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("2")
            }

            SenComBtn {
                id: btn11
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "3"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("3")
            }

            SenComBtn {
                id: btn12
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "-"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("-")
            }
        }

        Row {
            spacing: dkbMaiginSize
            anchors.horizontalCenter: parent.horizontalCenter

            SenComBtn {
                id: btn13
                width: dkbBtnSize * 2 + dkbMaiginSize
                height: dkbBtnSize
                btnText: "0"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed("0")
            }

            SenComBtn {
                id: btn14
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "."
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: btnPressed(".")
            }

            SenComBtn {
                id: btn15
                width: dkbBtnSize
                height: dkbBtnSize
                btnText: "OK"
                fontSize: dkbFontSize
                textColor: dkbTextColor
                pressedTextColor: dkbPressedTextColor
                releaseTextColor: dkbReleaseTextColor
                btnColor: dkbBtnColor
                pressedColor: dkbPressedColor
                releaseColor: dkbReleaseColor
                onClicked: quitClicked()
            }
        }
    }
}

3.2 main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import "./common" as SenCom

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

    SenCom.SenDigitalKeyBoard {
        anchors.centerIn: parent
    }
}