Quick控件--5.digital key board
1 效果
2 簡介
digital key board控件常用,自定義備用。
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
}
}