我要评论一、qml 技术详解
1.1 qml 简介
qml 是一种声明式语言，用于设计用户界面。它基于 javascript，具有简洁的语法和强大的声明式特性，适合快速开发现代化的用户界面。
1.2 qml 的核心概念
- 组件 (components)：qml 中的基本构建块，类似于 c++ 中的类。
- 属性 (properties)：组件的属性，用于定义组件的外观和行为。
- 信号与槽 (signals and slots)：用于组件间的通信。
- 状态 (states)：用于定义组件的不同状态及其转换。
1.3 qml 示例：简单按钮
以下是一个简单的 qml 示例，展示如何创建一个按钮并响应点击事件。
// main.qml
import qtquick 2.15
import qtquick.controls 2.15
applicationwindow {
visible: true
width: 640
height: 480
title: "qml button example"
button {
text: "click me"
anchors.centerin: parent
onclicked: {
console.log("button clicked!")
}
}
}解释：
applicationwindow是 qml 中的主窗口组件。button是一个按钮组件，设置了文本和点击事件处理程序。
1.4 qml 示例：自定义组件
以下示例展示如何创建一个自定义组件并在主窗口中使用它。
// custombutton.qml
import qtquick 2.15
import qtquick.controls 2.15
button {
property string customtext: "default text"
text: customtext
onclicked: {
console.log(customtext + " clicked!")
}
}
// main.qml
import qtquick 2.15
import qtquick.controls 2.15
applicationwindow {
visible: true
width: 640
height: 480
title: "custom qml component"
custombutton {
customtext: "my button"
anchors.centerin: parent
}
}解释：
custombutton.qml定义了一个自定义按钮组件，具有customtext属性。- 在
main.qml中使用该自定义组件，并设置其属性。
二、c++ widgets 技术详解
2.1 c++ widgets 简介
c++ widgets 是 qt 的传统 ui 开发技术，基于 c++ 类和事件驱动模型。它提供了丰富的控件和布局管理功能，适合开发复杂的应用程序界面。
2.2 c++ widgets 的核心概念
- 控件 (widgets)：如
qpushbutton、qlabel等，用于构建用户界面。 - 布局 (layouts)：如
qvboxlayout、qhboxlayout等，用于管理控件的排列方式。 - 信号与槽 (signals and slots)：用于控件间的通信。
2.3 c++ widgets 示例：简单按钮
以下是一个简单的 c++ widgets 示例，展示如何创建一个按钮并响应点击事件。
// main.cpp
#include <qapplication>
#include <qpushbutton>
#include <qdebug>
int main(int argc, char *argv[]) {
qapplication app(argc, argv);
qpushbutton button("click me");
button.resize(200, 100);
button.show();
qobject::connect(&button, &qpushbutton::clicked, []() {
qdebug() << "button clicked!";
});
return app.exec();
}解释：
qpushbutton是一个按钮控件，设置了文本和大小。- 使用
qobject::connect连接按钮的点击信号到一个 lambda 函数，处理点击事件。
2.4 c++ widgets 示例：自定义控件
以下示例展示如何创建一个自定义控件并在主窗口中使用它。
// custombutton.h
#ifndef custombutton_h
#define custombutton_h
#include <qpushbutton>
class custombutton : public qpushbutton {
q_object
public:
explicit custombutton(const qstring &text, qwidget *parent = nullptr);
void setcustomtext(const qstring &text);
signals:
void customclicked();
private slots:
void onbuttonclicked();
private:
qstring m_customtext;
};
#endif // custombutton_h
// custombutton.cpp
#include "custombutton.h"
#include <qdebug>
custombutton::custombutton(const qstring &text, qwidget *parent)
: qpushbutton(text, parent), m_customtext(text) {
connect(this, &qpushbutton::clicked, this, &custombutton::onbuttonclicked);
}
void custombutton::setcustomtext(const qstring &text) {
m_customtext = text;
}
void custombutton::onbuttonclicked() {
qdebug() << m_customtext << " clicked!";
emit customclicked();
}
// main.cpp
#include <qapplication>
#include "custombutton.h"
int main(int argc, char *argv[]) {
qapplication app(argc, argv);
custombutton button("my button");
button.resize(200, 100);
button.show();
qobject::connect(&button, &custombutton::customclicked, []() {
qdebug() << "custom button clicked signal received!";
});
return app.exec();
}解释：
custombutton继承自qpushbutton，添加了自定义属性和信号。- 在
main.cpp中创建并使用该自定义按钮，并连接其自定义信号。
三、qml 与 c++ widgets 的对比
| 特性 | qml | c++ widgets |
|---|---|---|
| 语法 | 声明式，基于 javascript | 命令式，基于 c++ |
| 开发速度 | 快速，适合 ui 设计 | 较慢，适合复杂逻辑 |
| 性能 | 依赖引擎优化，适合简单 ui | 高性能，适合复杂应用 |
| 灵活性 | 高，但复杂逻辑需结合 c++ | 高，适合复杂逻辑 |
| 学习曲线 | 较低，适合 ui 设计师 | 较高，适合 c++ 开发者 |
| 跨平台支持 | 优秀 | 优秀 |
四、综合示例：结合 qml 和 c++
在实际项目中，通常会结合 qml 和 c++ 的优势。以下示例展示如何在 qml 中使用 c++ 类。
4.1 创建 c++ 类
// mycppclass.h
#ifndef mycppclass_h
#define mycppclass_h
#include <qobject>
class mycppclass : public qobject {
q_object
public:
explicit mycppclass(qobject *parent = nullptr);
q_invokable void dosomething();
signals:
void somethingdone();
};
#endif // mycppclass_h
// mycppclass.cpp
#include "mycppclass.h"
#include <qdebug>
mycppclass::mycppclass(qobject *parent) : qobject(parent) {}
void mycppclass::dosomething() {
qdebug() << "doing something in c++!";
emit somethingdone();
}4.2 注册 c++ 类到 qml
// main.cpp
#include <qguiapplication>
#include <qqmlapplicationengine>
#include "mycppclass.h"
int main(int argc, char *argv[]) {
qguiapplication app(argc, argv);
qmlregistertype<mycppclass>("com.example", 1, 0, "mycppclass");
qqmlapplicationengine engine;
engine.load(qurl(qstringliteral("qrc:/main.qml")));
return app.exec();
}4.3 在 qml 中使用 c++ 类
// main.qml
import qtquick 2.15
import qtquick.controls 2.15
import com.example 1.0
applicationwindow {
visible: true
width: 640
height: 480
title: "qml with c++ example"
mycppclass {
id: mycppclass
}
button {
text: "call c++ function"
anchors.centerin: parent
onclicked: {
mycppclass.dosomething();
}
}
connections {
target: mycppclass
onsomethingdone: {
console.log("c++ function executed!");
}
}
}解释：
mycppclass是一个 c++ 类，注册到 qml 中。- 在 qml 中创建该类的实例，并调用其方法。
- 使用
connections组件连接 c++ 类的信号。
五、总结
qt6 提供了两种强大的 ui 绘制技术：qml 和 c++ widgets。qml 适合快速开发现代化的用户界面，而 c++ widgets 适合开发复杂的应用程序逻辑。在实际项目中，通常会结合两者的优势，以实现最佳的开发效率和用户体验。
以上就是qt6中绘制ui的两种方法详解与示例代码的详细内容，更多关于qt6绘制ui的方法的资料请关注代码网其它相关文章！
发表评论