c++负责逻辑处理，QML专注界面设计，通过qt元对象系统实现通信。使用setContextProperty注册对象，信号与槽跨语言交互，QML调用Q_INVOKABLE方法，结合模型视图与布局实现现代化ui。

1. 理解 QML 与 C++ 的分工

QML（Qt Modeling Language） 是一种声明式语言，用于描述用户界面的结构、样式和行为。它语法简洁，类似 jsON 和 javaScript 的结合，专注于 UI 层。

C++ 负责业务逻辑、数据处理、硬件交互等底层功能。通过 Qt 的元对象系统，C++ 类可以注册到 QML 环境中，供 QML 调用。

典型架构：

立即学习“C++免费学习笔记（深入）”；

• UI 层：QML + javascript 实现界面与交互
• 逻辑层：C++ 提供模型、服务、算法支持
• 数据通信：通过信号与槽、属性绑定实现双向交互

2. 搭建开发环境

安装 Qt Creator（推荐使用 Qt 5.15 或 Qt 6.x），选择带 Qt Quick 编译器的版本。创建项目时选择：

• application (Qt for python) → Qt Quick Application – Empty
• 确保构建套件包含 MSVC/GCC 和 Qt Quick Compiler

项目会自动生成 main.cpp、main.qml 等基础文件。

3. 基本项目结构示例

main.cpp：启动 QML 引擎，并可向 QML 注册 C++ 类

#include <QGuiApplication> #include <qqmlApplicationEngine> #include <QQmlContext> <p>class DataProvider : public QObject { Q_OBJECT Q_PROPERTY(QString message READ message NOTIFY messageChanged) public: QString message() const { return "Hello from C++!"; } void setData() { emit messageChanged(); } signals: void messageChanged(); };</p><p>int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine;</p><pre class='brush:php;toolbar:false;'>DataProvider provider; engine.rootContext()->setContextProperty("cppObj", &provider);  engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); return app.exec();

}

Type Studio

一个视频编辑器，提供自动转录、自动生成字幕、视频翻译等功能

61

查看详情

include “main.moc”

main.qml：定义界面并绑定 C++ 数据

import QtQuick 2.15 import QtQuick.window 2.15 <p>Window { width: 400 height: 300 visible: true title: "C++ QML 入门"</p><pre class='brush:php;toolbar:false;'>Text {     anchors.centerIn: parent     text: cppObj.message     font.pixelSize: 20 }

4. 关键技术点说明

注册 C++ 对象到 QML

• 使用 setContextProperty() 将对象实例暴露为全局变量（如上例）
• 使用 qmlRegisterType<t>()</t> 注册可实例化的类型（适用于需在 QML 中 new 的类）

信号与槽跨语言连接

• C++ 发出信号 → QML 连接该信号并执行 JavaScript 函数
• QML 触发信号 → C++ 槽函数响应（需通过 QObject 绑定）

QML 中调用 C++ 方法

在 C++ 类中使用 Q_INVOKABLE 标记方法，即可在 QML 中直接调用：

Q_INVOKABLE QString greet(const QString &name) {     return "Hello " + name; }

QML 中：cppObj.greet("Alice")

5. 推荐学习路径

• 先掌握 QML 基础语法：Item、Rectangle、Text、MouseArea、信号、属性绑定
• 学习 Qt Quick Controls 2 构建按钮、列表、对话框等标准控件
• 实践 Model-View 结构：使用 C++ 提供 QStringListModel 或 QAbstractItemModel 给 ListView
• 了解 Qt Quick Layouts 实现自适应布局

基本上就这些。C++ 与 QML 协作的关键在于清晰划分职责，利用 Qt 的元对象系统打通数据通道。多写几个小例子，比如天气显示、设置面板，很快就能上手。