Qt：在设计模式下编辑QML文件

川长思鸟来 2022-11-17 03:59 370阅读 0赞

Qt Creator在**设计模式**视图中打开[UI窗体][UI]（ui.qml文件）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]  
设计模式包含用于设计UI的不同视图。要打开以下视图，请选择**View > Views**：

*  \*\*表单编辑器(1)\*\*提供了用于设计2D UI的画布。有关更多信息，请参见[编辑2D内容][2D]。编辑3D场景时，表单编辑器用作相机投影的3D场景的画布。
 *  **3D编辑器**为使用3D图形应用程序创建并以受支持的格式之一存储的文件提供编辑器。有关更多信息，请参见[编辑3D场景][3D]。
 *  **文本编辑器**提供了一个代码编辑器，用于编辑由可视编辑器生成的QML代码。有关更多信息，请参见[在编辑模式下工作][Link 1]。
 *  \*\*库(2)\*\*显示可用于设计应用程序的构造块：预定义的QML类型，您自己的QML组件或导入到项目中的Qt快速空间以及其他资源。有关更多信息，请参见[创建组件][Link 2]。
 *  \*\*导航器(3)\*\*将当前QML文件中的项目显示为树形几个。有关更新信息，请参见[管理项目层次结构][Link 3]
 *  **属性(4)组织所选组件的属性。您也可以在文本编辑器**中更改属性。有关更多信息，请参见[指定项目属性][Link 4]
 *  \*\*Connections(5)\*\*使您可以在对象、信号和对象属性之间创建连接。有关更多信息，请参见[添加连接][Link 5]
    
     *  **文件系统**显示当前所选目录中的所有文件。有关更多信息，请参见[查看文件系统][Link 6]。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]
     *  **打开文档**显示当前打开的文件  
        ![在这里插入图片描述][20210408142520761.png]
 *  \*\*Projects(6)\*\*显示了当前会话中打开的项目列表。有关更多信息，请参见[查看项目文件][Link 7]。
 *  **States**显示项目的不同状态。QML状态通常描述用户界面配置，例如UI控件，它们的属性和行为以及可用的操作。有关更多信息，请参见[添加状态][Link 8]。
 *  \*\*Transition Editor(转换编辑器)\*\*使得您可以对状态之间的变化进行动画处理来使状态之间的移动变得平滑。有关更多信息，请参见[对状态之间的过渡进行动画处理][Link 9]。
 *  \*\*Timeline(7)\*\*提供了基于时间轴和关键帧的编辑器，使您可以为UI组件的属性设置动画。有关更多信息，请参考[创建动画][Link 10]
 *  \*\*Curve Editor(曲线编辑器)\*\*使您可以通过将关键帧插入到曲线中并拖动它们以及点处理程序来修改曲线，从而查看和修改整个动画曲线。您可以在样式编辑器中修改曲线的外观。有关更多信息，请参见[编辑动画曲线][Link 11]。

您可以将视图移动到屏幕上的任何位置，并将它们保存为工作区，如[管理工作区][Link 12]中所示。

[UI]: https://doc.qt.io/qtcreator/creator-quick-ui-forms.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: /images/20221022/0896136b2c1c402cb39e3a71635383c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]: /images/20221022/10e1f204d41746a492fc7d09d3723614.png
[2D]: https://doc.qt.io/qtcreator/qtquick-form-editor.html
[3D]: https://doc.qt.io/qtcreator/studio-3d.html
[Link 1]: https://doc.qt.io/qtcreator/creator-coding-navigating.html
[Link 2]: https://doc.qt.io/qtcreator/quick-components.html
[Link 3]: https://doc.qt.io/qtcreator/qtquick-navigator.html
[Link 4]: https://doc.qt.io/qtcreator/qtquick-properties.html
[Link 5]: https://doc.qt.io/qtcreator/qmldesigner-connections.html
[Link 6]: https://doc.qt.io/qtcreator/creator-views.html#viewing-the-file-system
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]: /images/20221022/004079487e0f43888e929bcbce18a318.png
[20210408142520761.png]: /images/20221022/9eba34fc70464450bc5d58f1fa40a4ec.png
[Link 7]: https://doc.qt.io/qtcreator/creator-views.html#viewing-project-files
[Link 8]: https://doc.qt.io/qtcreator/quick-states.html
[Link 9]: https://doc.qt.io/qtcreator/quick-states.html#animating-transitions-between-states
[Link 10]: https://doc.qt.io/qtcreator/studio-timeline.html
[Link 11]: https://doc.qt.io/qtcreator/studio-timeline.html#editing-animation-curves
[Link 12]: https://doc.qt.io/qtcreator/creator-project-managing-workspaces.html