QML虚拟键盘添加自定义样式

QML自定义虚拟键盘样式

 本文测试源码项目：Git仓库

 Qt Quick自带有个Qt Virtual Keyboard，方便用户集成虚拟键盘，其样式有两种，default和retro。Qt文档里说明可以通过 QT_VIRTUALKEYBOARD_STYLE 环境变量来设置样式。 文档中也有自定义样式的方法（点击这里），本文也是针对文档里的方法做个操作说明。

 下图是Qt源码里自带的两个虚拟键盘样式：

---

具体操作如下：

1. 拷贝其中一个到自己的项目下，并修改名字，这里拷贝default并修改为darkblue

2. 将目录里的qrc文件添加到项目

 qrc文件名可以修改，以下是资源文件里的内容：

 需要注意的是，资源文件里的 前缀 设置需要以 $$[QT_INSTALL_QML]/QtQuick/VirtualKeyboard/Styles 为模板，也就是Qt在 [importPath]/QtQuick/VirtualKeyboard/Styles 路径下加载对应的样式的style.qml文件，其中importPath可以通过 QQmlEngine::addImportPath 来添加。这里前缀修改为 /MyStyles/QtQuick/VirtualKeyboard/Styles/darkblue 。

3. 修改style.qml里的 resourcePrefix 值

 这里要修改是因为默认主题里的一些图片路径以资源文件为准，修改为 qrc:/MyStyles/QtQuick/VirtualKeyboard/Styles/darkblue/ ，对应上面的前缀。

4. 修改main.cpp，设置新的主题

    QQmlApplicationEngine engine;
    engine.addImportPath(":/MyStyles");		//对应[importPath]
    qputenv("QT_VIRTUALKEYBOARD_STYLE", "darkblue");	//对应主题名

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

5. 根据需要修改style.qml的具体样式

  这里我修改 keyPanel 里的文字颜色为红色，运行后可以看到生效样式

---

最后对其中一些设置做以解释：

1. 步骤1中，提到重命名文件夹为darkblue。如果使用资源文件来管理样式的话，利用前缀，文件夹名其实不重要。重要的是 importPath 和 QT_VIRTUALKEYBOARD_STYLE 设置的主题名能对应到资源文件的路径上。
2. 步骤3里，对style.qml里的 resourcePrefix 对应做了修改，也可以根据自己的资源路径来替换。
3. 通过Qt的windeployqt部署后，需要拷贝Qt库里文件夹 $$[QT_INSTALL_QML]/QtQuick/VirtualKeyboard 到对应文件夹，内部包括Settings、Styles文件夹，和必要的文件，可能还需要拷贝Qt5VirtualKeyboard.dll