我也想让WebEngineView轻弹。我决定，最好使用Flickable来做。但是天真的做法是：
...
Flickable {
WebEngineView {...}
}
...
不管用。
进一步的调查使我了解了用于嵌入式触摸设备的基于 Qt 的 Web 浏览器。我已经在我的电脑上试过了。看起来它完全符合我的要求，但它太复杂了，而且 GPL 许可证使它无法用于任何用途。
经过一些实验，我发现如果Flickable.contentHeight和Flickable.contentWidth至少与 WebEngineView 显示的网页的实际大小匹配，则轻弹将起作用。Flickable 的这些属性可能具有比实际页面大小更大的值。在这种情况下，您将能够超越页面内容。如果 Flickable.contentHeight 和/或 Flickable.contentWidth 小于页面大小，您仍然可以轻弹。是否需要这种方式取决于您）
所以它最终获得了显示的实际页面大小并将其设置为 Flickable.contentHeight 和 Flickable.contentWidth。我在这里给你一个简短的故事：没有办法使用 WebEngineView API 获得所需的值（或者至少我在 Qt 5.7/5.8 文档中没有找到任何东西）。但我不小心在 SO 上找到了这个答案。使用这个答案，我设法使一切正常：
...
Item {
Layout.fillHeight: true
Layout.fillWidth: true
Flickable {
id: flick
anchors.fill: parent
WebEngineView {
anchors.fill: parent
id: webView
}
}
webView.onLoadingChanged: {
if (webView.loadProgress == 100) {
webView.runJavaScript(
"document.documentElement.scrollHeight;",
function (i_actualPageHeight) {
flick.contentHeight = Math.max (
i_actualPageHeight, flick.height);
})
webView.runJavaScript(
"document.documentElement.scrollWidth;",
function (i_actualPageWidth) {
flick.contentWidth = Math.max (
i_actualPageWidth, flick.width);
})
}
}
}
...
上面截取的代码可能需要一些调整，但它几乎是我拥有的代码的副本。
UPD 1：我发现这不是最终解决方案，因为由于某种原因，在加载新页面后 document.documentElement.scrollWidth 可能不会重置并保持与上一页相同。
UPD 2：我已经解决了上述问题，但解决方案有点难看：将 WebEngineView.onLoadingChanged 中的 Flickable.contentWidth 重置为 Flickable.width。将 Flickable.contentWidth 设置为 0 会导致加载后内容的高度过大。
我所做的另一项调整是取消了对 100% 加载状态的要求。
UPD 3：flickable WebEngiveView 的更完整版本。使用用户脚本而不是直接调用 JavaScript，因为我遇到了一些奇怪的错误，后者导致 WebEngineView 关闭。
// Copyright 2019 Utility Tool Kit Open Source Contributors
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy
// of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.
//
// Author: Innokentiy Alaytsev <alaitsev@gmail.com>
//
// File name: qml/Utk/Qml/FlickableWebEngineView.qml
//
// Description: The QML FlickableWebEngineView QtQuick 2 component.
import QtQuick 2.7
import QtWebEngine 1.3
Item {
property alias flickable: flickable;
property alias webView: webView;
property bool userDragImgEnabled: true;
property bool userSelectEnabled: true;
readonly property string kDisableUserDragCssId:
"utk_qml_flickable_web_engine_view_disable_user_drag_css";
readonly property string kDisableUserSelectCssId:
"utk_qml_flickable_web_engine_view_disable_user_select_css";
readonly property string kDisableUserDragCss:
"{ \\ \
-webkit-user-drag: none; \\ \
-khtml-user-drag: none; \\ \
-moz-user-drag: none; \\ \
-ms-user-drag: none; \\ \
user-drag: none; \\ \
}";
readonly property string kDisableUserSelectCss:
"{ \\ \
-webkit-touch-callout: none; \\ \
-webkit-user-select: none; \\ \
-khtml-user-select: none; \\ \
-moz-user-select: none; \\ \
-ms-user-select: none; \\ \
user-select: none; \\ \
}";
WebEngineScript {
id: disableUserDragScript;
name: kDisableUserDragCssId;
injectionPoint: WebEngineScript.DocumentReady;
sourceCode: applyCssJavaScript ("img", kDisableUserDragCss, kDisableUserDragCssId);
worldId: WebEngineScript.MainWorld;
}
WebEngineScript {
id: disableUserSelectScript;
name: kDisableUserSelectCssId;
injectionPoint: WebEngineScript.DocumentReady;
sourceCode: applyCssJavaScript ("body", kDisableUserSelectCss, kDisableUserSelectCssId);
worldId: WebEngineScript.MainWorld;
}
Flickable {
id: flickable;
anchors.fill : parent;
clip: true;
WebEngineView {
id: webView;
anchors.fill : parent;
scale: 1;
onLoadingChanged: {
if (loadRequest.status !== WebEngineView.LoadSucceededStatus) {
return;
}
flickable.contentHeight = 0;
flickable.contentWidth = flickable.width;
runJavaScript (
"document.documentElement.scrollHeight;",
function (actualPageHeight) {
flickable.contentHeight = Math.max (
actualPageHeight, flickable.height);
});
runJavaScript (
"document.documentElement.scrollWidth;",
function (actualPageWidth) {
flickable.contentWidth = Math.max (
actualPageWidth, flickable.width);
});
}
}
}
onUserDragImgEnabledChanged: {
if (userDragImgEnabled &&
(webView.loadRequest.status === WebEngineView.LoadSucceededStatus)) {
runJavaScript (revertCssJavaScript (kDisableUserDragCssId));
}
else {
webView.userScripts = currentUserScripts ();
}
}
onUserSelectEnabledChanged: {
if (userSelectEnabled &&
(webView.loadRequest.status === WebEngineView.LoadSucceededStatus)) {
runJavaScript (revertCssJavaScript (kDisableUserSelectCssId));
}
else {
webView.userScripts = currentUserScripts ();
}
}
function currentUserScripts () {
var userScriptsToSkip = [
disableUserDragScript.name,
disableUserSelectScript.name
];
var updatedUserScripts = [];
for (var i in webView.userScripts) {
var script = webView.userScripts[ i ];
if (-1 == userScriptsToSkip.indexOf (script.name)) {
updatedUserScripts.push (script);
}
}
if (!userDragImgEnabled) {
updatedUserScripts.push (disableUserDragScript);
}
if (!userSelectEnabled) {
updatedUserScripts.push (disableUserSelectScript);
}
return updatedUserScripts;
}
function applyCssJavaScript (selector, css, cssId) {
var applyCssJavaScript =
"(function () { \
cssElement = document.createElement ('style'); \
\
head = document.head || \
document.getElementsByTagName ('head')[ 0 ]; \
\
head.appendChild (cssElement); \
\
cssElement.type = 'text/css'; \
cssElement.id = '%1'; \
\
if (cssElement.styleSheet) \
{ \
cssElement.styleSheet.cssText = '%2 %3'; \
} \
else \
{ \
cssElement.appendChild ( \
document.createTextNode ('%2 %3')); \
} \
})();";
return applyCssJavaScript
.arg (cssId)
.arg (selector)
.arg (css);
}
function revertCssJavaScript (cssId) {
var revertCssJavaScript =
"(function () { \
var element = document.getElementById('%1'); \
\
if (element) { \
element.outerHTML = ''; \
\
delete element; \
} \
})()";
return revertCssJavaScript.arg (cssId);
}
}