【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没有把两个栏覆盖):

【QT】QT的学习:使用QQuickWidget以及QQuickView_第1张图片

(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覆盖了。

【QT】QT的学习:使用QQuickWidget以及QQuickView_第2张图片

(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"
         }
     }

 } 

得到程序:

【QT】QT的学习:使用QQuickWidget以及QQuickView_第3张图片

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

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

【QT】QT的学习:使用QQuickWidget以及QQuickView_第4张图片

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

QVBoxLayout *layout = new QVBoxLayout(this);
layout->addWidget(labelBar);
layout->addWidget(mainMapBoxWidget);
layout->addWidget(buttonBar);
layout->setMargin(0);
layout->setSpacing(0);
当然使用QQuickWidget也是可以使用layout的布局的。

【QT】QT的学习:使用QQuickWidget以及QQuickView_第5张图片

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

你可能感兴趣的:(【QT】QT的学习:使用QQuickWidget以及QQuickView)