qt - 使用屏幕键盘时保持输入字段在 View 中

Question

我有一个虚拟键盘，它从屏幕底部弹出并始终位于顶部。我将在我的应用程序中使用它并遇到一个小问题。

如果接受从此键盘输入的文本输入字段位于 View (主窗口/屏幕)的中间/底部，它将隐藏在键盘后面，即在隐藏键盘之前无法看到输入的内容。

键盘作为platforminputcontext插件运行，它将知道正在接受输入的字段。

void KeyboardPlatformInputContext::setFocusObject(QObject* object)
{
    qDebug() << m_focusedObject << object;
    m_focusedObject = object;
}

按下按键时，它们会作为 QEvents 传递，如下所示

void KeyboardPlatformInputContext::processNormalKeyClick(const QString& key)
{
    qDebug() << m_focusedObject << key;
    if (m_focusedObject) {
        QInputMethodEvent inputEvent;
        inputEvent.setCommitString(key);
        QGuiApplication::sendEvent(m_focusedObject, &inputEvent);
    }
}

现在，利用可用信息(m_focusedObject 和 QGuiApplication)，可以采取一些措施来保持输入字段在 View 中。永远。

Answer 1

库巴的想法是正确的；我将对此进行扩展。您可以使用Flickable例如，管理应用程序的内容。例如，假设您的应用程序的布局类似于表单:

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    id: root
    width: 480
    height: 800
    visible: true

    Column {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        Repeater {
            model: 20

            Row {
                spacing: 20

                Text {
                    text: "Input #" + (index + 1)
                    anchors.verticalCenter: parent.verticalCenter
                }
                TextInput {
                    width: 100
                    height: 30

                    onActiveFocusChanged: {
                        if (activeFocus)
                            keyboardRect.visible = activeFocus
                    }

                    Rectangle {
                        border.width: 1
                        anchors.fill: parent
                        anchors.margins: -1
                        z: -1
                    }
                }
            }
        }
    }

    Rectangle {
        id: keyboardRect
        width: parent.width
        height: parent.height * 0.3
        anchors.bottom: parent.bottom
        color: "grey"
        visible: false
    }
}

要使其可与虚拟键盘一起使用，请将内容移至 Flickable 中:

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    id: root
    width: 480
    height: 800
    visible: true

    Flickable {
        id: flickable
        anchors.fill: parent
        anchors.margins: 20
        anchors.bottomMargin: keyboardRect.visible ? keyboardRect.height : anchors.margins
        contentWidth: column.implicitWidth
        contentHeight: column.implicitHeight
        flickableDirection: Flickable.VerticalFlick

        Column {
            id: column
            spacing: 20

            Repeater {
                model: 20

                Row {
                    spacing: 20

                    Text {
                        text: "Input #" + (index + 1)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    TextInput {
                        width: 100
                        height: 30

                        onActiveFocusChanged: {
                            if (activeFocus) {
                                keyboardRect.visible = activeFocus

                                var posWithinFlickable = mapToItem(column, 0, height / 2);
                                flickable.contentY = posWithinFlickable.y - flickable.height / 2;
                            }
                        }

                        Rectangle {
                            border.width: 1
                            anchors.fill: parent
                            anchors.margins: -1
                            z: -1
                        }
                    }
                }
            }
        }
    }

    Rectangle {
        id: keyboardRect
        width: parent.width
        height: parent.height * 0.3
        anchors.bottom: parent.bottom
        color: "grey"
        visible: false
    }
}

需要注意的几点:

anchors.bottomMargin: keyboardRect.visible ? keyboardRect.height : anchors.margins

这可以确保当键盘可见时内容被“推”起来，这样键盘下面就不会隐藏任何内容。

onActiveFocusChanged: {
    if (activeFocus) {
        keyboardRect.visible = activeFocus

        var posWithinFlickable = mapToItem(column, 0, height / 2);
        flickable.contentY = posWithinFlickable.y - flickable.height / 2;
    }
}

此代码不会导致失去焦点，因此键盘始终保持打开状态。

我们通过将字段的位置映射到Column来将Flickable聚焦在当前输入字段上。

最后，当您单击列顶部或底部附近的字段时，您会看到一些跳跃。如果字段靠近顶部或底部，则可以通过不设置 contentY 来解决此问题。供读者练习。 :)