QWidgets 与 Qml 相互嵌入方法，以及其中的一些坑

Dear 丶 2022-10-16 13:21 971阅读 0赞

### **【写在前面】** ###

有时候，当我们接手一个老项目( 也可能不老-.- )时，会碰上这些情况：

1、老项目使用 QWidgets，想要部分或全部迁移到 Qml。

2、老项目使用 Qml，想要部分或全部迁移到 QWidgets。

然而，很多时候全部迁移几乎不现实，此时，折中的方案应运而生：**QWdigets 和 Qml 相互嵌套使用。**

本篇主要内容：

1、**Qml 嵌入 QWiidgets 中的方法及一些坑;**

2、**QWiidgets 嵌入 Qml 中的方法及一些坑;**

--------------------

### **【正文开始】** ###

**Qml 嵌入 QWidgets 中相当容易，细数有两种方式：**

1、使用 static QWidget \*QWidget::createWindowContainer(QWindow \*, QWidget \*parent, Qt::WindowFlags flags)。

这种方式以 QWindow 为参数来创建一个 QWidget 容器，而 QWindow 又是 Qml 的容器。

QWidget *widget = new QWidget;
        QQuickWindow *quickWindow = new QQuickWindow;
        QWidget *center = QWidget::createWindowContainer(quickWindow, widget);

此时便已经将 Qml 嵌入QWidget 中，后面所有的 Qml 项在此 quickWindow 中即可。

另外，QQuickView 继承自 QQuickWindow ，可以根据喜好来使用。

要将 quickWindow 脱离出来也相当容易，使用 setParent(nullptr) 即可。

然而，文档中也提到，这种方式有很多缺点：

>  *  可能会出现性能问题。
>  *  堆叠顺序，可能无法正确处理覆盖问题。
>  *  焦点问题，可能无法正确传递焦点。
>  *  在 QWidget 使用过多的窗口容器将损坏整个程序的性能。

综上，这并不是一个很好的嵌入方案。

2、推荐方案的关键类为 **QQuickWidget**。

> 要使用 QQuickWidget，需 QT += quickwidgets。

使用方法也相当简单：

QQuickWidget *view = new QQuickWidget;
        view->setSource(QUrl::fromLocalFile("QmlComponent.qml"));
        view->show();

然而，在使用时发现这种方法有一些坑。

首先来看看代码 QmlComponent.qml：

import QtQuick 2.12
    
    Rectangle {
        width: 100
        height: 100
        color: "#cc00ff00"
    
        property int count: 0
    
        Text {
            anchors.centerIn: parent
            text: count
            color: "red"
            font.pointSize: 14
        }
    
        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                print('click');
                ++parent.count;
                //mouse.accepted = false;
            }
            onPressed: {
                parent.x += 1;
                parent.y += 1;
                //mouse.accepted = false;
            }
            onReleased: {
                parent.x -= 1;
                parent.y -= 1;
                mouse.accepted = false;
            }
        }
    }

main.cpp：

#include <QApplication>
    #include <QLabel>
    #include <QWidget>
    #include <QQuickWidget>
    
    class Widget : public QWidget
    {
        Q_OBJECT
    
    public:
        Widget(QWidget *parent = nullptr);
        ~Widget();
    
    protected:
        virtual void mousePressEvent(QMouseEvent *event);
        virtual void mouseReleaseEvent(QMouseEvent *event);
    };
    
    Widget::Widget(QWidget *parent)
        : QWidget(parent)
    {
        resize(800, 600);
    
        QLabel *label = new QLabel("text", this);
        auto s = (size() - label->size()) / 2;
        label->move(s.width(), s.height());
        label->show();
    
        QQuickWidget *qmlWidget = new QQuickWidget(QUrl("qrc:/QmlComponent.qml"), this);
        qmlWidget->setAttribute(Qt::WA_AlwaysStackOnTop);
        qmlWidget->setClearColor(Qt::transparent);
        qmlWidget->setResizeMode(QQuickWidget::SizeViewToRootObject);
        s = (size() - qmlWidget->size()) / 2;
        qmlWidget->move(s.width(), s.height());
        qmlWidget->show();
    
        update();
    }
    
    Widget::~Widget()
    {
    
    }
    
    void Widget::mousePressEvent(QMouseEvent *event)
    {
        qDebug() << "Widget mosue press event";
        event->ignore();
    }
    
    void Widget::mouseReleaseEvent(QMouseEvent *event)
    {
        qDebug() << "Widget mosue release event";
        event->ignore();
    }
    
    int main(int argc, char *argv[])
    {
        QApplication app(argc, argv);
    
        Widget w;
        w.show();
    
        app.exec();
    }
    
    #include "main.moc"

具体有两个大坑：

*  背景透明：

将其他小部件放在下面并使 QQuickWidget 透明不会导致预期的结果：下面的小部件将不可见。

原因是 QQuickWidget 是在所有其他常规的非 OpenGL 小部件之前绘制的。

解决方案是：将其置于顶层并设置清除颜色：

qmlWidget->setAttribute(Qt::WA_AlwaysStackOnTop);
        qmlWidget->setClearColor(Qt::transparent);

*  事件传播：

如果 Qml 中使用了 MouseArea，则一些事件不能正常传播：

例如 clicked 和 released。

另一方面，传递了 pressed 后，自身的 ( MouseArea ) 将无法接受到 released 事件。

这个坑目前没有找到好的解决方案 ( Ծ‸ Ծ  )。

**QWiidgets 嵌入 Qml 中则更加简单：**

1、使用 QWidget 的构造函数，传入父 Widget：QWidget::QWidget(QWidget \*parent)。

2、或者使用 QWidget::setParent() 设置父 Widget，本质与上面一样。

由于 QQuickWidget 继承自 QWidget，因此可以直接成为其他 QWidget 的父 Widget。

QQuickWidget *qmlWidget = new QQuickWidget(QUrl("qrc:/QmlComponent.qml"));
        qmlWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
        qmlWidget->resize(800, 600);
        qmlWidget->show();
    
        QLabel *label = new QLabel("text", qmlWidget);
        label->show();

**注意**：此时添加的 QWidget 将会处于 QQuickWidget 上方。

--------------------

### **【结语】** ###

呼~最后，虽然 Qml 和 QWidgets 相互嵌套有不少坑，但是在一些场合，确实是相当有用的。