浏览组件文件

“Navigator ”视图显示了当前组件文件中的组件及其关联关系。组件 (1) 以树形结构列出，位于其父级 (2) 之下。要预览组件，请将鼠标悬停在其上方 (3)。

在“Navigator ”视图中选择组件，即可在“Properties ”视图中编辑其属性。组件可以访问其父组件的属性。要在“2D ”视图中选择组件，请右键单击一个组件，然后在“Selection ”子菜单中选择另一个组件。

通常，在“2D ”视图中，子组件位于父组件内部。但它们并不一定非要完全位于父组件内部。例如，您可能希望将鼠标区域设置得比其下方的矩形或图像更大。

复制组件时，其所有子组件也会被复制；删除组件时，子组件也会被删除。

选择上下文菜单命令可对组件应用相关操作。可用命令取决于组件类型。例如，您可以通过在上下文菜单中选择“Change Source URL ”来更改图像组件的来源。

为组件图标添加颜色

为组件图标添加颜色，以便在“Navigator ”中直观区分不同类型的组件。

要切换“Navigator ”中列出的组件图标着色状态，请选择“ ”（为组件图标着色）。着色功能使用以下颜色：

• 绿色表示 2D 组件。
• 黄色表示 3D 组件。
• 蓝色表示材质和纹理。
• 灰色表示其他类型的组件。

在“导航器”中显示和隐藏组件

使用以下方法在Navigator 中显示和隐藏组件。

显示和隐藏引用节点

您可以在Navigator 中选择显示或隐藏引用节点。单击一个引用节点以选择被引用的节点。

Navigator 中的组件可能包含与一个或多个属性绑定的节点，这些节点被称为引用节点。通过切换引用节点的可见性，可将其显示为各组件的子节点。被引用的节点会嵌套在当前节点之下，从而更便于追踪绑定关系和节点间的依赖关系。

要切换引用节点的可见性，请选择“ ”（显示引用节点）。

显示和隐藏其他组件

若要在“2D ”视图中显示或隐藏组件（以便关注应用程序的特定部分），请在“Navigator ”中选择“ ”和“ ”。

若要在应用程序代码中更改组件的可见性，请在“Properties ”视图中设置其“Visibility ”，或在上下文菜单中选择“Visibility ”。

您还可以在“Properties ”中将“Opacity ”字段设置为 0，以隐藏您希望对其应用动画的 UI 组件。

与所有属性一样，可见性和不透明度均从父组件继承。要隐藏或显示子组件，请编辑父组件的属性。

要在“Navigator ”中显示或隐藏不可见的组件，请选择“ ”。

隔离节点

您可以在Navigator 中隔离选定的2D节点，仅显示所需的节点。当Navigator 中存在大量需要隐藏的节点，且您不想逐个选中并隐藏时，隔离节点非常有用。

要隔离节点：

1. 在Navigator 中选中您想要隐藏的节点。
2. 右键单击所选节点以打开上下文菜单，然后选择“Isolate Selection ”或按Shift+B。

要在“Navigator ”中显示所有节点，请右键单击所选节点并选择“Show All Nodes ”，或按Alt/Option+B。

锁定组件

在设计复杂应用程序时，很容易在Qt Quick Designer的某个视图中无意间修改组件的属性，从而导致出乎意料的结果。例如，当您尝试选择或变换某个特定组件时，“2D ”视图可能会显得拥挤，其他组件可能会挡住视线，导致您最终变换的组件比预期更多。

要锁定当前未编辑的组件及其子组件，请在“Navigator ”中选择“ ”。被锁定的组件在任何Qt Quick 设计器视图中都无法进行操作。当您需要再次编辑这些组件时，请解锁它们。

您无法在2D 中选择已锁定的组件，也无法在Properties 中访问其属性。

若尝试删除会更改已锁定组件属性的状态，系统将提示您确认删除操作。

如果您已为关键帧动画添加了缓动曲线，可以在“Curves ”视图中对其进行锁定和解锁。如果您锁定了包含缓动曲线的组件，则“Navigator ”和“Curves ”之间会同步锁定状态。

排列组件

您可以在“Navigator ”或“Code ”视图中，或在“Edit ”模式下查看组件文件中组件的顺序。文件中组件的顺序也决定了它们在“2D ”视图中绘制的顺序。 默认情况下，位于文件顶部的组件会在“Navigator ”树的底部显示，并在“2D ”视图中位于重叠组件的后面。若要像其他一些工具那样，按组件在文件中的出现顺序进行排列，请选择“ ”。

若要将某个组件移动到其父级树的顶部或底部，请在“Navigator ”中右键单击该组件，然后选择“Arrange ” > “Bring to Front ”或“Send to Back ”。若要将组件向上或向下移动，请选择“Bring Forward ”或“Send Backward ”。

若要反转所选组件的顺序，请选择“Arrange ” > “Reverse ”。

您还可以将组件拖动到树中的其他位置，或使用“ ”和“ ”按钮在树中移动组件。您可以使用“ ”和“ ”按钮更改组件的父级。

当您将组件实例拖动到“2D ”视图中时，新组件将作为其下方组件的子组件被添加。在移动组件时，无法确定您是想调整其位置，还是将其附加到新的父组件上。因此，父组件不会自动更改。

添加属性别名

属性别名是指可在组件外部使用的属性。在“Code ”视图或“Edit ”模式下查看代码时，属性别名声明与普通属性定义相似，区别在于它需要使用alias关键字代替属性类型，且属性声明的右侧必须是一个有效的别名引用：

property alias <name>: <alias reference>

例如，以下别名引用了 item 组件实例内部的一个 button 组件实例：

property alias button: item.button

有效的别名引用：

• 只能指向声明该属性别名所在组件内的组件实例或属性。
• 不能包含任意的 JavaScript 表达式。
• 不能指向与声明该属性别名所在组件类型不同的组件。
• 必须在首次声明别名时进行定义。
• 不能指向附加属性。
• 不能指向第三层以下的嵌套组件实例的属性。

您可以在Navigator 中使用“ ”（Export ）按钮，将组件导出为具有有效别名引用的属性别名。

然后，您可以在其他组件中使用该属性别名来创建与该组件的连接。

在组件内移动

指定组件的文件（ui.qml 、.qml ）可以包含在单独文件中指定的其他组件的实例。您可以通过不同视图以多种方式打开指定组件的文件：

• 在“2D ”或“Navigator ”视图中，右键单击组件的实例，然后在上下文菜单中选择“Edit Component ”，或按F2 键。
• 在“Properties ”中，选择“Edit Base Component ”。

组件层次结构将以面包屑路径的形式显示，您可以选择组件名称来打开相应的文件。这样，在完成组件编辑后，您可以轻松导航回到顶层。