QML 中自定义虚拟键盘

最新推荐文章于 2024-09-12 07:38:42 发布
最新推荐文章于 2024-09-12 07:38:42 发布
阅读量1.2k 收藏 13
点赞数 16
分类专栏： Qt QML 文章标签： qt qml 虚拟键盘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34139994/article/details/135355516
版权
Qt 同时被 2 个专栏收录
43 篇文章 253 订阅
订阅专栏
QML
39 篇文章 29 订阅
订阅专栏

作者：billy
版权声明：著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处

前言

我们知道 Qt 中虚拟键盘模块遵循的是 GPL 协议，是不可用于商业发布的。如果项目中使用了 Qt 自带的虚拟键盘，在正式发布项目时必须要开源才可以。因此为了避免使用此模块就需要自己来实现一个虚拟键盘功能。博主在网上也搜到了一些资源，基本上都是 widget 来实现的，用 qml 来做的很少，这里我们以官方的虚拟键盘为参照，用 qml 自己实现一个键盘。

功能展示

在这里插入图片描述

代码展示

1. main.qml

界面上的元素包括：两个自定义文本输入框 BQTextInput ，一个自定义虚拟键盘 BQVirtualKeyboard ，还有一个切换中英文的按钮。虚拟键盘显示的条件是当前焦点正在文本输入框中

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 1024; height: 768
    visible: true
    title: qsTr("Virtual Keyboard Demo")

    Rectangle {
        anchors.fill: parent
        color: "lightblue"

        BQTextInput {
            id: input1
            x: 10; y: 10
            width: 300; height: 40
            pixelSize: 16
            textFontFamily: "微软雅黑"
            placeholderText: "测试文本1"
        }

        BQTextInput {
            id: input2
            x: 10; y: 60
            width: 300; height: 40
            pixelSize: 16
            textFontFamily: "微软雅黑"
            placeholderText: "测试文本2"
        }

        Button {
            x: 10; y: 110
            width: 120; height: 40
            font.pixelSize: 16
            text: "切换键盘语言"
            onClicked: virtualKeyboard.languageType = virtualKeyboard.languageType == 1 ? 2 : 1
        }

        BQVirtualKeyboard {
            id: virtualKeyboard
            y: 180
            anchors.horizontalCenter: parent.horizontalCenter
            visible: input1.hasFocus || input2.hasFocus
        }
    }
}
2. BQTextInput.qml

自定义文本输入框，从其他项目中直接拷贝过来的，主要用于实现账号密码登录时的文本输入，如下图所示
在这里插入图片描述

import QtQuick 2.15

// 自定义文本输入框
Rectangle {
    width: 200; height: 40
    color: "white"

    property int rightDis: 0                        // 右侧缩进
    property int pixelSize: 16                      // 字体大小
    property string textFontFamily: ""              // 字体样式
    property string placeholderText: ""             // 提示文本
    property alias textInput: input                 // 文本输入
    property bool isPassword: false                 // 密码输入
    property string imageSource: ""                 // 图像资源
    property bool hasFocus: input.focus             // 输入框焦点

    signal imagePressed()

    TextInput {
        id: input
        x: 5
        width: parent.width - rightDis - 10
        height: parent.height
        activeFocusOnPress: true
        font.pixelSize: pixelSize
        font.family: textFontFamily
        verticalAlignment: TextInput.AlignVCenter
        echoMode: isPassword ? TextInput.Password : TextInput.Normal
        clip: true

        Text {
            x: 5
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: pixelSize
            font.family: textFontFamily
            verticalAlignment: Text.AlignVCenter
            text: placeholderText
            visible: input.text == ""
        }
    }

    Image {
        id: image
        width: rightDis; height: rightDis
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: (parent.height - rightDis) / 2
        source: imageSource
        visible: rightDis != 0

        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: {
                image.focus = true
                imagePressed()
            }
        }
    }
}
3. BQVirtualKeyboard.qml

自定义虚拟键盘，一共4行布局，符号可以按照需求自己改

import QtQuick 2.15

// 自定义虚拟键盘
Rectangle {
    id: virtualKeyboard
    width: 710; height: 290
    radius: 5
    color: "black"

    property bool isUpper: false            // 是否大写
    property bool isEnglish: true           // 是否英文
    property int page: 1                    // 字符页面
    property int pixelSize: 16              // 字体大小
    property string textFontFamily: ""      // 字体样式
    property int languageType: 1            // 语言 1-中文 2-英文

    property var en_line1_lower: ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"]
    property var en_line1_upper: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
    property var en_line2_lower: ["a", "s", "d", "f", "g", "h", "j", "k", "l"]
    property var en_line2_upper: ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
    property var en_line3_lower: ["z", "x", "c", "v", "b", "n", "m"]
    property var en_line3_upper: ["Z", "X", "C", "V", "B", "N", "M"]

    property var char_page1_line1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
    property var char_page1_line2: ["~", "-", "+", ";", ":", "_", "=", "|", "\\"]
    property var char_page1_line3: ["`", ",", ".", "<", ">", "/", "?"]

    property var char_page2_line1: ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"]
    property var char_page2_line2: ["[", "]", "{", "}", "'", "\"", "I", "II", "III"]
    property var char_page2_line3: ["IV", "V", "VI", "VII", "VIII", "IX", "X"]

    // 第一行
    Row {
        y: 10
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10

        Repeater {
            model: {
                if (isEnglish) {
                    isUpper ? en_line1_upper : en_line1_lower
                } else {
                    page == 1 ? char_page1_line1 : char_page2_line1
                }
            }

            Rectangle {
                width: 60; height: 60
                radius: 5
                color: area1.pressed ? "#2A2826" : "#383533"

                Text {
                    anchors.fill: parent
                    font.pixelSize: pixelSize
                    font.family: textFontFamily
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    color: area1.pressed ? "#5D4B37" : "#FFFFFF"
                    text: modelData
                }

                MouseArea {
                    id: area1
                    anchors.fill: parent
                    focus: false
                    onClicked: {
                        var focusedItem = commonFun.getFocusedItem(virtualKeyboard.parent)
                        focusedItem.text = focusedItem.text + modelData
                    }
                }
            }
        }
    }

    // 第二行
    Row {
        y: 80
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10

        Repeater {
            model: {
                if (isEnglish) {
                    isUpper ? en_line2_upper : en_line2_lower
                } else {
                    page == 1 ? char_page1_line2 : char_page2_line2
                }
            }

            Rectangle {
                width: 60; height: 60
                radius: 5
                color: area2.pressed ? "#2A2826" : "#383533"

                Text {
                    anchors.fill: parent
                    font.pixelSize: pixelSize
                    font.family: textFontFamily
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    color: area2.pressed ? "#5D4B37" : "#FFFFFF"
                    text: modelData
                }

                MouseArea {
                    id: area2
                    anchors.fill: parent
                    focus: false
                    onClicked: {
                        var focusedItem = commonFun.getFocusedItem(virtualKeyboard.parent)
                        focusedItem.text = focusedItem.text + modelData
                    }
                }
            }
        }
    }

    // 第三行
    Row {
        y: 150
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10

        // shift
        Rectangle {
            width: 95; height: 60
            radius: 5
            color: area_shift.pressed ? "#2A2826" : "#383533"

            Text {
                anchors.fill: parent
                font.pixelSize: pixelSize
                font.family: textFontFamily
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: area_shift.pressed ? "#5D4B37" : (isEnglish && isUpper ? "#239B56" : "#FFFFFF")
                text: isEnglish ? "Shift" : (page == 1 ? "1/2" : "2/2")
            }

            MouseArea {
                id: area_shift
                anchors.fill: parent
                focus: false
                onClicked: {
                    if (isEnglish) {
                        isUpper = !isUpper
                    } else {
                        page == 1 ? (page = 2) : (page = 1)
                    }
                }
            }
        }

        Repeater {
            model: {
                if (isEnglish) {
                    isUpper ? en_line3_upper : en_line3_lower
                } else {
                    page == 1 ? char_page1_line3 : char_page2_line3
                }
            }

            Rectangle {
                width: 60; height: 60
                radius: 5
                color: area3.pressed ? "#2A2826" : "#383533"

                Text {
                    anchors.fill: parent
                    font.pixelSize: pixelSize
                    font.family: textFontFamily
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    color: area3.pressed ? "#5D4B37" : "#FFFFFF"
                    text: modelData
                }

                MouseArea {
                    id: area3
                    anchors.fill: parent
                    focus: false
                    onClicked: {
                        var focusedItem = commonFun.getFocusedItem(virtualKeyboard.parent)
                        focusedItem.text = focusedItem.text + modelData
                    }
                }
            }
        }

        // backspace
        Rectangle {
            width: 95; height: 60
            radius: 5
            color: area_backspace.pressed ? "#2A2826" : "#383533"

            Text {
                anchors.fill: parent
                font.pixelSize: pixelSize
                font.family: textFontFamily
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: area_backspace.pressed ? "#5D4B37" : "#FFFFFF"
                text: languageType == 1 ? "回 退" : "Backspace"
            }

            MouseArea {
                id: area_backspace
                anchors.fill: parent
                focus: false
                onClicked: {
                    var focusedItem = commonFun.getFocusedItem(virtualKeyboard.parent)
                    focusedItem.text = focusedItem.text.slice(0, -1)
                }
            }
        }
    }

    // 第四行
    Row {
        y: 220
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10

        // switch
        Rectangle {
            width: 95; height: 60
            radius: 5
            color: area_switch.pressed ? "#2A2826" : "#383533"

            Text {
                anchors.fill: parent
                font.pixelSize: pixelSize
                font.family: textFontFamily
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: area_switch.pressed ? "#5D4B37" : "#FFFFFF"
                text: isEnglish ? "&123" : "ABC"
            }

            MouseArea {
                id: area_switch
                anchors.fill: parent
                focus: false
                onClicked: isEnglish = !isEnglish
            }
        }

        // space
        Rectangle {
            width: 375; height: 60
            radius: 5
            color: area_space.pressed ? "#2A2826" : "#383533"

            Text {
                anchors.fill: parent
                font.pixelSize: pixelSize
                font.family: textFontFamily
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: area_space.pressed ? "#5D4B37" : "#FFFFFF"
                text: languageType == 1 ? "空 格" : "Space"
            }

            MouseArea {
                id: area_space
                anchors.fill: parent
                focus: false
                onClicked: {
                    var focusedItem = commonFun.getFocusedItem(virtualKeyboard.parent)
                    focusedItem.text += " "
                }
            }
        }

        // clear
        Rectangle {
            width: 95; height: 60
            radius: 5
            color: area_clear.pressed ? "#2A2826" : "#383533"

            Text {
                anchors.fill: parent
                font.pixelSize: pixelSize
                font.family: textFontFamily
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: area_clear.pressed ? "#5D4B37" : "#FFFFFF"
                text: languageType == 1 ? "清 空" : "Clear"
            }

            MouseArea {
                id: area_clear
                anchors.fill: parent
                focus: false
                onClicked: {
                    var focusedItem = commonFun.getFocusedItem(virtualKeyboard.parent)
                    focusedItem.text = ""
                }
            }
        }

        // hide
        Rectangle {
            id: hide
            width: 95; height: 60
            radius: 5
            color: area_hide.pressed ? "#2A2826" : "#383533"

            Text {
                anchors.fill: parent
                font.pixelSize: pixelSize
                font.family: textFontFamily
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: area_hide.pressed ? "#5D4B37" : "#FFFFFF"
                text: languageType == 1 ? "隐 藏" : "Hide"
            }

            MouseArea {
                id: area_hide
                anchors.fill: parent
                onClicked: hide.focus = true
            }
        }
    }
}
4. 获取当前拥有焦点的控件

在 BQVirtualKeyboard.qml 文件中用到了下面这行代码，其目的是获取当前拥有焦点的控件，这个操作可以说是自己实现虚拟键盘的一个难点，只要获取到当前拥有焦点的控件，就可以根据虚拟键盘上按下的按键，对控件的内容进行修改

var focusedItem = commonFun.getFocusedItem(virtualKeyboard.parent)

创建一个 CommonFunction 类，实现 getFocusedItem 函数，通过父节点去寻找子控件中哪一个拥有焦点

QQuickItem* CommonFunction::getFocusedItem(QQuickItem* rootItem)
{
    if ( rootItem->hasActiveFocus() ) {
        return rootItem;
    }

    QList<QQuickItem*> childItems = rootItem->childItems();
    for (QQuickItem *childItem : childItems)
    {
        QQuickItem *focusedItem = getFocusedItem(childItem);
        if (focusedItem) {
            return focusedItem;
        }
    }

    return nullptr;
}
lucky-billy
关注
专栏目录
Qt Quick QML实现自定义虚拟软键盘详解
.
04-12 1479
实现自定义软键盘后，我们需要将它集成到具体的应用程序中。Item {width: 400在这个示例中，我们将自定义软键盘和TextField组件一起放入一个Item中。在函数中，我们设置属性为当前被点击的文本框，然后显示自定义软键盘。通过Qt Quick QML的强大能力，我们可以轻松实现自定义虚拟软键盘，并将其与应用程序进行集成。在实际开发中，可以根据具体需求来设计软键盘的样式和布局，并实现相应的按键事件响应逻辑。
Qt之QML虚拟键盘
刘一儿(嵌入式)
11-04 2794
键盘样式一： 键盘样式二： Qt官方软键盘示例： 要想使用Qt中的虚拟键盘，需要以下几个步骤： 1.修改你的.pro文件，添加如下内容： static { QT += svg QTPLUGIN += qtvirtualkeyboardplugin } QT_VIRTUALKEYBOARD_STYLE=qtvirtualkeyboard myapp 2.在main.cpp中添加以下代码： qputenv("QT_IM_MODULE", QByteArray("qt
QML虚拟键盘添加自定义样式
eiilpux17的博客
08-23 2351
QML自定义虚拟键盘样式 Qt Quick自带有个Qt Virtual Keyboard，方便用户集成虚拟键盘，其样式有两种，default和retro。Qt文档里解释可以通过QT_VIRTUALKEYBOARD_STYLE环境变量来设置样式。 文档中也提到如何修改默认样式（点击这里），本文也是针对文档里的方法做个操作解释。 下图是Qt自带的两个样式路径： 具体操作如下： 拷贝其中一个到自己的项目下（比如default），并改个名字，这里修改为darkblue 将目录里的qrc文件添加到项目
QML Virtual Keyboard 使用教程
最新发布
gitblog_00572的博客
09-12 311
QML Virtual Keyboard 使用教程 qml-virtualkey Pure QML in-app virtual key/keyboard/pad 项目地址: https://gitcode.com/gh_mirr...
QML —— 使用Qt虚拟键盘示例（附完整源码）
wx微信公众号“码农总动员”，获取更多编程知识
01-03 2125
QML —— 使用Qt虚拟键盘示例（附完整源码）
QML编写的虚拟键盘
07-21
跟早期的版本类似，但是添加了很多功能，添加了大小写切换，清空，定位插入删除，可以选择删除
qml 虚拟键盘
cyerogy的专栏
11-02 725
数字键盘 普通键盘 样式代码 VirtualKeyboard.qml import QtQuick 2.11 import "../keyboard/ops.js" as KeyboardConfig Rectangle { id: vk z:200 color: "#E7E8EC" property string keyboardMode: "number"// number,normal property int keyboardButtonWid..
基于QML的虚拟键盘
09-02
基于QML的虚拟键盘，很辛苦才找到，奉献给大家。
qml自定义虚拟键盘
stay_healthily的博客
06-08 747
官方文档 传送门 下面是qt官方文档种复制过来的 The virtual keyboard styling system supports built-in styles as well as custom styles. The built-in styles are embedded as Qt Resources into the plugin binary and the custom styles are located in the file system and can be installe
qml-virtualkey:纯QML应用内虚拟键盘
05-13
总结来说，`qml-virtualkey` 是一个强大的QML组件，它提供了在纯QML应用内构建自定义虚拟键盘或游戏手柄的能力，极大地扩展了Qt Quick应用的功能和灵活性，特别适用于移动和嵌入式设备的开发。通过深入理解和利用这...
qml 软键盘 虚拟键盘
04-27
在提供的文件列表中，我们可以看到`main.cpp`、`siprequesteater.cpp`和`siprequesteater.h`可能是用于处理软键盘请求的C++类，`main.qml`是QML应用程序的入口点，`VirtualKeyboard.qml`和`VKButton.qml`可能是...
QML虚拟键盘
03-16
QT5.5.1做的，未带键盘背景图片，需要自己找，userEdit和psEdit是我这边的TextInput输入部件定义的id，如有错误或者建议欢迎指正，感谢
qml 中英文虚拟键盘
huangzhizhi1995的博客
11-29 1977
  .pro文件中添加： static {         QT += svg         QTPLUGIN += qtvirtualkeyboardplugin     } CONFIG+="lang-en_GB lang-zh_CN"#支持中文切换 unix:!macx: PRE_TARGETDEPS += $$PWD/../../../Qt5.9.6/5.9.6/Src/qtvir...
qml虚拟键盘自定义风格
weixin_41013199的博客
05-17 886
Qt Quick自带有个Qt Virtual Keyboard，方便用户集成虚拟键盘，其样式有两种，default和retro。Qt文档里说明可以通过 QT_VIRTUALKEYBOARD_STYLE 环境变量来设置样式 1、在Qt5.12.9/5.12.9/Src/qtvirtualkeyboard/src/virtualkeyboard/content/styles目录下复制default文件夹 2、拷贝其中一个到自己的项目下，并修改名字，这里拷贝default并修改为light 3、将light目录
Qt Quick-QML虚拟软键盘详解
FucMobile的博客
09-26 1050
在上面的示例中，我们使用了一个矩形（Rectangle）作为虚拟软键盘的容器，并在其中定义了一个GridLayout来布局键盘的按键。在Qt Quick应用程序开发中，虚拟软键盘是一个重要的组件，它提供了一种方便的方式让用户在触摸屏设备上输入文本。在实际的应用程序中，我们可以根据需求自定义虚拟软键盘的样式和布局，并通过与其他组件的交互实现文本输入的功能。虚拟软键盘的设计和实现可以根据具体的应用需求而变化，但是我们可以通过以下步骤来创建一个基本的虚拟软键盘。在这个组件中，我们可以定义键盘的布局和样式。
自定义qml虚拟键盘layout、style
qq_27050303的博客
03-27 639
1、在工程目录下新建custom目录，将虚拟键盘源码的里对应文件复制过来，修改相应参数。
qml虚拟键盘的实现
qq_45514832的博客
06-23 1547
qml虚拟键盘添加 在QGuiApplication之前添加QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); #include <QGuiApplication> #include <QQmlApplicationEngine> int main(int argc, char *argv[]) { qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboa
QML之虚拟键盘
gaojuning520的专栏
01-12 3708
文件列表： main.qml import QtQuick 1.0 import "components" import "components/ops.js" as Ops Rectangle { id: window width: 600; height: 380 color: "#444444" property st
QML 自定义软键盘--踩坑日记
weixin_43248755的博客
03-10 1805
QML自带的键盘只有两种风格，但怕是不够用哦？ 那么如何自定义键盘风格： 第一步：复制Qt自带的键盘风格文件资源到自己的项目目录下(我安装的是Qt5.12.4) Qt安装路径\5.12.4\Src\qtvirtualkeyboard\src\virtualkeyboard\content\styles 可以看到Qt自带的两个键盘风格， default 和 reto 第二步：任意复制一个文件夹(我复制的是default文件夹)到自己的项目目录下，并且改名为 “WDNMD” 第三步: 添加WDNMD目录里面
QML中自定义Button组件的设计与实现
QML中的自定义按钮通常涉及到以下知识点： 1. **QtQuick.Controls模块**：这是QML中用于创建现代应用程序用户界面的主要模块，它包含了各种控件，比如按钮、滑动条、复选框等。 2. **Button组件**：在QtQuick....
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值