简介

  • quick designer 使用笔记

Qt项目界面文件(.ui)及其作用

  • Qt项目中，后缀为.ui的文件是可视化设计的窗体的定义文件，例如widget.ui。双击项目文件目录树中的文件widget.ui，会打开一个集成在Qt Creator中的Qt Designer对窗体进行可视化设计。

  • widget.ui文件，是窗体界面定义文件，是一个XML文件，定义了窗口上的所有组件的属性设置，布局，及其信号与槽函数的关联等。用UI设计器可视化设计的界面都由Qt自动解析，并以XML文件的形式保存下来。在设计界面时，只需在UI设计器里进行可视化设计即可。

  • ui_widget.h文件，是对widget.ui文件编译后生成的一个文件，ui_widget.h会出现在编译后的目录下，或与widget.ui同目录
  • ui_widget.h并不会出现在QtCreator的项目文件目录树里，当然可以手动将ui_widget.h添加到项目中

  • 注意，ui_widget.h是对widget.ui文件编译后自动生成的,widget.ui又是通过UI设计器可视化设计生成的。所有，对ui_widget.h手动进行修改没有什么意义，所有涉及界面的修改都应该直接在UI设计器里进行。

  • 查看ui_widget.h文件的内容，发现它主要做了以下的一些工作
    • 定义了一个类Ui_Widget，用于封装可视化设计的界面
    • 自动生成了界面各个组件的类成员变量定义。在public部分为界面上每个组件定义了一个指针变量，变量的名称就是设置的objectName。例如，在窗体上放置了一个QLable和一个QPushButton并命名后，自动生成的定义是: QLabel *LabDemo; QPushButton *btnClose;
    • 定义了setupUi()函数，这个函数用于创建各个界面组件，并设置其位置，大小，文字内容，字体等属性，设置信号与槽的关联。setupUi()函数体的第一部分是根据可视化设计的界面内容，用C++代码创建界面上各组件，并设置其属性
      • 接下来，setupUi()调用了函数retranslateUi(Widget)，用来设置界面各组件的文字内容属性，例如标签的问题，按键的文字，窗体的标题等。将界面上的文字设置的内容独立出来作为一个函数retranslateUi()，在设计多语言界面时会用到这个函数
      • setupUi()函数的第三部分是设置信号与槽的关联。
      • 所以，在Widget的构造函数里调用ui->setupUi(this),就实现了窗体上组件的创建，属性设置，信号与槽的关联。
    • 定义namespace Ui,并定义一个从Ui_Widget继承的类Widget 
      1
2
3
4

      namespace Ui
{
class Widget::public Ui_Widget{};
}
  • 提示，ui_widget.h文件里实现界面功能的类是Ui_Widget。再定义一个类Widget从Ui_Widget继承而来，并定义在namespace Ui里，这样Ui::Widget与widget.h里的类Widget同名，但是用namespace区分开来。所以，界面的Ui::Widget类与文件widget.h里定义的Widget类实际上是两个类，但是Qt的处理让用户感觉不到Ui::Widget类的存在，只需要直到在Widget类里用ui指针可以访问可视化设计的界面组件就可以了。

把Qt的界面文件(.ui文件)生成源文件(.h或.cpp)

  • 在用Qt做开发时，为了方便快速，一般都使用Qt设计师界面类来做界面相关的布局，这个类在当前工程中是没有.cpp或.h文件的，但主类又有引入了这个头文件，点开转到定义或声明时，时打不开的。
  • 下面的一种办法
    • 新建一个工程，包含ui文件，然后打开ui文件拖入想要的控件，保存，编译ui文件
    • 在qt安装路径下找到 uic.exe 文件，使用这个工具将ui文件生成.h或.cpp文件。例如 
      1
2

      uic.exe test.ui -o test.h
uic.exe test.ui -o test.cpp
    • .h或.cpp这两个文件只要一个就可以了
    • 把刚才生成的.h文件导入当前工程，然后打开刚刚生成的源码，可以看到整个类的所有属性和所有成员函数

Qt quick designer 详解

Qt Quick Designer 详解

一、概述

Qt Quick Designer 是 Qt Creator 集成开发环境（IDE）中的一个可视化设计工具，专用于设计和开发基于 Qt Quick（QML） 的用户界面。它提供了所见即所得（WYSIWYG）的编辑环境，使开发者能够通过拖放组件、调整属性等方式，快速构建现代化、响应式的用户界面，而无需手动编写大量的 QML 代码。

二、Qt Quick 和 QML 简介

在深入了解 Qt Quick Designer 之前，先简单回顾一下 Qt Quick 和 QML：

  • Qt Quick：是 Qt 框架中用于创建动态用户界面的技术，特别适用于触摸屏和移动设备应用。它结合了 QML 和 JavaScript，实现了高性能的界面渲染和丰富的动画效果。

  • QML（Qt Modeling Language）：是一种基于 JavaScript 的声明式语言，专门用于设计用户界面。通过 QML，可以以简洁直观的方式描述界面元素、布局和交互行为。

三、Qt Quick Designer 的主要功能

1. 拖放式界面设计

  • 组件面板：提供了丰富的预定义 UI 组件，如按钮、文本、图像、列表等。
  • 拖放操作：直接将组件从面板拖拽到设计区域，快速构建界面布局。

2. 属性编辑器

  • 实时调整：选中组件后，可以在属性编辑器中修改其属性，如大小、位置、颜色等。
  • 绑定支持：支持属性绑定，可以将组件的属性与数据模型或其他组件属性关联。

3. 层次结构视图

  • 组件管理：展示当前界面中所有组件的层次关系，方便组织和管理。
  • 快速导航：通过层次结构视图，快速定位并选中特定的界面元素。

4. 动画和过渡

  • 动画编辑器：可视化地创建和调整动画效果，支持时间轴和关键帧。
  • 状态和过渡：定义组件的不同状态，并设置状态之间的过渡动画。

5. 实时预览

  • 即时反馈：无需编译，即可在设计器中实时查看界面效果。
  • 多设备预览：支持模拟不同设备的屏幕尺寸和分辨率，确保界面自适应性。

6. 代码与设计视图同步

  • 双向编辑：在设计视图和代码视图之间切换，所有更改都会同步更新。
  • 代码提示：在代码视图中提供智能提示和自动补全，加速手动编码过程。

四、使用 Qt Quick Designer 的步骤

1. 创建项目

  • 新建项目：在 Qt Creator 中，选择“新建项目”，并选择“Qt Quick 应用程序”模板。
  • 配置项目：按照向导提示，设置项目名称、位置和其他配置。

2. 设计界面

  • 打开主 QML 文件：在项目导航器中，找到 Main.qml 文件，双击打开。
  • 切换到设计视图：在编辑器窗口顶部，选择“设计”选项卡。

3. 添加和配置组件

  • 添加组件：从组件面板中拖放所需的组件到设计区域。
  • 设置属性：选中组件，在属性编辑器中调整其属性，如位置、大小、样式等。

4. 管理组件层次

  • 调整层次结构：在层次结构视图中，通过拖放改变组件的父子关系。
  • 命名组件：为组件设置 id，方便在代码中引用。

5. 添加交互和动画

  • 定义状态：在状态编辑器中添加新的状态，描述组件在不同情况下的表现。
  • 创建动画：使用动画编辑器，为属性变化添加动画效果。

6. 预览和测试

  • 实时预览：点击预览按钮，查看界面的实时效果。
  • 调试：使用 Qt Creator 的调试工具，检测和解决潜在的问题。

五、与代码编辑的结合

1. 代码视图

  • 查看代码：在设计器中，随时切换到代码视图，查看生成的 QML 代码。
  • 手动编辑：直接在代码中添加逻辑或自定义组件。

2. 双向同步

  • 设计与代码一致性：所有在设计视图中的更改都会反映到代码视图中，反之亦然。
  • 冲突解决：当手动编辑的代码无法在设计视图中解析时，设计器会给出提示。

六、优势与应用场景

1. 提高开发效率

  • 快速构建：拖放式设计减少了手动编码的时间，加快了界面开发速度。
  • 直观性：所见即所得的编辑方式，使得界面设计更直观。

2. 降低学习难度

  • 适合初学者：对于不熟悉 QML 或编程的新手，Qt Quick Designer 提供了友好的入门途径。
  • 丰富的组件库：预定义的组件和样式，降低了设计复杂界面的门槛。

3. 促进团队协作

  • 设计师参与：界面设计师可以直接使用 Qt Quick Designer 进行原型设计和界面布局。
  • 开发与设计分离：开发者和设计师可以各自专注于逻辑实现和界面美化。

七、注意事项

1. 理解生成的代码

  • 代码质量：尽管设计器生成的代码可用，但手动检查和优化代码有助于提高应用性能。
  • 学习 QML：深入理解 QML 语言，有助于更好地利用 Qt Quick Designer。

2. 兼容性问题

  • Qt 版本：确保使用的 Qt Creator 和 Qt 版本与项目需求一致，避免兼容性问题。
  • 平台差异：在不同平台上测试界面，确保跨平台一致性。

3. 性能优化

  • 避免过度嵌套：过深的组件嵌套可能影响性能，需合理组织界面结构。
  • 谨慎使用动画：大量或复杂的动画效果可能导致性能问题，应适度使用。

八、结论

Qt Quick Designer 是开发 Qt Quick 应用程序的强大工具，提供了高效、直观的界面设计方式。通过结合拖放式设计、属性编辑、动画创建和代码同步等功能，它简化了用户界面的开发流程，适合从初学者到资深开发者的各种需求。熟练掌握 Qt Quick Designer，将有助于快速构建高质量的跨平台应用程序。