我们一般用qt自带的虚拟键盘都是直接编译源码来使用的,所以它的样式也是固定的,类似ps的黑色样式,很多时候,会感觉这种样式不适合我们现在的软件界面风格,所以我们要根据自己的软件风格来改变虚拟键盘的风格。但是虚拟键盘有没有直接给出接口来改变风格,所以我们只能在源码基础上改,然后在编译成插件的形式。
import QtQuick 2.0
import QtQuick.VirtualKeyboard 2.1
import QtQuick.VirtualKeyboard.Styles 2.1
KeyboardStyle {
id: currentStyle
readonly property bool compactSelectionList: [InputEngine.Pinyin, InputEngine.Cangjie, InputEngine.Zhuyin].indexOf(InputContext.inputEngine.inputMode) !== -1
readonly property string fontFamily: "Sans"
readonly property real keyBackgroundMargin: Math.round(13 * scaleHint)
readonly property real keyContentMargin: Math.round(45 * scaleHint)
readonly property real keyIconScale: scaleHint * 0.6
readonly property string resourcePrefix: "qrc:/QtQuick/VirtualKeyboard/content/styles/default/"
readonly property string inputLocale: InputContext.locale
property color inputLocaleIndicatorColor: "white"
property Timer inputLocaleIndicatorHighlightTimer: Timer {
interval: 1000
onTriggered: inputLocaleIndicatorColor = "gray"
}
onInputLocaleChanged: {
inputLocaleIndicatorColor = "white"
inputLocaleIndicatorHighlightTimer.restart()
}
keyboardDesignWidth: 2560
keyboardDesignHeight: 800
keyboardRelativeLeftMargin: 114 / keyboardDesignWidth
keyboardRelativeRightMargin: 114 / keyboardDesignWidth
keyboardRelativeTopMargin: 13 / keyboardDesignHeight
keyboardRelativeBottomMargin: 86 / keyboardDesignHeight
keyboardBackground: Rectangle {
color: "black"
}
keyPanel: KeyPanel {
Rectangle {
id: keyBackground
radius: 5
color: "#383533"
anchors.fill: parent
anchors.margins: keyBackgroundMargin
Text {
id: keySmallText
text: control.smallText
visible: control.smallTextVisible
color: "gray"
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: keyContentMargin / 3
font {
family: fontFamily
weight: Font.Normal
pixelSize: 38 * scaleHint
capitalization: control.uppercased ? Font.AllUppercase : Font.MixedCase
}
}
Text {
id: keyText
text: control.displayText
color: "white"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
anchors.leftMargin: keyContentMargin
anchors.topMargin: control.smallTextVisible ? keyContentMargin * 1.2 : keyContentMargin
anchors.rightMargin: keyContentMargin
anchors.bottomMargin: control.smallTextVisible ? keyContentMargin * 0.8 : keyContentMargin
font {
family: fontFamily
weight: Font.Normal
pixelSize: 52 * scaleHint
capitalization: control.uppercased ? Font.AllUppercase : Font.MixedCase
}
}
}
states: [
State {
name: "pressed"
when: control.pressed
PropertyChanges {
target: keyBackground
opacity: 0.75
}
PropertyChanges {
target: keyText
opacity: 0.5
}
},
State {
name: "disabled"
when: !control.enabled
PropertyChanges {
target: keyBackground
opacity: 0.75
}
PropertyChanges {
target: keyText
opacity: 0.05
}
}
]
}
backspaceKeyPanel: KeyPanel {
Rectangle {
id: backspaceKeyBackground
radius: 5
color: "#23211E"
anchors.fill: parent
anchors.margins: keyBackgroundMargin
Image {
id: backspaceKeyIcon
anchors.centerIn: parent
sourceSize.width: 159 * keyIconScale
sourceSize.height: 88 * keyIconScale
smooth: false
source: resourcePrefix + "images/backspace-868482.svg"
}
}
states: [
State {
name: "pressed"
when: control.pressed
PropertyChanges {
target: backspaceKeyBackground
opacity: 0.80
}
PropertyChanges {
target: backspaceKeyIcon
opacity: 0.6
}
},
State {
name: "disabled"
when: !control.enabled
PropertyChanges {
target: backspaceKeyBackground
opacity: 0.8
}
PropertyChanges {
target: backspaceKeyIcon
opacity: 0.2
}
}
]
}
languageKeyPanel: KeyPanel {
Rectangle {
id: languageKeyBackground
radius: 5
color: "#35322f"
anchors.fill: parent
anchors.margins: keyBackgroundMargin
Image {
id: languageKeyIcon
anchors.centerIn: parent
sourceSize.width: 144 * keyIconScale
sourceSiz