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,推薦用微信聯系我。