Qml / Qt / C ++：小部件中的QQuickView，位置不正确

Question

I'am implementing a simple program with QT5.5 which contains a HTML window (QWebview) like the following screenshot:

HTML window on the right side

Now I want the program also installed for iOS eg for iPad. I found that the QWebview class isn't available for mobile system, so I had to change my HTML window to QQuickView with QML files (or is there a better way?). I found the following code online:

QQuickView *view = new QQuickView();
QWidget *container = QWidget::createWindowContainer(view, this);
container->setMinimumSize(200,400);
container->setMaximumSize(200,400);
container->setFocusPolicy(Qt::TabFocus);
view->setSource(QUrl("qrc:///webview.qml"));
layout->addWidget(container);

Then i added the container to the mainWindow. The webview.qml:

import QtQuick 2.5
import QtWebView 1.0
Rectangle {
id: rectangle
width: 200
height: 400
WebView {
    id: webview
    url: "file:///test.html"
    anchors.fill: parent
    width: 200
    height: 400
}
}

But somehow I can't get the layout right. HTML window on iOS There is a blank/white rectangle behind the container, and the container is also not in the HTML window on the right side where it should be. When I change the width and the height of the rectangle in the qml file, it only changes the size of the webview, not the white background.

Can anyone tell me, how can I get this right? I have also used container->setParent() but the view is always on the left.

Answer 1

The visibility of the author's code is maybe not enough but overall it is easier to set the widget in layout with certain alignment. This way you command the widget to be on certain side and make the placement not to depend on coordinates / host widget size etc. The layout variable is assumed to be horizontal box layout or QHBoxLayout.

// make sure that QHBoxLayout* layout = new QHBoxLayout(this);
// or set the horizontal layout somehow else
QQuickView *view = new QQuickView();
QWidget *container = QWidget::createWindowContainer(view, this);

container->serFixedWidth(200); // the layout is horizontal
                               // and we *may* want to fix the width

container->setFocusPolicy(Qt::TabFocus);
view->setSource(QUrl("qrc:///webview.qml"));
layout->addWidget(container, Qt::AlignRight); // align to the right

Mind that the rest of horizontal layout should be filled like that with respecting relative positions in it.