Qt VirtualKeyboard 增加 定制主题风格（Styles） 方法。
Signed-off-by: rick.chan <cy@haoan119.com>
This commit is contained in:
rick.chan
parent
83160536ae
commit
74ca2e217d
@ -1,5 +1,11 @@
|
||||
# Qt VirtualKeyboard 支持中文
|
||||
|
||||
- [Qt VirtualKeyboard 支持中文](#qt-virtualkeyboard-支持中文)
|
||||
- [1. 概述](#1-概述)
|
||||
- [2. 配置和编译](#2-配置和编译)
|
||||
- [3. 定制主题风格（Styles）](#3-定制主题风格styles)
|
||||
- [4. 外部参考资料](#4-外部参考资料)
|
||||
|
||||
## 1. 概述
|
||||
|
||||
Qt VirtualKeyboard 不需要输入法做后端，其以插件插件形式提供功能，库安装在 \<QT\>/plugins/virtualkeyboard 目录下，中文拼音输入法由 qtvirtualkeyboard_pinyin.dll/qtvirtualkeyboard_pinyin.so 提供功能。
|
||||
@ -13,7 +19,7 @@ Qt VirtualKeyboard 相关目录如下：
|
||||
| qtvirtualkeyboardplugin QML files | \<QT_INSTALL_QML\>/QtQuick/VirtualKeyboard | /system/qml/QtQuick/VirtualKeyboard |
|
||||
| qtvirtualkeyboardstylesplugin | \<QT_INSTALL_QML\>/QtQuick/VirtualKeyboard/Styles | /system/qml/QtQuick/VirtualKeyboard/Styles |
|
||||
|
||||
Ubuntu 系统 apt 安装该组件不支持中文拼音输入，需要卸载 Qt VirtualKeyboard 组件后自行通过官方源码编译安装。在 <https://download.qt.io> 的不同 official releases 中的 submodules 下可以找到不同版本的源码，例如，对应 Qt 5.15.10 的 VirtualKeyboard 下载连接如下：
|
||||
Ubuntu 系统 apt 安装该组件不支持中文拼音输入，需要卸载 Qt VirtualKeyboard 组件后自行通过官方源码编译安装。在 <https://download.qt.io> 的不同 official releases 中的 submodules 下可以找到不同版本的源码，例如，对应 Qt 5.15.3 和 Qt 5.15.10 的 VirtualKeyboard 下载连接如下：
|
||||
|
||||
- [qtvirtualkeyboard-everywhere-opensource-src-5.15.10.zip](https://download.qt.io/official_releases/qt/5.15/5.15.10/submodules/qtvirtualkeyboard-everywhere-opensource-src-5.15.10.zip)
|
||||
- [qtvirtualkeyboard-everywhere-opensource-src-5.15.10.tar.xz](https://download.qt.io/official_releases/qt/5.15/5.15.10/submodules/qtvirtualkeyboard-everywhere-opensource-src-5.15.10.tar.xz)
|
||||
@ -32,3 +38,119 @@ sudo make install
|
||||
```
|
||||
|
||||
即可。可选择的 CONFIG 语言可在源码目录下的 src/config.pri 文件中找到。
|
||||
|
||||
## 3. 定制主题风格（Styles）
|
||||
|
||||
包括修改 Qt VirtualKeyboard 的显示字体、颜色和字体大小等。这方面重要的参考资料是《Qt Virtual Keyboard Overview》（见 [4. 外部参考资料](#4-外部参考资料)）中的“Keyboard Styles”章节。
|
||||
|
||||
Qt VirtualKeyboard 包含一组内嵌主题，其以 Qt Resources 的形式编译到了 VirtualKeyboard 插件中。外部主题位于系统目录中，可以直接替换而不需要重新编译 VirtualKeyboard 插件。
|
||||
|
||||
QT_VIRTUALKEYBOARD_STYLE 宏可以指定 VirtualKeyboard 所使用的主题，包括内嵌的主题（主题名为“retro”），以及安装于：
|
||||
|
||||
```bash
|
||||
$$[QT_INSTALL_QML]/QtQuick/VirtualKeyboard/Styles
|
||||
```
|
||||
|
||||
目录下的主题。
|
||||
|
||||
可以通过拷贝并修改原有主题的方式创建新的主题风格。在 VirtualKeyboard 源码的 src/styles/builtin 目录下（该目录基于 Qt6，Qt5 VirtualKeyboard 位于 src/virtualkeyboard/content/styles/default 目录下）。
|
||||
|
||||
这里以创建 test 为例，将主题文件拷贝至 $$[QT_INSTALL_QML]/QtQuick/VirtualKeyboard/Styles/test 目录下，拷贝完毕后改目录文件如下：
|
||||
|
||||
```bash
|
||||
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
|
||||
```
|
||||
|
||||
QRC 配置文件是不必要的，可删除。
|
||||
|
||||
打开 style.qml 文件进行修改，比如修改背景为灰色：
|
||||
|
||||
```js
|
||||
keyboardBackground: Rectangle {
|
||||
color: "gray"
|
||||
}
|
||||
```
|
||||
|
||||
最后一步就是设置 QT_VIRTUALKEYBOARD_STYLE 环境变量来使 test 主题生效：
|
||||
|
||||
```bash
|
||||
QT_VIRTUALKEYBOARD_STYLE=test virtualkeyboard
|
||||
```
|
||||
|
||||
启动 Qt 应用程序来验证以上修改和配置即可。
|
||||
|
||||
style.qml 文件中默认字体和待选词字号、颜色的关键设置位于以下关键代码中：
|
||||
|
||||
```js
|
||||
KeyboardStyle {
|
||||
id: currentStyle
|
||||
readonly property bool compactSelectionList: [InputEngine.InputMode.Pinyin, InputEngine.InputMode.Cangjie, InputEngine.InputMode.Zhuyin].indexOf(InputContext.inputEngine.inputMode) !== -1
|
||||
readonly property string fontFamily: "Sans"
|
||||
|
||||
// ...
|
||||
|
||||
selectionListHeight: 85 * scaleHint
|
||||
selectionListDelegate: SelectionListItem {
|
||||
id: selectionListItem
|
||||
width: Math.round(selectionListLabel.width + selectionListLabel.anchors.leftMargin * 2)
|
||||
Text {
|
||||
id: selectionListLabel
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Math.round((compactSelectionList ? 50 : 140) * scaleHint)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: decorateText(display, wordCompletionLength)
|
||||
color: "#80c342"
|
||||
font {
|
||||
family: fontFamily
|
||||
weight: Font.Normal
|
||||
pixelSize: 44 * scaleHint
|
||||
}
|
||||
function decorateText(text, wordCompletionLength) {
|
||||
if (wordCompletionLength > 0) {
|
||||
return text.slice(0, -wordCompletionLength) + '<u>' + text.slice(-wordCompletionLength) + '</u>'
|
||||
}
|
||||
return text
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
id: selectionListSeparator
|
||||
width: 4 * scaleHint
|
||||
height: 36 * scaleHint
|
||||
radius: 2
|
||||
color: "#35322f"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.left
|
||||
}
|
||||
states: State {
|
||||
name: "current"
|
||||
when: selectionListItem.ListView.isCurrentItem
|
||||
PropertyChanges {
|
||||
target: selectionListLabel
|
||||
color: "white"
|
||||
}
|
||||
}
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
- property string fontFamily：为默认字体，默认为“Sans”
|
||||
- selectionListHeight：带选词区域高度
|
||||
- selectionListDelegate：带选词委托对象
|
||||
- Text：文字区域
|
||||
- color：文字颜色
|
||||
- font：字体字号等的设置
|
||||
- states：带选词状态机，主要是选定和未选定，默认选定词为白色。
|
||||
|
||||
## 4. 外部参考资料
|
||||
|
||||
1. [Qt Virtual Keyboard Overview](https://doc.qt.io/qt-6/qtvirtualkeyboard-overview.html)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user