我总结的：
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 }
}
