1. 创建第一个QML界面

创建第一个QML界面 学习卡片

任务目标

使用 Qt Quick 创建一个最小可运行的 QML 界面,在窗口中显示文本 Hello, Qt Quick!。通过该案例验证 Qt 开发环境可用,并理解 QML 文件的基本结构、窗口属性设置以及从 QML 源码到界面显示的最小闭环。

环境准备

本案例需要 Qt 5.15 或 Qt 6.x 环境,并安装 Qt Quick 模块。推荐使用 Qt Creator 打开项目,或通过命令行使用 qml 解释器直接运行 QML 文件(Qt 6 中该工具名为 qml6 或 qml,取决于安装方式)。

完整实现

创建一个空目录,在其中新建文件 main.qml,内容如下:

```qml import QtQuick Window { width: 400 height: 300 visible: true title: qsTr("第一个QML界面") Text { anchors.centerIn: parent text: "Hello, Qt Quick!" font.pixelSize: 24 color: "#2c3e50" } } ```

若使用 Qt 5,需将导入语句改为 import QtQuick 2.15 并额外添加 import QtQuick.Window 2.15。上述代码在 Qt 6 中可直接运行。

运行方式

方式一(推荐):在 Qt Creator 中新建 Qt Quick Application 项目,将生成的 main.qml 内容替换为上述代码,直接运行。

方式二(命令行):在终端进入文件所在目录,执行:

```bash qml main.qml ```

如果系统提示找不到 qml 命令,请确认 Qt 的 bin 目录已加入 PATH,或使用完整路径(如 /opt/Qt/6.5.0/gcc_64/bin/qml)。

验证方法

程序启动后,屏幕上应出现一个 400×300 像素的窗口,标题栏显示“第一个QML界面”,窗口中央显示深灰色文本“Hello, Qt Quick!”。若窗口正常弹出且文本清晰可见,则案例通过。关闭窗口后进程应正常退出,无报错输出。

常见问题

  • 窗口一闪而过:检查 visible: true 是否遗漏,该属性决定窗口是否显示。
  • 提示 module "QtQuick" 未安装:确认 Qt 安装时勾选了 Qt Quick 模块,或使用完整的 Qt 发行版。
  • 中文乱码:QML 源文件需以 UTF-8 编码保存,Qt 6 默认支持;Qt 5 下若乱码,可在文件头部添加 pragma charset "utf-8"。