qml虚拟键盘的实现

qml虚拟键盘添加

	在QGuiApplication之前添加QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    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);

    return app.exec();
}

在qml中实现

    Rectangle{
        id: inputer
        x:250
        y: 350
        width: 100
        height: 20
        color: "yellow"
        border.color:"gray"
        TextInput{
            anchors.fill: parent
            anchors.margins: 4
            focus: true
            text: "please in...."
        }
        function move( height ) {
            inputer.y += height;
        }
    }
    InputPanel {
        id: inputPanel
        z: 99
        x: 0
        y: window.height
        width: window.width

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }

展现的效果图如图：

但是，会遮盖部分输入框：

**qml虚拟键盘遮挡输入框解决方法
**
在InputPanel中添加onActiveChanged{}，并在被遮挡的输入框添加function（）函数，实现整体的上移操作(这里用的函数是move)。
.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.VirtualKeyboard 2.4
import QtQuick.Layouts 1.11

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle{
        id: input
        x:250
        y: 150
        width: 100
        height: 20
        color: "white"
        border.color:"gray"
        TextInput{
            anchors.fill: parent
            anchors.margins: 4
            focus: true
            text: "please in ....."
        }
        function move( qq ) {
            input.y += qq;
        }
    }
    Rectangle{
        id: inputer
        x:250
        y: 350
        width: 100
        height: 20
        color: "yellow"
        border.color:"gray"
        TextInput{
            anchors.fill: parent
            anchors.margins: 4
            focus: true
            text: "please input ....."
        }
        function move( height ) {
            inputer.y += height;
        }
    }
    InputPanel {
        id: inputPanel
        z: 99
        x: 0
        y: window.height
        width: window.width

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
        onActiveChanged: {
            input.move(active ? -150 : 150)
            inputer.move(active ? -150 : 150)
        }
    }
}

最后实现的效果展示如图：