核心内容摘要
零基础玩转黑苹果：OpCore-Simplify可视化工具让OpenCore配置像搭积木一样简单
QML 是什么为什么要学 QMLQMLQt Meta-Object Language是 Qt 框架中用于快速构建现代、流畅、跨平台用户界面的声明式编程语言。
相比传统的 Qt WidgetsQML 具有以下优势声明式语法以 “描述界面长什么样” 代替 “一步步绘制界面”代码更简洁、可读性更高跨平台一套代码可运行在 Windows、Linux、macOS、Android、iOS 等平台动态交互天生支持流畅的动画、手势、状态切换适合构建现代化 UI与 C 无缝集成可轻松结合 C 实现业务逻辑兼顾界面表现力和底层性能。
本文将从环境搭建到代码实现手把手教你完成第一个 QML 界面开发全程干货新手也能轻松上手
环境准备
1 安装 Qt 开发环境下载 Qt 安装包前往Qt 官方下载页面选择对应系统的安装程序推荐 Qt
x 版本兼容性和功能更优安装关键组件勾选 “Qt
x.x” 核心模块勾选 “Qt Creator”Qt 官方 IDE内置 QML 编辑器和预览功能勾选对应平台的编译器如 Windows 下的 MinGW、MSVC。
2 验证环境打开 Qt Creator新建项目时能看到 “Qt Quick Application” 选项说明环境安装成功。
实战搭建第一个 QML 界面
1 新建 QML 项目打开 Qt Creator → 新建项目 → 选择 “Application” → “Qt Quick Application - Empty” → 下一步填写项目名称如 FirstQMLApp、选择保存路径 → 下一步选择 Qt 版本推荐
x → 完成。
项目创建后自动生成核心文件main.cpp程序入口负责加载 QML 引擎main.qmlQML 界面文件核心界面代码写在这里CMakeLists.txt/qmake .pro文件项目构建配置文件。
2 编写核心代码
3.
1 main.cpp程序入口该文件的作用是初始化 Qt 应用、创建 QML 引擎并加载 main.qml 文件cpp运行#include QGuiApplication #include QQmlApplicationEngine int main(int argc, char *argv[]) { // 高DPI适配可选提升不同分辨率屏幕的显示效果 QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling); // 创建Qt GUI应用实例 QGuiApplication app(argc, argv); // 创建QML引擎 QQmlApplicationEngine engine; // 加载main.qml文件qrc路径对应项目资源文件 const QUrl url(uqrc:/FirstQMLApp/main.qml_qs); // 连接加载完成信号确保界面正常加载 QObject::connect(engine, QQmlApplicationEngine::objectCreated, app, [url](QObject *obj, const QUrl objUrl) { if (!obj url objUrl) QCoreApplication::exit(-
; // 加载失败则退出程序 }, Qt::QueuedConnection); // 加载QML文件 engine.load(url); // 运行应用事件循环 return app.exec(); }
3.
2 main.qml界面布局QML 采用声明式语法核心是 “元素嵌套”我们来实现一个包含按钮、文本、图片的简单界面qmlimport QtQuick
15 import QtQuick.Window
15 import QtQuick.Controls
15 // 导入控件模块按钮、输入框等 // 主窗口元素 Window { // 窗口属性 width: 600 // 宽度 height: 400 // 高度 title: qsTr(我的第一个QML界面) // 窗口标题qsTr支持国际化 visible: true // 窗口是否可见 color: #f5f5f5 // 窗口背景色 // 文本元素显示欢迎语 Text { id: welcomeText // 唯一标识可用于其他元素引用 text: qsTr(欢迎学习QML开发) font.pixelSize: 24 // 字体大小 font.bold: true // 加粗 color: #333333 // 字体颜色 // 居中显示相对于父元素Window anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 50 // 顶部间距 } // 图片元素显示Qt图标需先添加图片到资源文件 Image { source: qrc:/images/qt_logo.png // 图片资源路径 width: 100 height: 100 // 居中在文本下方 anchors.horizontalCenter: parent.horizontalCenter anchors.top: welcomeText.bottom anchors.topMargin: 30 fillMode: Image.PreserveAspectFit // 保持图片比例 } // 按钮元素带点击事件 Button { text: qsTr(点击我) width: 120 height: 40 // 居中在图片下方 anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.children[2].bottom // 也可通过索引引用兄弟元素 anchors.topMargin: 30 // 按钮点击事件 onClicked: { welcomeText.text qsTr(你点击了按钮QML真简单); welcomeText.color #0066cc; // 修改文本颜色 } } }
3 添加图片资源可选在项目中新建images文件夹放入 Qt 图标qt_logo.png右键项目 → “添加新文件” → “Qt” → “Qt Resource File” → 命名为resources.qrc编辑 resources.qrcxmlRCC qresource prefix/ fileimages/qt_logo.png/file /qresource /RCC
4 运行程序点击 Qt Creator 的 “运行” 按钮绿色三角形即可看到效果窗口显示 “欢迎学习 QML 开发” 的加粗文本文本下方是 Qt 图标图标下方是 “点击我” 按钮点击按钮后文本内容和颜色会变化。
QML 核心语法解析
1 基本结构qmlimport 模块名 版本号 // 导入依赖模块 元素名 { // 定义界面元素 属性名: 属性值 // 设置元素属性 信号处理函数: { // 处理交互事件 // 逻辑代码 } }
2 常用属性属性作用示例width/height元素宽 / 高width: 600anchors布局锚点居中 / 对齐anchors.centerIn: parenttext文本内容text: Hellocolor颜色支持十六进制color: #ff0000visible是否可见visible: true
3 事件处理QML 元素的内置信号如按钮的clicked可通过on信号名的方式处理qmlButton { onClicked: { // 处理clicked信号 console.log(按钮被点击了); // 控制台输出 } }
五、