QML 与 QWidget：联系、区别与使用场景

文章目录

前言

一、QML 与 QWidget 的联系

1.1 同属 Qt 框架

1.2 共享底层功能

1.3 混合使用

二、QML 与 QWidget 的区别

2.1 技术架构

2.2 开发效率

2.3 界面表现力

2.4 性能

2.5 跨平台支持

三、使用场景

3.1 QWidget 的使用场景

3.2 QML 的使用场景

四、QML 与 QWidget 的混合使用

4.1 在 QWidget 中嵌入 QML

4.2 在 QML 中调用 QWidget

总结

---

前言

在 Qt 框架中，QML 和 QWidget 是两种不同的技术，用于构建用户界面。它们各有优缺点，适用于不同的场景。本文将详细介绍它们的联系、区别以及使用场景。

一、QML 与 QWidget 的联系

1.1 同属 Qt 框架

QML 和 QWidget 都是 Qt 框架的一部分，可以用于开发跨平台的桌面、移动和嵌入式应用程序。

1.2 共享底层功能

它们都基于 Qt 的核心功能（如信号与槽、事件处理等），并且可以与 C++ 代码无缝集成。

1.3 混合使用

在同一个项目中，QML 和 QWidget 可以混合使用。例如，可以在 QWidget 应用程序中嵌入 QML 界面，或者在 QML 应用程序中调用 QWidget 组件。

二、QML 与 QWidget 的区别

2.1 技术架构

• QWidget：基于传统的面向对象编程模型，使用 C++ 代码构建界面。

• QML：基于声明式编程模型，使用 QML 语言和 JavaScript 构建界面。

2.2 开发效率

• QWidget：需要编写大量 C++ 代码，开发效率较低。

• QML：声明式语法简洁直观，开发效率高。

2.3 界面表现力

• QWidget：界面风格受限于操作系统，表现力有限。

• QML：支持丰富的动画、过渡效果和自定义样式，表现力强。

2.4 性能

• QWidget：基于 CPU 渲染，性能稳定，适合复杂界面。

• QML：基于 GPU 渲染，性能较高，但在低端设备上可能表现不佳。

2.5 跨平台支持

• QWidget：支持桌面平台（Windows、Linux、macOS），但对移动平台支持有限。

• QML：支持所有平台（桌面、移动、嵌入式），是跨平台开发的首选。

三、使用场景

3.1 QWidget 的使用场景

• 传统桌面应用：如办公软件、开发工具等。

• 复杂界面：需要大量自定义控件和复杂布局的界面。

• 性能敏感应用：如实时数据监控、科学计算等。

3.2 QML 的使用场景

• 现代用户界面：如移动应用、嵌入式设备界面等。

• 动画和特效：需要丰富动画和过渡效果的界面。

• 快速原型开发：需要快速迭代和验证的界面设计。

四、QML 与 QWidget 的混合使用

4.1 在 QWidget 中嵌入 QML

通过 QQuickWidget 或 QQuickView 将 QML 界面嵌入到 QWidget 应用程序中，如下即为在QWidget中嵌入QML的示例代码：

#include 
#include 
#include 
#include 

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout(&window);

    QQuickWidget *qmlWidget = new QQuickWidget;
    qmlWidget->setSource(QUrl("qrc:/main.qml"));
    layout->addWidget(qmlWidget);

    window.show();
    return app.exec();
}

4.2 在 QML 中调用 QWidget

通过 QWidget::createWindowContainer 将 QWidget 组件嵌入到 QML 界面中,如下即为在QML中调用QWidget的示例：

#include 
#include 
#include 

class MyWidget : public QWidget {
public:
    MyWidget(QWidget *parent = nullptr) : QWidget(parent) {
        setStyleSheet("background-color: red;");
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    QWidget *jie= new jie;
    QWindow *container = QWidget::createWindowContainer(myWidget);
    engine.rootContext()->setContextProperty("myWidget", container);

    return app.exec();
}

 在 QML 中定义如下：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 800
    height: 480

    Item {
        width: 200
        height: 200
        anchors.centerIn: parent

        QWidgetContainer {
            widget: myWidget
        }
    }
}

---

总结

QML 和 QWidget 是 Qt 框架中两种不同的界面技术，各有优缺点和适用场景。QWidget 适合传统桌面应用和复杂界面，而 QML 适合现代用户界面和快速开发。在实际项目中，可以根据需求选择合适的技术，甚至混合使用它们。