QML 虚拟键盘（VirtualKeyboard ）

简介

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

示例在 QtCreator 软件可以找到：

或在以下 Qt 安装目录找到：

C:\Qt\{你的Qt版本}\Examples\{你的Qt版本}\virtualkeyboard\basic

Qt 示例官方文档

https://doc.qt.io/qt-5/qtvirtualkeyboard-basic-example.html

使用

（1）先在 .pro 文件中添加插件：

QT += quickwidgets
CONFIG += link_pkgconfig

# 使用静态插件
static {
    QT += svg
    QTPLUGIN += qtvirtualkeyboardplugin
}

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

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

（3）最后 QML 文件导入模块：

import QtQuick.VirtualKeyboard 2.1

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

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

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

常用值有：

改写demo

这是我根据示例修改的一个 QML demo（嵌入式平台），代码如下：

import QtQuick 2.10
import QtQuick.Window 2.3
import QtQuick.Controls 2.3
import QtQuick.VirtualKeyboard 2.1
import QtQuick.VirtualKeyboard.Settings 2.1

Window {
    id: root
    visible: true
    width: 1000
    height: 600
    color: "#F6F6F6"

    // 使窗口强制获得焦点
    MouseArea {
        anchors.fill: parent
        onClicked: forceActiveFocus()
    }

    TextField {
        id: textUser
        placeholderText: "请输入用户名"
        font.family: "Microsoft YaHei"
        font.pixelSize: 28
        topPadding: 10
        anchors.top: parent.top
        anchors.topMargin: 40
        anchors.left: parent.left
        anchors.leftMargin: 40

        background: Rectangle {
            implicitWidth: 424
            implicitHeight: 50
            radius: 4
            border.color: parent.focus  ? "#498ff8" : "#C4DBFC"
        }

        // 当选择输入框的时候才显示键盘
        onPressed: {
            inputX = x
            inputY = y + height
            inputPanel.visible = true
        }
    }

    TextField {
        id: textPasswd
        placeholderText: "请输入密码"
        font.family: "Microsoft YaHei"
        font.pixelSize: 28
        topPadding: 10
        anchors.top: parent.top
        anchors.topMargin: 120
        anchors.left: parent.left
        anchors.leftMargin: 40

        background: Rectangle {
            implicitWidth: 424
            implicitHeight: 50
            radius: 4
            border.color: parent.focus  ? "#498ff8" : "#C4DBFC"
        }

        // 当选择输入框的时候才显示键盘
        onPressed: {
            inputX = x
            inputY = y + height
            inputPanel.visible = true
        }
    }

    property int inputX: 0 // 键盘x坐标(动态)
    property int inputY: root.height // 键盘y坐标(动态)

    // 嵌入式虚拟键盘
    InputPanel {
        id: inputPanel
        z: 99
        //更改x,y即可更改键盘位置
        x: textUser.x
        y: root.height
        //更改width即可更改键盘大小
        width: root.width - 100
        visible: false

        externalLanguageSwitchEnabled: false

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                // 将键盘顶部放在屏幕底部会使其隐藏起来
                x: inputX
                y: inputY
            }
        }

        Component.onCompleted: {
            //VirtualKeyboardSettings.locale = "eesti" // 复古键盘样式
            VirtualKeyboardSettings.wordCandidateList.alwaysVisible = true
        }

        // 这种集成方式下点击隐藏键盘的按钮是没有效果的，只会改变active，因此我们自己处理一下
        onActiveChanged: {
            if(!active) { visible = false }
        }
    }

}

效果如下：

程序下载

GitHub下载地址为：https://github.com/confidentFeng/QML_Demo/tree/master/basic

重新编译，设置语言仅为中英文

Qt 官方提供的示例和插件均是全语言的，不仅仅是中英文，还有阿拉伯语、韩语、日语等不常用的语言，导致只需要中英文切换的情况下，很麻烦。

在边查前人博客，边查官方文档，尝试去解决这个问题，发现除了重新编译 qtvirtualkeyboard 模块，qmake 的时候qmake CONFIG+="lang-en_GB lang-zh_CN" 只编译配置中英文的情况，其它诸如通过 VirtualKeyboardSettings 设置，或者修改 .pro 工程文件的方法均无效。

由于时间问题，暂未尝试重新编译 qtvirtualkeyboard 插件，若有同学感兴趣，可以参考：