Editing QML Files in Design Mode

Qt Creator opens UI forms (ui.qml files) in the Form Editor view in the Design mode. It is recommended that you use UI forms for components that you want to edit in the Design mode.

The Design mode contains different views for designing UIs. To open the following views, select View > Views :

• Form Editor (1) provides a canvas for designing 2D UIs. For more information, see Editing 2D Content . When you are editing 3D scenes, the Form Editor is used as a canvas for the 3D scene projected by the camera.
• 3D Editor provides an editor for files you created using 3D graphics applications and stored in one of the supported formats. For more information, see Editing 3D Scenes .
• 文本编辑器 provides a code editor for editing the QML code generated by the visual editors. For more information, see 在编辑模式下工作 .
• Library (2) displays the building blocks that you can use to design applications: predefined QML types, your own QML components, or Qt Quick Controls that you import to the project, and other resources. For more information, see 创建组件 .
• Navigator (3) displays the items in the current QML file as a tree structure. For more information, see Managing Item Hierarchy .
• 特性 (4) organizes the properties of the selected component. You can change the properties also in the 文本编辑器 。更多信息，见 Specifying Item Properties .
• Connection View (5) enables you to create connections between objects, signals, and object properties. For more information, see Adding Connections .
• File System shows all files in the currently selected directory. For more information, see Viewing the File System .
• Open Documents shows currently open files.
• Projects (6) shows a list of projects open in the current session. For more information, see Viewing Project Files .
• States displays the different states of the item. QML states typically describe user interface configurations, such as the UI controls, their properties and behavior and the available actions. For more information, see Adding States .
• Transition Editor enables you to make movement between states smooth by animating the changes between states. For more information, see Animating Transitions Between States .
• 时间线 (7) provides a timeline and keyframe based editor that enables you to animate the properties of UI components. For more information, see Creating Animations .
• Curve Editor enables you to view and modify the whole animation curve by inserting keyframes to the curve and dragging them and the point handlers to modify the curve. You can modify the appearance of the curve in the style editor. For more information, see Editing Animation Curves .

You can move the views anywhere on the screen and save them as workspaces , as instructed in Managing Workspaces .

Watch a video about using the Design mode views: