WebEngineView + 虚拟键盘 - 调整大小后保持滚动位置（重点输入）

Question

我有一个基于 WebEngineView 和 Qt Quick 虚拟键盘的非常简单的浏览器应用程序。

一切正常 - 每次单击 web 视图中的输入时，键盘都会完美显示，但令我困扰的是，如果我单击底部的输入，键盘会在打开后覆盖它，我不能看看我在输入什么。

我尝试通过调整 WebEngineView 元素的大小以适应键盘高度来解决这个问题，就像大多数移动应用程序一样。有效，我可以在键盘下滚动页面，但键盘仍然覆盖输入，我需要手动滚动。

有什么方法可以调整网页视图的滚动位置，使键盘不会覆盖来自 QML 的焦点输入？ 我不能在单个网站上这样做，因为我允许导航到用户想要的任何网站，所以我需要一些通用方法。

这是我的 qml 代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import FreeVirtualKeyboard 1.0
import QtWebEngine 1.8

Window {
    id: appContainer;
    visible: true
    width: 1280
    height: 600
    title: qsTr("WebEngineView")
    property string pathUrl: "https://www.w3schools.com/html/html_forms.asp"

    WebEngineView {
        id: webview
        width: appContainer.width
        url: appContainer.pathUrl
        height: appContainer.height
    }

    /*
      Virtual keyboard
    */
     InputPanel {
        id: inputPanel
        z: 99
        y: appContainer.height
        anchors.left: parent.left
        anchors.right: parent.right
        states: State {
            name: "visible"
            when: Qt.inputMethod.visible
            PropertyChanges {
                target: inputPanel
                y: appContainer.height - inputPanel.height

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

            onRunningChanged: {
                if(!running && inputPanel.state == "visible") {
                    // finished showing keyboard
                    webview.height = appContainer.height - inputPanel.height
                    console.log('Keyboard shown')
                } else if(running && inputPanel.state != "visible") {
                    // begins to hide keyboard
                    webview.height = appContainer.height
                    console.log('Keyboard starts to hide');
                }
            }
        }
    }
}

到目前为止，调整大小部分工作正常 - 我在 onRunningChanged 中执行此操作，因此 webview 在转换开始之前和结束之后调整大小 - 这可以防止在转换期间显示丑陋的空白空间。

更新 用webview.runJavaScript和scrollIntoView在显示键盘后达到了我想要的效果：

webview.runJavaScript("document.activeElement.scrollIntoView({block: 'nearest', inline: 'nearest', behavior: 'smooth'})");

但是我不确定这是否是最好的解决方案，因为我不喜欢将 javascript 评估纳入流程的事实。我想知道是否还有其他“本地”方式可以做到这一点。

Answer 1

调整 WebEngineView 的大小，滚动到视图中

调整WebEngineView 大小的问题在于，HTML 会看到您的设备屏幕突然缩小，并可能决定呈现截然不同的布局，例如将菜单从屏幕顶部移动到屏幕的一侧。

即使这没有发生，布局也发生了变化。新“屏幕”上的位置与旧“屏幕”上的位置不对应，没有 1:1 的关系，这就是为什么它首先滚动到一个看似随机的位置。

我们可以tell webpage 到scroll a focused element into view of new viewport:

• 如果它已经在屏幕上，那么什么都不会发生。
• 如果没有，网页会滚动以使元素尽可能适合屏幕。 scrollIntoView 具有根据需要滚动到屏幕顶部/底部的参数

所以当屏幕键盘打开时：

1. 保存原图scrollPosition
2. 调整大小WebEngineView
3. （可选）将 scrollPosition 分配给保存的值 - 尽管它可能对您没有任何好处
4. 使用runJavaScript 确定activeElement 并使其成为scrollIntoView

当屏幕键盘关闭时重复相同的步骤。

不要调整大小，手动滚动

另一种方法是不调整“屏幕”的大小，如果元素被覆盖，只需将其滚动到视图中。

这需要 Qt 更改 VisualViewport，同时保持 LayoutViewport 不变（有关更多信息，请参阅 this 和 this），但似乎 Qt 无法做到这一点，至少不能仅通过 QML。

这让我们不得不手动进行：使用getBoundingClientRect 确定位置，计算键盘覆盖了多少空间，如果它不在我们计算的未覆盖视图区域内 - scrollTo 它。

（您仍然需要runJavaScript 才能进入网页）

也许this 和this 这样的问题会有所帮助

其他选项

@Hazelnutek 报告了document.activeElement.scrollIntoViewIfNeeded() 的一些成功

请参阅下面 cmets 中对此答案的讨论：