qtwebview minibrowser example

Android Studio
安装完, 先不要进入设置！
mirror - online installer

qt-online-installer-windows-x64-x.x.x.exe --mirror Y

Create Qt Project

File -> New Project

v6.x
Qt Quick Application
v5.15
Qt Quick Application(compat)

project setting

project name

my_browser

Define Build System

CMake

Define Project Details
Mini Qt version:

Qt 5.15/6.5

Kit Selection

Android Qt x.x.x Clang x86_64

Using Qt WebView

QML API

import QtWebView

C++ API

#include <QtWebView/QtWebView>

Building with CMake

package

find_package(Qt6 REQUIRED COMPONENTS Quick WebView)

target

target_link_libraries(appmy_browser
    PRIVATE Qt6::Quick Qt6::WebView
)

initial

// first line
QtWebView::initialize();

Icon

copy “Examples\Qt-6.x.x\webview\minibrowser\images” to project folder

Qt 6.x

CMakeLists.txt

qt_add_qml_module(appmy_browser
    URI my_browser
    VERSION 1.0
    QML_FILES 
        Main.qml
    RESOURCES 
        images/left-32.png
        images/refresh-32.png
        images/right-32.png
        images/stop-32.png
)

Qt 5.15

qml.qrc

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>images/left-32.png</file>
        <file>images/stop-32.png</file>
        <file>images/refresh-32.png</file>
        <file>images/right-32.png</file>
    </qresource>
</RCC>

implementation

Layouts

import QtQuick.Layouts

Button The Qt examples use ToolButton, but we use Button.

usage Button 替换 toolbutton

Icon Image Use IconImage instead of iconSource.
v6.8
The auto behavior was changed in QTBUG-123103, so IconImage must be explicitly introduced!

import QtQuick.Controls.impl

Styles

Q: Cannot assign to non-existent property “style”

A: 2.0已经不支持 QtQuick.Controls.Styles

WebView

    WebView {
        id: webView
        anchors.fill: parent
        url: "https://www.qt.io"
        onLoadingChanged: function(loadRequest) {
            if (loadRequest.errorString)
                console.error(loadRequest.errorString);
        }
    }

WebViewLoadRequest

In v6.8 the parameter is used explicitly; In v6.5 it can be used implicitly.

v6.8

onLoadingChanged: function(loadRequest) { //... }

v6.5

onLoadingChanged: { //... }

ToolBar is a container of application-wide and context sensitive actions and controls, such as navigation buttons and search fields. ToolBar is commonly used as a header or a footer of an ApplicationWindow.

footer
要使用footer属性时，必须使用

import QtQuick.Controls
ApplicationWindow { //... }

Main.qml(part)

footer: ToolBar {
    id: navigationBar
    height: 64

    RowLayout {
        anchors.fill: parent
        spacing: 0

        Button {
            contentItem: Row {
                IconImage {
                    source: "images/left-32.png"
                }
                Text {
                     text: qsTr("<")
                }
            }
            enabled: webView.canGoBack
            onClicked: webView.goBack()
        }

        Item { Layout.preferredWidth: 5 }

        Button {
            contentItem: Row {
                IconImage {
                    source: "images/right-32.png"
                }
                Text {
                     text: qsTr(">")
                }
            }
            enabled: webView.canGoForward
            onClicked: webView.goForward()
        }

        Item { Layout.preferredWidth: 5 }

        Button {
            contentItem: Row {
                IconImage {
                    source: webView.loading ? "images/stop-32.png" : "images/refresh-32.png"
                }
                Text {
                    text: qsTr("Ref/Stop")
                }
            }
           background: Rectangle {
               color: "steelblue"
           }

           onClicked: webView.loading ? webView.stop() : webView.reload()
        }

        Item { Layout.preferredWidth: 10 }
    }
}

Menu