QML WebEngineView Flick Content

Question

Я пытаюсь сделать простой веб-браузер для рабочего стола с Ubuntu 14.04, используя компоненты QML и WebEngineView. Приложение будет работать на устройствах с сенсорной панелью, поэтому было бы неплохо, чтобы содержимое, отображаемое внутри WebEngineView, отображалось на экране.

Я пытался сделать это таким образом, но это не работает:

...    
        WebEngineView {
            id: webView
            url: "http://google.com"
            width: parent.width
            height: winternet.height-navigationBar.height-iStatusBar.height-iBackButton.height
            anchors.top: navigationBar.bottom

            MouseArea {
                anchors.fill: parent
                drag.target: parent.data
            }

            onLinkHovered: {
                webView.url = hoveredUrl
            }
       }
...

Если у вас есть идеи или опыт с этим, пожалуйста, помогите!

Answer 1

Я тоже хотел сделать WebEngineView привлекательным. Я решил, что лучше делать это с помощью Flickable. Но наивный подход сделать что-то вроде:

...
Flickable {
    WebEngineView {...}
}
...

не будет работать.

Дальнейшие исследования привели меня к основанному на Qt веб-браузеру для встроенных сенсорных устройств. Я попробовал это на своем ПК. Кажется, что он делает именно то, что я хочу, но это слишком сложно, и лицензия GPL делает его бесполезным для любого использования.

После некоторых экспериментов я обнаружил, что щелчок будет работать, если Flickable.contentHeight и Flickable.contentWidth хотя бы соответствуют фактическому размеру веб-страницы, отображаемой WebEngineView. Эти свойства Flickable могут иметь большие значения, чем фактический размер страницы. В этом случае вы сможете выйти за пределы содержимого страницы. Если Flickable.contentHeight и / или Flickable.contentWidth меньше размера страницы, вы все равно сможете пролистывать. Вам решать, хотите вы этого или нет)

Таким образом, в итоге получился фактический отображаемый размер страницы и были установлены значения Flickable.contentHeight и Flickable.contentWidth. Я расскажу вам короткую историю: нет способа получить нужные значения с помощью API WebEngineView (или, по крайней мере, я ничего не нашел в документации 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: я решил вышеупомянутую проблему, но решение немного уродливо: сброс Flickable.contentWidth в WebEngineView.onLoadingChanged на Flickable.width. Установка 0 для Flickable.contentWidth приведет к неоправданно большой высоте содержимого после загрузки.

Еще одно изменение, которое я сделал, было снятие требования для 100% состояния загрузки.