3. 使用Qt Quick创建简单界面

任务目标

使用Qt Quick与QML创建一个包含文本和按钮的简单界面，点击按钮后文本内容发生变化。本案例聚焦于QML声明式语法、信号与槽（信号处理器）的基本用法，不涉及C++后端逻辑。

环境依赖

• Qt 5.15+ 或 Qt 6.x（含Qt Quick模块）
• 编译器：qmake或CMake均可，本案例使用qmake
• 构建工具：Make或Ninja（随Qt安装）

完整实现

创建项目目录，包含两个文件：simple_ui.pro（qmake工程文件）和main.qml（界面定义）。

simple_ui.pro

QT += quick
CONFIG += c++11
SOURCES += main.cpp
RESOURCES += qml.qrc

qml.qrc

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
    </qresource>
</RCC>

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}

main.qml — 核心界面代码

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 320
    height: 200
    visible: true
    title: "Qt Quick 简单界面"

    Column {
        anchors.centerIn: parent
        spacing: 20

        Text {
            id: displayText
            text: "初始文本"
            font.pixelSize: 24
            color: "#2c3e50"
        }

        Button {
            text: "点击改变文本"
            onClicked: {
                if (displayText.text === "初始文本")
                    displayText.text = "文本已被改变"
                else
                    displayText.text = "初始文本"
            }
        }
    }
}

运行与验证

构建与运行：

qmake simple_ui.pro
make
./simple_ui   # Windows下为 simple_ui.exe

验证步骤：

1. 程序启动后，窗口中央显示文本“初始文本”及一个按钮。
2. 点击按钮，文本立即变为“文本已被改变”。
3. 再次点击按钮，文本恢复为“初始文本”。
4. 窗口标题显示“Qt Quick 简单界面”，窗口大小约320×200像素。

通过条件：上述4步全部符合，即按钮点击能正确切换文本内容，说明QML信号处理器（onClicked）与属性绑定工作正常。

关键说明

• 本案例使用ApplicationWindow作为根组件，需导入QtQuick.Controls模块；若使用纯Window则需自行处理按钮样式。
• 文本切换采用条件判断实现双向切换，避免使用状态机以保持最小实现。
• 若Qt版本低于5.15，将import QtQuick 2.15改为对应版本号（如2.12）即可。