我们可以看到在Ubuntu SDK中有一个自己的WebView。它没有采用Qt标准的Webkit库。在Ubuntu上，我们对下面的引擎做了很多的优化(oxide引擎)，这样使得我们的WebView性能更加优越。
下面我们通过一个例子来设计出一个简单的Browser。
import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Web 0.2
import QtQuick.Layouts 1.1
/*!
\brief MainView with a Label and Button elements.
*/
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "browser.liu-xiao-guo"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: units.gu(100)
height: units.gu(75)
Page {
title: i18n.tr("")
RowLayout {
id:toolbar
anchors.top: parent.top
width: parent.width
height: units.gu(8)
spacing: units.gu(1)
Icon {
id: back
anchors.verticalCenter: parent.verticalCenter
name: "go-previous"
height: input.height
width: height
visible: webview.canGoBack
MouseArea {
anchors.fill: parent
onClicked: webview.goBack();
}
}
Icon {
id: forward
anchors.verticalCenter: parent.verticalCenter
name: "go-next"
height: input.height
width: height
visible: webview.canGoForward
MouseArea {
anchors.fill: parent
onClicked: webview.goForward();
}
}
TextField {
id: input
anchors.verticalCenter: parent.verticalCenter
height: parent.height - units.gu(1)
Layout.maximumWidth: parent.width
Layout.preferredWidth: parent.width - back.width - forward.width
text: ""
onAccepted: {
webview.url = input.text
}
}
}
WebView {
id: webview
anchors.top: toolbar.bottom
height: parent.height - toolbar.height
width: parent.width
url: ""
}
}
}
在这里，，我们使用了：
import Ubuntu.Web 0.2
模块。在上面我们使用了两个Icon来返回或向前看。同时我们设计了一个TextField来输入我们想要去的地址。注意地址必须是以http开始的字符串。当我们按下enter键后，就会自己打开页面。
代码不多，但是它完成了我们想要完成的东西。
整个项目的源码在：git clone https://gitcafe.com/ubuntu/browser.git
利用WebView API来做一个自己的浏览器
