qt qml virtrulKeyBoard custom style 虚拟键盘自定义样式方法

    今天我把纠结了好几天的qml自带的虚拟键盘自定义样式的功能实现了，成功修改键盘的样式颜色。

    首先把官网的文档先复制一下，

    后面会写我自己的实际操作方法，

    英文水平真的很重要！！！

Keyboard Styles

The virtual keyboard styling system supports built-in styles as well as custom styles. The built-in styles are embedded as Qt Resources into the plugin binary and the custom styles are located in the file system and can be installed without recompiling the virtual keyboard itself.

The selection of the runtime style is affected by an environment variable QT_VIRTUALKEYBOARD_STYLE, which can be set to the name of the built-in style, e.g. "retro", or any of the custom styles installed into the Styles directory:

$$[QT_INSTALL_QML]/QtQuick/VirtualKeyboard/Styles

In case the environment variable is not set, or contains an invalid style name, the virtual keyboard falls back in the default built-in style.

Adding Custom Styles

The process of creating a new style begins by creating a new subdirectory for the style in a QML import path under the URL-based directory structure QtQuick/VirtualKeyboard/Styles/. See QML Import Path for information about QML import paths. The directory name can not contain spaces or special characters other than underscore. Also, the directory name can not be the same as one of the built-in style, which currently includes "default" and "retro".

A good starting point for creating a new style is to use an existing built-in style as a template and edit it. You can find the built-in styles from the virtual keyboard sources directory src/virtualkeyboard/content/styles. Copy one of the directories containing a built-in style into the Styles directory and rename it to "test". The directory structure should now be as follows:

test/default_style.qrc

test/style.qml

test/images

test/images/backspace.png

test/images/check.png

test/images/enter.png

test/images/globe.png

test/images/hidekeyboard.png

test/images/search.png

test/images/shift.png

The QRC configuration file, which is unnecessary in this case, can be safely removed.

Note: The style.qml file should not be renamed, or otherwise the virtual keyboard cannot load the style.

Next, open the style.qml in your favorite editor and set the resourcePrefix property to an empty string. The resource prefix is not needed as the resources are contained in the same directory as the style.qml file.

Also, to make it more obvious to see that the custom style is actually being loaded and used, set the keyboard background to a different color:

keyboardBackground: Rectangle {

    color: "gray"

}

The final step is to run the example application with your custom style:

QT_VIRTUALKEYBOARD_STYLE=test virtualkeyboard

    以上就是官方文档了。认真看完，你就能实现了，我就这样实现的，好了，今天的教程就结束啦。。。。。别别别，放下你们的大刀，我当然会讲解啦，如果人人都能看文档看会，那就不要csdn啦，当然csdn不只是一个翻译文档的社区。

    以下都是在macOS环境下实现的，不过和windows应该差不多。

    第一步，要修改虚拟键盘的样式，就要先找到键盘的样式文件，/Qt5.13.1/5.13.1/Src/qtvirtualkeyboard/src/virtualkeyboard/content/styles/default/style.qml，这个就是Mac下的qt的键盘样式文件目录，文件夹default就是这个样式的名称。

    第二步，把文件夹复制到/Qt5.13.1/5.13.1/clang_64/qml/QtQuick/VirtualKeyboard/Styles  这个目录里面，然后重命名为例如 test 。

    第三步，按照自己的要求修改里面的style.qml,以后使用这个样式就用test。

    第四步，在项目的pro文件中，加入这样一句话

QT_VIRTUALKEYBOARD_STYLE=test virtualkeyboard
           

我理解就是把test的样式加载进项目。

    第五步，别忘了修改一下样式内容，不然展示的和default的样式没有区别

//这里把键盘的背景色改成了灰色
keyboardBackground: Rectangle {
    color: "gray"
}
           

    最后，在代码中使用样式，

Component.onCompleted: {

    VirtualKeyboardSettings.styleName="test"

}

           

qt程序在运行时，就会去调用这个键盘样式了。整个操作完成。

如果您有任何问题，请联系我，您是真的能联系到我的哟，不是说说的。

邮箱：[email protected]，微信：smy498271160,推荐用微信联系我。