QML 自定义软键盘--踩坑日记

QML自带的键盘只有两种风格，但怕是不够用哦？

个人github地址: https://github.com/XXOO9

那么如何自定义键盘风格：

第一步：复制Qt自带的键盘风格文件资源到自己的项目目录下(我安装的是Qt5.12.4)

Qt安装路径\5.12.4\Src\qtvirtualkeyboard\src\virtualkeyboard\content\styles

可以看到Qt自带的两个键盘风格， default 和 reto

第二步：任意复制一个文件夹(我复制的是default文件夹)到自己的项目目录下，并且改名为 “WDNMD”

第三步: 添加WDNMD目录里面的qrc文件到项目

在项目根pro文件中添加以下代码：

RESOURCES += WDNMD/virtualkeyboard_default_style.qrc \

这时，工程中已经添加好了键盘Style的资源文件，如图所示：

第四步： 修改资源文件相对路径的前缀，按照下面的方式打开资源文件

打开后是这样的

修改 prefix的内容，这里是最坑的，Qt导入键盘风格的方式是按照一定模板路径([importPath]/QtQuick/VirtualKeyboard/Styles/Style文件夹名)去自动搜索，

看到这个路径懵不懵？ 打不打脑壳？，莫慌我来解释解释

1.[importpath] QML引擎engine 导入特定资源的前缀(我写的是"XTC")

2./QtQuick/VirtualKeyboard/Styles/ 但凡是你想自定义QML键盘，就得用这个前缀

3.以上两点别问我为什么

完整的前缀就是：[ importpath ] + /QtQuick/VirtualKeyboard/Styles/ + 键盘主题文件夹名

在我的项目里面就是：/XTC/QtQuick/VirtualKeyboard/Styles/WDNMD

兄弟，不用纠结这个前缀路径是否真实存在，就按照模板来写完就完事儿，莫钻牛角尖

第五步，最后一步

在main.cpp中添加

QQmlApplicationEngine engine;
engine.addImportPath( ":/XTC" );	//添加自定义的importpath的路径(其实就是XTC)

qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));  //添加键盘
qputenv("QT_VIRTUALKEYBOARD_STYLE", "WDNMD");	//对应主题名

在跟项目pro文件中添加：

QT += virtualkeyboard

在main.qml添加键盘代码

    InputPanel {
        id: inputPanel
        z: 99
        x: 0
        y: window.height
        width: window.width

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }

到这一步已经配置完成自定义的键盘风格的配置

如果需要修改键盘风格，只需要修改style.qml中的代码

例如修改键盘按钮文字的颜色为黄色：

还可以修改键盘背景色和自定义键盘背景图片，和单个按钮的背景图片，各位自己去研究吧。

TMD，搞了老子半天