qtwidget嵌入qml

原创于 2025-06-16 00:16:53 发布 · 403 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#c++ #QML #qt

qt6 专栏收录该内容

38 篇文章

订阅专栏

我在学习qml的过程中想到了一个问题，qtwidget界面如何嵌入qml组件。接下来时一步步实现

我们和往常一样先创建一个mainwindow程序，在模块中加入

 QT += quickwidgets

因为我们需要用到

#include<QtQuickWidgets/QQuickWidget>

这个组件把qml包装起来，这个组件的属性和函数可以在qtcreater中搜到看看，接下来就是和往常用其他组件一样创建组件，设置组件属性把他和qml程序关联起来，源码如下

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QtQuickWidgets/QQuickWidget>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 创建 QQuickWidget 容器
    QQuickWidget *qmlWidget = new QQuickWidget(this);
    qmlWidget->setSource(QUrl("qrc:/main.qml"));  // 加载 QML 文件
    qmlWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);  // QML 尺寸随容器变化

    // 设置为主窗口中心组件
    setCentralWidget(qmlWidget);
    resize(800, 600);  // 初始窗口大小
}

MainWindow::~MainWindow()
{
    delete ui;
}

创建一个资源文件，创建一个测试用的qml程序放进去保存文件结构如下：

qml程序内容：

import QtQuick
import QtQuick.Controls

Rectangle {
    color: "lightblue"
    border.color: "navy"
    border.width: 2
    radius: 10

    Text {
        text: "嵌入的 QML 组件"
        anchors.centerIn: parent
        font.pixelSize: 24
    }
}

正常运行效果如下：

如果运行报错

D:\Qttest\qmltest\mainwindow.cpp:11: error: undefined reference to `__imp__ZN12QQuickWidgetC1EP7QWidget'

这个错误是检测到库连接的问题，检查下1.qt有没有安装qtquick模块2..pro文件有没有加上模块并保存3.还是解决不了的话找到项目根目录把build文件删了重新编译基本能解决

如果不想把他放到中心区域就在ui界面拖一个frame什么的组件布好局，用addwidget把qmlwidget加进去就行了

若需 QQuickWidget 背景透明，添加：

qmlWidget->setClearColor(Qt::transparent);
qmlWidget->setAttribute(Qt::WA_AlwaysStackOnTop); // 防止被其他 Widget 遮挡

QML 内容适配
在 QML 根组件中启用锚点填充，避免黑边：

// main.qml
Rectangle {
    anchors.fill: parent // 填充 QQuickWidget
    // ...其他内容
}

性能优化
嵌入多个 QML 组件时，建议每个 QQuickWidget 独立缓存：

qmlWidget->setGraphicsDevice(QQuickWindow::PersistentGLContext);