记录Qt 虚拟键盘样式修改与使用

文章目录

概述

一、使用虚拟键盘

二、项目文件定义

1.VirtualKeyboard.qml

2.main.qml

3.main.cpp

三、编译运行

1.编译

2.运行

3.运行效果

总结

概述

在 Qt 开发中，虚拟键盘是移动设备和嵌入式设备中常用的输入工具。本文将详细介绍如何通过 QML 修改虚拟键盘样式，并实现从 QML 界面跳转到 QWidget 设计的 UI 界面并将Qt程序移植到嵌入式Linux开发板。

一、使用虚拟键盘

Qt 提供了虚拟键盘模块，只需在.pro文件中添加

QT += virtualkeyboard

再在main.cpp中添加

qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

即可在输入框中使用虚拟键盘，在将程序移植到嵌入式linux开发板时，发现点击输入框时，虚拟键盘会覆盖整个显示屏，如下，于是使用qml来修改虚拟键盘的样式就非常有必要。

二、项目文件定义

Qt 提供了 QtQuick.VirtualKeyboard 模块，用于在 QML 中集成虚拟键盘。使用者可通过使用qml文件来对虚拟键盘的样式进行修改，如下即为项目目录：

其中 VirtualKeyboard.qml为虚拟键盘样式定义，在main.qml中定义了登陆界面，用户点击登陆后即可跳转到基于Qwidget的form.ui界面，

1.VirtualKeyboard.qml

定义一个虚拟键盘的输入面板，并设置了其样式和行为。它位于屏幕底部，默认是隐藏状态，当激活时会平滑地显示出来。

import QtQuick 2.12
import QtQuick.VirtualKeyboard 2.2
import QtQuick.VirtualKeyboard.Settings 2.2

InputPanel {
    id: inputPanel
    z: 99
    y: parent.height // 默认隐藏
    width: parent.width
    visible: true

    states: State {
        name: "visible"
        when: inputPanel.active
        PropertyChanges {
            target: inputPanel
            y: parent.height - inputPanel.height
        }
    }

    transitions: Transition {
        from: ""
        to: "visible"
        reversible: true
        ParallelAnimation {
            NumberAnimation {
                properties: "y"
                duration: 250
                easing.type: Easing.InOutQuad
            }
        }
    }

    Component.onCompleted: {
        VirtualKeyboardSettings.styleName = "retro" // 复古样式
        VirtualKeyboardSettings.wordCandidateList.alwaysVisible = true
        VirtualKeyboardSettings.activeLocales = ["zh_CN", "en_US"] // 改为中文和英文
    }
}

2.main.qml

代码中创建了一个简单的登录界面，在点击输入框时，会弹出修改样式之后的虚拟键盘并且虚拟键盘占显示屏幕的一半，点击登录按键后跳转到基于QWidget的form.ui界面。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5

Window {
    id: root
    visible: true
    width: 800
    height: 480
    title: qsTr("Demo")

    signal loginClicked() // 定义信号

    ColumnLayout {
        anchors.top: parent.top
        anchors.topMargin: root.height * 0.2
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 25

        RowLayout {
            spacing: 25

            Text {
                text: qsTr("用户名:")
                font.family: "微软雅黑"
                font.pixelSize: 20
            }
            TextField {
                id: usernameField
                placeholderText: "输入用户名.."
                font.family: "微软雅黑"
                font.pixelSize: 16
                Layout.preferredWidth: root.width * 0.25

                background: Rectangle {
                    radius: 4
                    border.color: parent.focus ? "#498ff8" : "#C4DBFC"
                }
            }
        }

        RowLayout {
            spacing: 25

            Text {
                text: qsTr("密   码:")
                font.family: "微软雅黑"
                font.pixelSize: 20
            }
            TextField {
                id: passwordField
                placeholderText: "输入密码.."
                font.family: "微软雅黑"
                font.pixelSize: 16
                Layout.preferredWidth: root.width * 0.25

                background: Rectangle {
                    radius: 4
                    border.color: parent.focus ? "#498ff8" : "#C4DBFC"
                }
            }
        }

        // 添加登录按钮
        Button {
            text: qsTr("登录")
            font.family: "微软雅黑"
            font.pixelSize: 16
            Layout.alignment: Qt.AlignHCenter
            onClicked: {
                root.loginClicked() // 触发信号
                root.hide() // 隐藏当前窗口
            }
        }
    }

    // 嵌入虚拟键盘
    Loader {
        id: keyboardLoader
        source: "VirtualKeyboard.qml"
        anchors.bottom: parent.bottom
        width: parent.width
    }
}

3.main.cpp

通过Qt框架整合了QML界面与后台逻辑，实现了高DPI支持、虚拟键盘的启用，并通过信号和槽机制连接了QML的交互与C++的业务逻辑。

#include <QApplication> // 替换 QGuiApplication
#include <QQmlApplicationEngine>
#include <QQuickWindow>
#include "form.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    // 启用虚拟键盘模块
    qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

    QApplication app(argc, argv); // 使用 QApplication

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    // 获取 QML 主窗口
    QObject *rootObject = engine.rootObjects().first();
    QQuickWindow *mainWindow = qobject_cast<QQuickWindow*>(rootObject);

    // 创建 Form 界面
    Form form;
    QObject::connect(&form, &Form::backToLogin, [mainWindow, &form]() {
        form.hide();
        mainWindow->show();
    });

    // 连接 QML 登录按钮信号槽
    QObject::connect(rootObject, SIGNAL(loginClicked()), &form, SLOT(show()));

    return app.exec();
}