我总结的：

1. Before using qtvirtualkeyboard, you should know:

1.1 Project directory: D:\Qt\Qt5.9.0\5.9\Src\qtvirtualkeyboard

1.2 Default build directory: D:\Qt\Qt5.9.0\5.9\Src\build-qtvirtualkeyboard-Desktop_Qt_5_9_0_MinGW_32bit-Debug

1.3 layouts directory: D:\Qt\Qt5.9.0\5.9\Src\qtvirtualkeyboard\src\virtualkeyboard\content\layouts，

A language+country has a corresponding sub-directory. The qml types inherit from KeyboardLayout or KeyboardLayoutLoader.

They define the layout of the keys.

1.4 styles directory: D:\Qt\Qt5.9.0\5.9\Src\qtvirtualkeyboard\src\virtualkeyboard\content\styles

A style has a corresponding sub-directory. The qml type inherits from KeyboardStyle.

They define the UI style, such as background images, text fonts and colors.

1.5 Sample project directory: D:\Qt\Qt5.9.0\Examples\Qt-5.9\virtualkeyboard

2. Build qtvirtualkeyboard

2.1 Open project D:\Qt\Qt5.9.0\5.9\Src\qtvirtualkeyboard\qtvirtualkeyboard.pro in qtcreator.

2.2 Add CONFIG += lang-all(or languages we need) in file D:\Qt\Qt5.9.0\5.9\Src\qtvirtualkeyboard\src\virtualkeyboard\virtualkeyboard.pro

2.3 Add make install to build steps.

2.4 Build projects src\openwnn, src\pinyin, src\tcime firstly.

2.5 Build the whole project.

3. Using qtvirtualkeyboard

3.1 In the main() function: qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

or, $ QT_IM_MODULE=qtvirtualkeyboard myapp

3.2 In the main() function: qputenv("QT_VIRTUALKEYBOARD_STYLE", QByteArray("retro"));

Or, Component.onCompleted: VirtualKeyboardSettings.styleName = "retro";

3.3 Add the following lines to your .pro file

static {

QT += svg

QTPLUGIN += qtvirtualkeyboardplugin

}

3.3 Create InputPanel(Otherwise the virtual keyboard will be shown at the bottom of screen)

import QtQuick 2.0

import QtQuick.VirtualKeyboard 2.1

Item {

id: root

Item {

id: appContainer

anchors.left: parent.left

anchors.top: parent.top

anchors.right: parent.right

anchors.bottom: inputPanel.top

...

}

InputPanel {

id: inputPanel

y: Qt.inputMethod.visible ? parent.height - inputPanel.height : parent.height

anchors.left: parent.left

anchors.right: parent.right

}

}

3.4 Change VirtualKeyboardSettings.locale, and current language will change correspondingly.

3.5 Property VirtualKeyboardSettings.activeLocales can be used to limit the list of available languages in the application lifetime.

4. Customize style

4.1 Create a directory, vss for example, in D:\Qt\Qt5.9.0\5.9\Src\qtvirtualkeyboard\src\virtualkeyboard\content\styles\;

4.2 Copy all files in D:\Qt\Qt5.9.0\5.9\Src\qtvirtualkeyboard\src\virtualkeyboard\content\styles\retro to vss, change the images files and modify style.qml;

4.2 Add following lines to file D:\Qt\Qt5.9.0\5.9\Src\qtvirtualkeyboard\src\virtualkeyboard\virtualkeyboard.pro

RESOURCES += \

content/styles/vss/vss_style.qrc \

OTHER_FILES += \

content/styles/vss/*.qml \

4.3 Add following lines to style.qml to make a language selecting popup list

languagePopupListEnabled: true

languageListDelegate: SelectionListItem {

id: languageListItem

width: languageNameTextMetrics.width * 17

height: languageNameTextMetrics.height + languageListLabel.anchors.topMargin + languageListLabel.anchors.bottomMargin

Text {

id: languageListLabel

anchors.left: parent.left

anchors.top: parent.top

anchors.leftMargin: languageNameTextMetrics.height / 2

anchors.rightMargin: anchors.leftMargin

anchors.topMargin: languageNameTextMetrics.height / 3

anchors.bottomMargin: anchors.topMargin

text: languageNameFormatter.elidedText

color: "#5CAA15"

font {

family: fontFamily

weight: Font.Normal

pixelSize: 44 * scaleHint

}

}

TextMetrics {

id: languageNameTextMetrics

font {

family: fontFamily

weight: Font.Normal

pixelSize: 44 * scaleHint

}

text: "X"

}

TextMetrics {

id: languageNameFormatter

font {

family: fontFamily

weight: Font.Normal

pixelSize: 44 * scaleHint

}

elide: Text.ElideRight

elideWidth: languageListItem.width - languageListLabel.anchors.leftMargin - languageListLabel.anchors.rightMargin

text: displayName

}

states: State {

name: "current"

when: languageListItem.ListView.isCurrentItem

PropertyChanges {

target: languageListLabel

color: "black"

}

}

}

languageListBackground: Rectangle {

color: "white"

border {

width: 1

color: "#929495"

}

}

languageListAdd: Transition {

NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 200 }

}

languageListRemove: Transition {

NumberAnimation { property: "opacity"; to: 0; duration: 200 }

}