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 based Web browser for embedded touch devices. Я пробовал это на своем ПК. Похоже, что он делает именно то, что я хочу, но он слишком сложный, и лицензия GPL делает его бесполезным для любого использования.

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

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

Другая настройка, которую я сделал, это удаление требования для состояния загрузки 100%.