在上章我们学习了45.qt quick-qml虚拟软键盘详解(一)_诺谦的博客-CSDN博客,知道如何自定义qml键盘后,本章继续来学习.
1.介绍
接下来我们便来自定义一款好看的qml软键盘.如下图所示:
支持背景更换、支持动图:
支持动态加载移除语言(支持多国语言,高达40多个语言):
可以看到我们选择了繁体后,返回就可以选择繁体语言了.除此之外还支持:
- 支持拖拽、自由缩小放大、
- 支持定位坐标、
2.代码实现
由于软键盘是个特殊程序,是提供给app主程序使用的,所以我们以QML插件的形式创建工程、
- QML插件讲解:44.qt quick-qml插件详解_诺谦的博客-CSDN博客
整个工程如下所示:
其中qmldir如下所示:
module KeyboardPlugin
plugin KeyboardPlugin
internal KeyboardBackImage KeyboardBackImage.qml
internal KeyboardSet KeyboardSet.qml
internal KeyboardTitle KeyboardTitle.qml
KeyboardWindow 1.0 KeyboardWindow.qml
typeinfo mymodule.qmltypes
qmldir在QML插件章节有讲解,这里定义了我们的插件是在KeyboardPlugin模块里面.后面我们就需要在主程序App.exe所在位置 创建一个KeyboardPlugin目录,然后将qml、qmldir、dll统统放进去
然后编译得到一个dll:
3.写APP主程序
在app.pro中需要定义如下所示:
RESOURCES += ../KeyboardPlugin/keyboard_plgin.qrc
# 使用静态插件
static {
QT += svg
QTPLUGIN += qtvirtualkeyboardplugin
}
win32 {
contains(QT_ARCH, x86_64) {
message("x64")
# 输出目录
DESTDIR = $$PWD/../outputX64/
} else {
message("win32")
# 输出目录
DESTDIR = $$PWD/../outputWin32/
}
}
我们这里指定了输出目录,因为我们要将编译好的KeyboardPlugin模块插件放到exe所在的路径下,让app能够找到键盘.
我们以outputWin32目录为例,在该目录下创建个KeyboardPlugin目录(我们的插件模块),然后将键盘插件的qml、qmldir、dll都放进来:
然后在main.cpp中导入键盘:
最后写main.qml:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.14
import KeyboardPlugin 1.0
import "qrc:/keyboard_plugin/"
Window {
id: window
visible: true
width: 640
height: 595
title: qsTr("Hello World")
/*使用键盘插件*/
KeyboardWindow {
id: keyboard
mainObj: window
}
Column {
id: textEditors
spacing: 15
anchors.fill: parent
Label {
color: "#565758"
text: "全局键盘示例"
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 22
}
TextField {
width: parent.width
placeholderText: "One line field"
font.pixelSize: 20
onPressed: {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
onFocusChanged: if (focus) {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
}
TextField {
id: passwordField
width: parent.width
echoMode: TextInput.Password
placeholderText: "密码区域"
inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhPreferLowercase | Qt.ImhSensitiveData | Qt.ImhNoPredictiveText
font.pixelSize: 20
onPressed: {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
onFocusChanged: if (focus) {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
}
TextField {
id: upperCaseField
width: parent.width
placeholderText: "Upper case field"
inputMethodHints: Qt.ImhUppercaseOnly
font.pixelSize: 20
onPressed: {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
onFocusChanged: if (focus) {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
}
TextField {
id: lowerCaseField
width: parent.width
placeholderText: "Lower case field"
inputMethodHints: Qt.ImhLowercaseOnly
font.pixelSize: 20
onPressed: {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
onFocusChanged: if (focus) {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
}
TextField {
id: phoneNumberField
validator: RegExpValidator { regExp: /^[0-9\+\-\#\*\ ]{6,}$/ }
width: parent.width
placeholderText: "拨打电话模式"
inputMethodHints: Qt.ImhDialableCharactersOnly
font.pixelSize: 20
onPressed: {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
onFocusChanged: if (focus) {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
}
TextField {
id: formattedNumberField
width: parent.width
placeholderText: "仅支持数字或者符号"
inputMethodHints: Qt.ImhFormattedNumbersOnly
font.pixelSize: 20
onPressed: {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
onFocusChanged: if (focus) {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
}
TextArea {
id: textArea
width: parent.width
height: 70
placeholderText: "多行编辑"
font.pixelSize: 20
onPressed: {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
onFocusChanged: if (focus) {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
background: Rectangle {
color: "#eeeeee"
}
}
TextField {
id: digitsField
width: parent.width
placeholderText: "只允许使用数字"
inputMethodHints: Qt.ImhDigitsOnly
font.pixelSize: 20
onPressed: {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
onFocusChanged: if (focus) {
keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)
}
}
}
}
这里我们定义了一个KeyboardWindow组件、然后每次当焦点为true 或者 用户点击输入框的时候,就调用keyboard.targetOpen(this, KeyboardWindow.BaseToHorizontal)、
- 第一个参数 : 用来定位键盘的坐标,始终在输入框下面显示
- 第二个参数 : 设置键盘的水平对齐方式、我们这里是居中显示
如下图所示:
qml键盘插件源码和App程序已经上传至专栏群(第一章底部获取)中,感兴趣的自行下载、
入群需验证订阅用户名,尽量选择"订阅专栏"、"学习会员"会验证失败、