46.qt quick-自定义非常好看的qml虚拟软键盘-支持换肤、动态加载移除语言(二)

最新版本已更新请用最新版本:108.qt quick-QML虚拟软键盘V3版本-新增点击空白区域收回键盘、支持ListView、Flickable自动布局-CSDN博客在上章我们学习了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.qmltypesqmldir在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程序已经上传至专栏群(第一章底部获取)中,感兴趣的自行下载、入群需验证订阅用户名,尽量选择订阅专栏、学习会员会验证失败、