3. 接入自己的 Qt Quick 应用

本节从零创建 MyEuiApp。完成后，窗口显示“点击次数：0”；每次点击“点击加一”，数字增加并出现消息。

3.1 创建应用目录

先完成 2.2。下面路径是你的新应用目录，与 EUI 仓库是两个独立目录：

$appRoot = 'D:/code/MyEuiApp'
New-Item -ItemType Directory -Force -Path $appRoot | Out-Null
Set-Location $appRoot

在 $appRoot 中创建四个 UTF-8 文本文件，目录结构为：

MyEuiApp/
  CMakeLists.txt
  main.cpp
  main.qml
  resources.qrc

3.2 写入完整示例

将下面四个代码块分别保存到对应文件。文件名必须一致，resources.qrc 中的 main.qml 与实际文件名对应。

CMakeLists.txt：定义程序和 Qt 依赖。

cmake_minimum_required(VERSION 3.20)
project(MyEuiApp LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)

find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Qml)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Qml)

add_executable(MyEuiApp main.cpp resources.qrc)
target_link_libraries(MyEuiApp PRIVATE Qt${QT_VERSION_MAJOR}::Quick Qt${QT_VERSION_MAJOR}::Qml)

main.cpp：创建 QML 引擎，添加组件搜索目录，加载窗口。

#include <QUrl>
#include <QGuiApplication>
#include <QCoreApplication>
#include <QQmlApplicationEngine>

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

resources.qrc：将 QML 窗口打包到程序中。

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

main.qml：窗口、计数文字、按钮和消息交互。

import EUI 1.0
import QtQuick 2.15

EApplicationWindow {
    id: window

    property int clickCount: 0

    width: 640
    height: 420
    visible: true
    title: "EUI Demo"

    Component.onCompleted: {
        ELocale.language = "zh"
        ETheme.dark = false
    }

    EApp {
        id: app

        anchors.fill: parent

        Column {
            x: 24
            y: 24
            spacing: 16

            EText {
                text: "点击次数：" + window.clickCount
            }
            EButton {
                text: "点击加一"
                styleType: EStyle.Primary

                onClicked: {
                    window.clickCount += 1
                    app.message.open("已点击 " + window.clickCount + " 次")
                }
            }
        }
    }
}

EApplicationWindow 是窗口；EApp 填满窗口并提供消息管理器；EText.text 绑定计数；EButton.onClicked 更新计数并调用 app.message.open()。该示例没有保存或网络请求。

3.3 构建应用并复制模块

执行位置：新应用目录 $appRoot。 继续使用第 1 节设置的 $euiRoot 和 $qtKit：

Set-Location $appRoot
cmake -S . -B build -G Ninja -DCMAKE_BUILD_TYPE=Release "-DCMAKE_PREFIX_PATH=$qtKit"
cmake --build build
cmake -E copy_directory "$euiRoot/build/eui-install/imports/EUI" "$appRoot/build/EUI"

完成后的关键文件如下：

MyEuiApp/
  CMakeLists.txt
  main.cpp
  main.qml
  resources.qrc
  build/
    MyEuiApp.exe
    EUI/
      qmldir
      euiplugin.dll
      plugins.qmltypes
      controls/
      ...其余模块文件

必须复制整个 EUI/，包括插件 DLL。main.cpp 添加的是可执行文件目录 build/，QML 引擎会从其下的 EUI/ 找到 import EUI 1.0。应用的 CMake 只链接 Qt，EUI 插件通过 QML 导入加载。

3.4 运行并检查结果

执行位置：新应用目录 $appRoot，保持同一终端中的 Qt PATH 设置。

& ./build/MyEuiApp.exe

1. 窗口标题为 EUI Demo，文字为“点击次数：0”。
2. 点击“点击加一”，文字变为“点击次数：1”，同时出现“已点击 1 次”消息。
3. 再点击一次，文字变为“点击次数：2”。

修改 main.qml 后先关闭程序，再执行 cmake --build build 并重新运行。QML 已打包进可执行文件，修改源文件需要重新构建。此时 Qt 运行库来自第 1 节的 PATH。

3.5 接入已有项目或替换示例组件

已有 Qt Quick 项目可以继续使用原来的 C++ 入口、窗口和构建配置。构建 EUI 后，把完整模块复制到可执行文件旁，给现有 QML 引擎添加该父目录，在 QML 文件顶部写 import EUI 1.0，然后放入所需控件。使用消息管理器时，把界面内容放进 EApp。

第 4 节的代码块都是独立组件定义。要在本章示例中试用：

1. 保留 EApplicationWindow、EApp 和窗口初始化代码。
2. 用所选示例的根对象替换 EApp 内的整个 Column { ... }。
3. 将所需 imports 放在 main.qml 顶部，不放进对象内部。
4. 关闭程序，重新构建并运行。

例如，表格示例的 ETable { ... } 放入 EApp 后会显示两行数据；表单示例点击空内容的“提交”会显示必填校验。修改业务数据和信号处理器即可接入自己的逻辑。使用 EECharts 前，先按 4.5 配置 WebEngine 宿主。