【QT】QT的学习：使用QQuickWidget以及QQuickView

QQuickWidget以及QQuickView都可以用来加载qml文件，用于显示界面，但是到目前为止，自己并没有弄懂两者有什么区别，唯一确定的两个均能够跟widget窗口类进行混合编程。下面通过例子来记录下使用混合编程的时候两个控件的不同之处：

（1）使用QQuickwidget：

  

qml文件为：

import QtQuick 2.0
import QtQuick 2.2
Rectangle {
     id: page
     width: 500; height: 200
     color: "red"

 }

加载qml文件：

mainMapBoxWidget = new QQuickWidget(this);
mainMapBoxWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
mainMapBoxWidget->setSource(QUrl("qrc:/files/resource/file/mapBoxGlView.qml"));
mainMapBoxWidget->resize(MAIN_DISPALY_WIDTH,MAIN_DISPALY_HEIGH); 
mainMapBoxWidget->show();

得到的程序（其中有在主窗口有上下两个栏，添加的mainmapboxwidget没有把两个栏覆盖）：

（2）使用quickview：

保持qml文件不动，

mainMapBoxView = new QQuickView();
mainMapBoxWindow = QWidget::createWindowContainer(mainMapBoxView, this);
mainMapBoxWindow->resize(MAIN_DISPALY_WIDTH,MAIN_DISPALY_HEIGH);

mainMapBoxView->setResizeMode(QQuickView::SizeRootObjectToView);
mainMapBoxView->setSource(QUrl("qrc:/files/resource/file/mapBoxGlView.qml"));
mainMapBoxWindow->show();

发现上下两个栏没有了，被新增加的mainmzpboxwindow覆盖了。

（3）还是使用qquickwidget，加载mapboxgl的地图。

import QtQuick 2.0
import QtPositioning 5.5
import QtLocation 5.9

Rectangle {
     id: mapWindow
     //anchors.fill: parent//在地图中添加开了这一项之后地图会不显示，因此注释掉
     Map {
         id: map
         anchors.fill: parent
         plugin: Plugin { name: "mapboxgl" }

         center: QtPositioning.coordinate(60.170448, 24.942046) // Helsinki
         zoomLevel: 11
         MapParameter {
             type: "source"

             property var name: "routeSource"
             property var sourceType: "geojson"
             property var data: '{ "type": "FeatureCollection", "features":[{ "type": "Feature", "properties": {}, "geometry": {"type": "LineString", "coordinates": [[ 24.934938848018646, 60.16830257086771 ], [ 24.943315386772156, 60.16227776476442 ]]}}]}'
             }

         MapParameter {
             type: "layer"
             property var name: "route"
             property var layerType: "line"
             property var source: "routeSource"
             property var before: "road-label-small"
         }

         MapParameter {
             type: "paint"
             property var layer: "route"
             property var lineColor: "blue"
             property var lineWidth: 8.0
         }

         MapParameter {
             type: "layout"

             property var layer: "route"
             property var lineJoin: "round"
             property var lineCap: "round"
         }
     }

 } 

得到程序：

注意：在qml中Rectangle后面不能加anchors.fill: parent否则地图会不显示。

如果还是使用QQuickView的话还是会覆盖上下两个状态栏，如下图：网上说一般只有在全部使用qml的时候才会用QQuickView，不知道是不是这样

建议：如果有知道原因的可以留言；如果还是想用QQuickView的可以使用布局：layout的形式：

QVBoxLayout *layout = new QVBoxLayout(this);
layout->addWidget(labelBar);
layout->addWidget(mainMapBoxWidget);
layout->addWidget(buttonBar);
layout->setMargin(0);
layout->setSpacing(0);

当然使用QQuickWidget也是可以使用layout的布局的。

跟之前的显示差不多，区别就是地图原来是布满整个窗口的，状态栏是透明的话，状态栏的下面也会显示地图，但是使用布局layout的时候，地图只会占据窗口的中间部分，状态栏的下面不会显示有地图。