一杯清酒邀明月
天下本无事,庸人扰之而烦耳。

简介

Qt 官方开源了一个虚拟键盘的示例,该示例提供两种使用方式:一种用于桌面平台,另一种用于嵌入式平台,示例采用嵌入式平台方式显示。它们区别是前者脱离窗口应用于全局,后者依附于窗口。

  • 示例在 QtCreator 软件可以找到:

  • 或在以下 Qt 安装目录找到:
C:\Qt\{你的Qt版本}\Examples\{你的Qt版本}\virtualkeyboard\basic
  • Qt 示例官方文档
https://doc.qt.io/qt-5/qtvirtualkeyboard-basic-example.html

使用

(1)先在 .pro 文件中添加插件:

1 QT += quickwidgets
2 CONFIG += link_pkgconfig
3 
4 # 使用静态插件
5 static {
6     QT += svg
7     QTPLUGIN += qtvirtualkeyboardplugin
8 }

(2)在 main.cpp 中添加以下代码,但要在QApplication a(argc, argv);前面:

qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

(3)最后 QML 文件导入模块:

import QtQuick.VirtualKeyboard 2.1

然后 TetxInput 派生类的控件,获得焦点即可调出虚拟键盘(桌面平台)。

根据不同的输入方式显示不同的键盘

1 TextField {
2     id: digitsField
3     width: parent.width
4     placeholderText: "Digits only field" /* 输入为空时显示的提示文字 */
5     inputMethodHints: Qt.ImhDigitsOnly   /* 输入策略 */
6     enterKeyAction: EnterKeyAction.Next  /* 键盘确定键策略 */
7     onAccepted: textArea.focus = true    /* 结束输入操作行为 */
8 }

常用值有:

改写demo

这是我根据示例修改的一个 QML demo(嵌入式平台),代码如下:

  1 import QtQuick 2.10
  2 import QtQuick.Window 2.3
  3 import QtQuick.Controls 2.3
  4 import QtQuick.VirtualKeyboard 2.1
  5 import QtQuick.VirtualKeyboard.Settings 2.1
  6 
  7 Window {
  8     id: root
  9     visible: true
 10     width: 1000
 11     height: 600
 12     color: "#F6F6F6"
 13 
 14     // 使窗口强制获得焦点
 15     MouseArea {
 16         anchors.fill: parent
 17         onClicked: forceActiveFocus()
 18     }
 19 
 20     TextField {
 21         id: textUser
 22         placeholderText: "请输入用户名"
 23         font.family: "Microsoft YaHei"
 24         font.pixelSize: 28
 25         topPadding: 10
 26         anchors.top: parent.top
 27         anchors.topMargin: 40
 28         anchors.left: parent.left
 29         anchors.leftMargin: 40
 30 
 31         background: Rectangle {
 32             implicitWidth: 424
 33             implicitHeight: 50
 34             radius: 4
 35             border.color: parent.focus  ? "#498ff8" : "#C4DBFC"
 36         }
 37 
 38         // 当选择输入框的时候才显示键盘
 39         onPressed: {
 40             inputX = x
 41             inputY = y + height
 42             inputPanel.visible = true
 43         }
 44     }
 45 
 46     TextField {
 47         id: textPasswd
 48         placeholderText: "请输入密码"
 49         font.family: "Microsoft YaHei"
 50         font.pixelSize: 28
 51         topPadding: 10
 52         anchors.top: parent.top
 53         anchors.topMargin: 120
 54         anchors.left: parent.left
 55         anchors.leftMargin: 40
 56 
 57         background: Rectangle {
 58             implicitWidth: 424
 59             implicitHeight: 50
 60             radius: 4
 61             border.color: parent.focus  ? "#498ff8" : "#C4DBFC"
 62         }
 63 
 64         // 当选择输入框的时候才显示键盘
 65         onPressed: {
 66             inputX = x
 67             inputY = y + height
 68             inputPanel.visible = true
 69         }
 70     }
 71 
 72     property int inputX: 0 // 键盘x坐标(动态)
 73     property int inputY: root.height // 键盘y坐标(动态)
 74 
 75     // 嵌入式虚拟键盘
 76     InputPanel {
 77         id: inputPanel
 78         z: 99
 79         //更改x,y即可更改键盘位置
 80         x: textUser.x
 81         y: root.height
 82         //更改width即可更改键盘大小
 83         width: root.width - 100
 84         visible: false
 85 
 86         externalLanguageSwitchEnabled: false
 87 
 88         states: State {
 89             name: "visible"
 90             when: inputPanel.active
 91             PropertyChanges {
 92                 target: inputPanel
 93                 // 将键盘顶部放在屏幕底部会使其隐藏起来
 94                 x: inputX
 95                 y: inputY
 96             }
 97         }
 98 
 99         Component.onCompleted: {
100             //VirtualKeyboardSettings.locale = "eesti" // 复古键盘样式
101             VirtualKeyboardSettings.wordCandidateList.alwaysVisible = true
102         }
103 
104         // 这种集成方式下点击隐藏键盘的按钮是没有效果的,只会改变active,因此我们自己处理一下
105         onActiveChanged: {
106             if(!active) { visible = false }
107         }
108     }
109 
110 }

效果如下:

posted on 2024-02-26 20:02  一杯清酒邀明月  阅读(538)  评论(0编辑  收藏  举报