本文共 1818 字，大约阅读时间需要 6 分钟。

(Qt 无官方文档翻译)

QtQuick 是 Qt 开发中非常常用的图形用户界面库，它允许开发者使用简洁的 QML 语言快速构建用户界面。QML 是一种与 HTML 类似的标记语言，主要用于定义 UI 组件和其在应用中的展示方式。

以下是基于 QtQuick 的一个简单的应用程序开发示例：

示例程序结构

import QtQuick 2.4
import QtQuick.Controls 1.3
Rectangle {
    width: 480
    height: 320
    Text {
        x: 50
        y: 50
        id: txt
        focus: true
        font.pointSize: 16
        text: "hello!"
        Keys.onLeftPressed: x -= 10
        Keys.onRightPressed: x += 10
        Keys.onUpPressed: y -= 10
        Keys.onDownPressed: y += 10
    }
}

2. C++ 实现 (main.cpp)

#include 
    
     
#include 
     
      
int main(int argc, char **argv) {
    QGuiApplication app(argc, argv);
    QQuickView *viewer = new QQuickView();
    viewer->setResizeMode(QQuickView::SizeRootObjectToView);
    viewer->setSource(QUrl("qrc:/main.qml"));
    viewer->show();
    QObject::connect(viewer->engine(), SIGNAL(quit()), app, SLOT(quit()));
    return app.exec();
}
     
    

开发步骤解析

3. 引入必要库文件

   在 QML 文件中添加以下 import 语句：

   import QtQuick 2.4
   import QtQuick.Controls 1.3

4. 创建窗口

   使用 Rectangle 组件创建窗口：

   Rectangle {
       width: 480  // 设置窗口宽度
       height: 320  // 设置窗口高度
   }

5. 添加交互输入控件

   在其中添加一个 Text 组件来接收用户输入：

   Text {
       x: 50          // 设置横坐标
       y: 50          // 设置纵坐标
       id: txt          // 给控件起个名字
       focus: true       // 让文本框自动获取焦点
       font.pointSize: 16 // 设置字体大小
       text: "hello!"    // 显示的文字内容
       Keys.onLeftPressed: x-=10  // 左键按入，文本移动左边
       Keys.onRightPressed: x+=10 // 右键按入，文本移动右边
       Keys.onUpPressed: y-=10  // 上键按入，文本移动上方
       Keys.onDownPressed: y+=10 // 下键按入，文本移动下方
   }

6. 编译和运行

   使用 Qt IDE（如 Qt Creator）打开项目文件（.pro），编译并运行应用程序。按下左、右、上、下键键盘控制文本位置。

关键点解释

• QMLDosyon文件夹：确保项目文件和资源文件都在 qrc: 路径下，以便 Qt estr相对路径访问。

• 关键事件处理：通过 Keys.onLeftPressed 等事件钩子接收键盘事件，实现自定义交互功能。

• 动态布局：根据文本框的位置调整界面布局，确保用户操作顺畅。

这个简单的 Qt 工作环境示例展示了 QtQuick 的核心功能及交互机制，对于进一步的 UI 开发和功能扩展都有重要的借鉴意义。