qtvirtualkeyboard虚拟键盘改变样式

qtvirtualkeyboard虚拟键盘改变样式

我们一般用qt自带的虚拟键盘都是直接编译源码来使用的，所以它的样式也是固定的，类似ps的黑色样式，很多时候，会感觉这种样式不适合我们现在的软件界面风格，所以我们要根据自己的软件风格来改变虚拟键盘的风格。但是虚拟键盘有没有直接给出接口来改变风格，所以我们只能在源码基础上改，然后在编译成插件的形式。

import QtQuick 2.0import QtQuick.VirtualKeyboard 2.1import QtQuick.VirtualKeyboard.Styles 2.1KeyboardStyle { 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-: parent- 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-Margin: 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 sourceSize.height: 144 * keyIconScale smooth: false source: resourcePrefix + "images/globe-868482.svg" } } states: [ State { name: "pressed" when: control.pressed PropertyChanges { target: languageKeyBackground opacity: 0.80 } PropertyChanges { target: languageKeyIcon opacity: 0.75 } }, State { name: "disabled" when: !control.enabled PropertyChanges { target: languageKeyBackground opacity: 0.8 } PropertyChanges { target: languageKeyIcon opacity: 0.2 } } ] } enterKeyPanel: KeyPanel { Rectangle { id: enterKeyBackground radius: 5 color: "#1e1b18" anchors.fill: parent anchors.margins: keyBackgroundMargin Image { id: enterKeyIcon visible: enterKeyText.text.length === 0 anchors.centerIn: parent readonly property size enterKeyIconSize: { switch (control.actionId) { case EnterKeyAction.Go: case EnterKeyAction.Send: case EnterKeyAction.Next: case EnterKeyAction.Done: return Qt.size(170, 119) case EnterKeyAction.Search: return Qt.size(148, 148) default: return Qt.size(211, 80) } } sourceSize.width: enterKeyIconSize.width * keyIconScale sourceSize.height: enterKeyIconSize.height * keyIconScale smooth: false source: { switch (control.actionId) { case EnterKeyAction.Go: case EnterKeyAction.Send: case EnterKeyAction.Next: case EnterKeyAction.Done: return resourcePrefix + "images/check-868482.svg" case EnterKeyAction.Search: return resourcePrefix + "images/search-868482.svg" default: return resourcePrefix + "images/enter-868482.svg" } } } Text { id: enterKeyText visible: text.length !== 0 text: control.actionId !== EnterKeyAction.None ? "" : control.displayText clip: true fontSizeMode: Text.HorizontalFit horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter color: "#80c342" font { family: fontFamily weight: Font.Normal pixelSize: 44 * scaleHint capitalization: Font.AllUppercase } anchors.fill: parent anchors.margins: Math.round(42 * scaleHint) } } states: [ State { name: "pressed" when: control.pressed PropertyChanges { target: enterKeyBackground opacity: 0.80 } PropertyChanges { target: enterKeyIcon opacity: 0.6 } PropertyChanges { target: enterKeyText opacity: 0.6 } }, State { name: "disabled" when: !control.enabled PropertyChanges { target: enterKeyBackground opacity: 0.8 } PropertyChanges { target: enterKeyIcon opacity: 0.2 } PropertyChanges { target: enterKeyText opacity: 0.05 } } ] } hideKeyPanel: KeyPanel { Rectangle { id: hideKeyBackground radius: 5 color: "#1e1b18" anchors.fill: parent anchors.margins: keyBackgroundMargin Image { id: hideKeyIcon anchors.centerIn: parent sourceSize.width: 144 * keyIconScale sourceSize.height: 127 * keyIconScale smooth: false source: resourcePrefix + "images/hidekeyboard-868482.svg" } } states: [ State { name: "pressed" when: control.pressed PropertyChanges { target: hideKeyBackground opacity: 0.80 } PropertyChanges { target: hideKeyIcon opacity: 0.6 } }, State { name: "disabled" when: !control.enabled PropertyChanges { target: hideKeyBackground opacity: 0.8 } PropertyChanges { target: hideKeyIcon opacity: 0.2 } } ] } shiftKeyPanel: KeyPanel { Rectangle { id: shiftKeyBackground radius: 5 color: "#1e1b18" anchors.fill: parent anchors.margins: keyBackgroundMargin Image { id: shiftKeyIcon anchors.centerIn: parent sourceSize.width: 144 * keyIconScale sourceSize.height: 134 * keyIconScale smooth: false source: resourcePrefix + "images/shift-868482.svg" } states: [ State { name: "capslock" when: InputContext.capsLock PropertyChanges { target: shiftKeyBackground color: "#5a892e" } PropertyChanges { target: shiftKeyIcon source: resourcePrefix + "images/shift-c5d6b6.svg" } }, State { name: "shift" when: InputContext.shift PropertyChanges { target: shiftKeyIcon source: resourcePrefix + "images/shift-80c342.svg" } } ] } states: [ State { name: "pressed" when: control.pressed PropertyChanges { target: shiftKeyBackground opacity: 0.80 } PropertyChanges { target: shiftKeyIcon opacity: 0.6 } }, State { name: "disabled" when: !control.enabled PropertyChanges { target: shiftKeyBackground opacity: 0.8 } PropertyChanges { target: shiftKeyIcon opacity: 0.2 } } ] } spaceKeyPanel: KeyPanel { Rectangle { id: spaceKeyBackground radius: 5 color: "#35322f" anchors.fill: parent anchors.margins: keyBackgroundMargin Text { id: spaceKeyText text: Qt.locale(InputContext.locale).nativeLanguageName color: currentStyle.inputLocaleIndicatorColor Behavior on color { PropertyAnimation { duration: 250 } } anchors.centerIn: parent font { family: fontFamily weight: Font.Normal pixelSize: 48 * scaleHint } } } states: [ State { name: "pressed" when: control.pressed PropertyChanges { target: spaceKeyBackground opacity: 0.80 } }, State { name: "disabled" when: !control.enabled PropertyChanges { target: spaceKeyBackground opacity: 0.8 } } ] } symbolKeyPanel: KeyPanel { Rectangle { id: symbolKeyBackground radius: 5 color: "#1e1b18" anchors.fill: parent anchors.margins: keyBackgroundMargin Text { id: symbolKeyText text: control.displayText color: "white" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter anchors.fill: parent anchors.margins: keyContentMargin font { family: fontFamily weight: Font.Normal pixelSize: 44 * scaleHint capitalization: Font.AllUppercase } } } states: [ State { name: "pressed" when: control.pressed PropertyChanges { target: symbolKeyBackground opacity: 0.80 } PropertyChanges { target: symbolKeyText opacity: 0.6 } }, State { name: "disabled" when: !control.enabled PropertyChanges { target: symbolKeyBackground opacity: 0.8 } PropertyChanges { target: symbolKeyText opacity: 0.2 } } ] } modeKeyPanel: KeyPanel { Rectangle { id: modeKeyBackground radius: 5 color: "#1e1b18" anchors.fill: parent anchors.margins: keyBackgroundMargin Text { id: modeKeyText text: control.displayText color: "white" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter anchors.fill: parent anchors.margins: keyContentMargin font { family: fontFamily weight: Font.Normal pixelSize: 44 * scaleHint capitalization: Font.AllUppercase } } Rectangle { id: modeKeyIndicator implicitHeight: parent.height * 0.1 anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom anchors.leftMargin: parent.width * 0.4 anchors.rightMargin: parent.width * 0.4 anchors.bottomMargin: parent.height * 0.12 color: "#80c342" radius: 3 visible: control.mode } } states: [ State { name: "pressed" when: control.pressed PropertyChanges { target: modeKeyBackground opacity: 0.80 } PropertyChanges { target: modeKeyText opacity: 0.6 } }, State { name: "disabled" when: !control.enabled PropertyChanges { target: modeKeyBackground opacity: 0.8 } PropertyChanges { target: modeKeyText opacity: 0.2 } } ] } handwritingKeyPanel: KeyPanel { Rectangle { id: hwrKeyBackground radius: 5 color: "#35322f" anchors.fill: parent anchors.margins: keyBackgroundMargin Image { id: hwrKeyIcon anchors.centerIn: parent readonly property size hwrKeyIconSize: keyboard.handwritingMode ? Qt.size(124, 96) : Qt.size(156, 104) sourceSize.width: hwrKeyIconSize.width * keyIconScale sourceSize.height: hwrKeyIconSize.height * keyIconScale smooth: false source: resourcePrefix + (keyboard.handwritingMode ? "images/textmode-868482.svg" : "images/handwriting-868482.svg") } } states: [ State { name: "pressed" when: control.pressed PropertyChanges { target: hwrKeyBackground opacity: 0.80 } PropertyChanges { target: hwrKeyIcon opacity: 0.6 } }, State { name: "disabled" when: !control.enabled PropertyChanges { target: hwrKeyBackground opacity: 0.8 } PropertyChanges { target: hwrKeyIcon opacity: 0.2 } } ] } characterPreviewMargin: 0 characterPreviewDelegate: Item { property string text id: characterPreview Rectangle { id: characterPreviewBackground anchors.fill: parent color: "#5d5b59" radius: 5 Text { id: characterPreviewText color: "white" text: characterPreview.text fontSizeMode: Text.HorizontalFit horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter anchors.fill: parent anchors.margins: Math.round(48 * scaleHint) font { family: fontFamily weight: Font.Normal pixelSize: 82 * scaleHint } } } } alternateKeysListItemWidth: 99 * scaleHint alternateKeysListItemHeight: 150 * scaleHint alternateKeysListDelegate: Item { id: alternateKeysListItem width: alternateKeysListItemWidth height: alternateKeysListItemHeight Text { id: listItemText text: model.text color: "#868482" font { family: fontFamily weight: Font.Normal pixelSize: 52 * scaleHint } anchors.centerIn: parent } states: State { name: "current" when: alternateKeysListItem.ListView.isCurrentItem PropertyChanges { target: listItemText color: "white" } } } alternateKeysListHighlight: Rectangle { color: "#5d5b59" radius: 5 } alternateKeysListBackground: Rectangle { color: "#1e1b18" radius: 5 } selectionListHeight: 85 * scaleHint selectionListDelegate: SelectionListItem { id: selectionListItem width: Math.round(selectionListLabel.width + selectionListLabel.anchors.leftMargin * 2) Text { id: selectionListLabel anchors.left: parent.left anchors.leftMargin: Math.round((compactSelectionList ? 50 : 140) * scaleHint) anchors.verticalCenter: parent.verticalCenter text: decorateText(display, wordCompletionLength) color: "#80c342" font { family: fontFamily weight: Font.Normal pixelSize: 44 * scaleHint } function decorateText(text, wordCompletionLength) { if (wordCompletionLength > 0) { return text.slice(0, -wordCompletionLength) + '' + text.slice(-wordCompletionLength) + '' } return text } } Rectangle { id: selectionListSeparator width: 4 * scaleHint height: 36 * scaleHint radius: 2 color: "#35322f" anchors.verticalCenter: parent.verticalCenter anchors.right: parent.left } states: State { name: "current" when: selectionListItem.ListView.isCurrentItem PropertyChanges { target: selectionListLabel color: "white" } } } selectionListBackground: Rectangle { color: "#1e1b18" } selectionListAdd: Transition { NumberAnimation { property: "y"; from: wordCandidateView.height; duration: 200 } NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 200 } } selectionListRemove: Transition { NumberAnimation { property: "y"; to: -wordCandidateView.height; duration: 200 } NumberAnimation { property: "opacity"; to: 0; duration: 200 } } navigationHighlight: Rectangle { color: "transparent" border.color: "yellow" border.width: 5 } traceInputKeyPanelDelegate: TraceInputKeyPanel { traceMargins: keyBackgroundMargin Rectangle { id: traceInputKeyPanelBackground radius: 5 color: "#35322f" anchors.fill: parent anchors.margins: keyBackgroundMargin Text { id: hwrInputModeIndicator visible: control.patternRecognitionMode === InputEngine.HandwritingRecoginition text: InputContext.inputEngine.inputMode === InputEngine.Latin ? "Abc" : "123" color: "white" anchors.left: parent.left anchors-: parent- anchors.margins: keyContentMargin font { family: fontFamily weight: Font.Normal pixelSize: 44 * scaleHint capitalization: { if (InputContext.capsLock) return Font.AllUppercase if (InputContext.shift) return Font.MixedCase return Font.AllLowercase } } } } Canvas { id: traceInputKeyGuideLines anchors.fill: traceInputKeyPanelBackground opacity: 0.1 onPaint: { var ctx = getContext("2d") ctx.lineWidth = 1 ctx.strokeStyle = Qt.rgba(0xFF, 0xFF, 0xFF) ctx.clearRect(0, 0, width, height) var i if (control.horizontalRulers) { for (i = 0; i < control.horizontalRulers.length; i++) { ctx.beginPath() ctx.moveTo(0, control.horizontalRulers[i]) ctx.lineTo(width, control.horizontalRulers[i]) ctx.stroke() } } if (control.verticalRulers) { for (i = 0; i < control.verticalRulers.length; i++) { ctx.beginPath() ctx.moveTo(control.verticalRulers[i], 0) ctx.lineTo(control.verticalRulers[i], height) ctx.stroke() } } } } } traceCanvasDelegate: TraceCanvas { id: traceCanvas onAvailableChanged: { if (!available) return var ctx = getContext("2d") if (parent.canvasType === "fullscreen") { ctx.lineWidth = 10 ctx.strokeStyle = Qt.rgba(0, 0, 0) } else { ctx.lineWidth = 10 * scaleHint ctx.strokeStyle = Qt.rgba(0xFF, 0xFF, 0xFF) } ctx.lineCap = "round" ctx.fillStyle = ctx.strokeStyle } autoDestroyDelay: 800 onTraceChanged: if (trace === null) opacity = 0 Behavior on opacity { PropertyAnimation { easing.type: Easing.OutCubic; duration: 150 } } } popupListDelegate: SelectionListItem { property real cursorAnchor: popupListLabel.x + popupListLabel.width id: popupListItem width: popupListLabel.width + popupListLabel.anchors.leftMargin * 2 height: popupListLabel.height + popupListLabel.anchors-Margin * 2 Text { id: popupListLabel anchors.left: parent.left anchors-: parent- anchors.leftMargin: popupListLabel.height / 2 anchors-Margin: popupListLabel.height / 3 text: decorateText(display, wordCompletionLength) color: "#5CAA15" font { family: fontFamily weight: Font.Normal pixelSize: Qt.inputMethod.cursorRectangle.height * 0.8 } function decorateText(text, wordCompletionLength) { if (wordCompletionLength > 0) { return text.slice(0, -wordCompletionLength) + '' + text.slice(-wordCompletionLength) + '' } return text } } states: State { name: "current" when: popupListItem.ListView.isCurrentItem PropertyChanges { target: popupListLabel color: "black" } } } popupListBackground: Item { Rectangle { width: parent.width height: parent.height color: "white" border { width: 1 color: "#929495" } } } popupListAdd: Transition { NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 200 } } popupListRemove: Transition { NumberAnimation { property: "opacity"; to: 0; duration: 200 } } selectionHandle: Image { sourceSize.width: 20 source: resourcePrefix + "images/selectionhandle-bottom.svg" }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。