设计 2D 用户界面

要在“2D ”视图中设计应用程序，请打开组件文件，并将2D 组件和资源的实例放置其中。

在“2D ”视图中选中组件实例时，其边缘和角落会出现标记。根据光标的形状，您可以通过拖动组件实例来执行以下操作：

• 移动
• 调整大小
• 旋转

移动组件

当显示移动光标时，您可以将选中的组件实例移动到“2D ”视图中的任意位置。

有关在 UI 中定位组件实例的其他方法的更多信息，请参阅“使布局可缩放”。

调整组件大小

当显示调整大小光标时，您可以拖动标记来调整组件实例的大小。

若要从所选组件实例的中心而非边缘进行调整大小，请按住Alt 键（在 macOS 上为Opt 键）。

若要在使用角标记调整大小时保持图像的宽高比，请按住Shift 键。此方法也适用于使用左、右、上或下锚点锚定的组件实例。

若要同时从组件实例的中心调整大小并保持宽高比，请按住Alt+Shift（在 macOS 上为Opt+Shift）。

有关在 UI 中指定组件或组件实例大小的其他方法的更多信息，请参阅“设置 2D 几何图形”。

旋转组件

当旋转光标 显示在组件实例的某个角上时，您可以顺时针或逆时针拖动，以围绕其原点自由旋转该组件实例。

此外，按住Shift或Alt 键（在 macOS 上为Opt 键），可分别以 5 度或 45 度为增量旋转组件实例。

您可以在“Properties ” > “Geometry - 2D ” > “Origin ”中设置原点。在那里，您还可以以度为单位输入Rotation 属性的值。

放大与缩小

您可以使用工具栏上的缩放按钮来放大或缩小2D 视图，或从列表中选择百分比形式的缩放级别。此外，还有更多按钮可用于将视图缩放至包含所有内容，或缩放至仅显示当前选中的组件实例。

对齐到父级和同级组件

您可以使用对齐功能在“2D ”视图中对齐组件实例。启用对齐功能后，所有组件实例都会与父级和兄弟级组件对齐。如果结合锚点使用对齐功能，当您将一个组件对齐到另一个组件时，系统会自动创建锚点。

要启用对齐功能，请在“2D ”视图中右键单击，然后选择“Snapping ” > “Snap with Anchors ”或“Snap without Anchors ”。

此时会自动显示对齐线，以帮助您定位组件实例。

选择“Edit ” > “Preferences ” > Qt Quick > Qt Quick Designer 以指定对齐设置。在“Parent component padding ”字段中，指定父级与对齐线之间的距离（以像素为单位）。在“Sibling component spacing ”字段中，指定同级元素与对齐线之间的距离（以像素为单位）。

下图显示了当“Parent component padding ”设置为 8 像素时的对齐线 (1)。

有关如何使用“Properties ”视图对组件实例进行对齐和分布的其他方法，请参阅《对齐和分布组件》。

隐藏组件边界

“2D ”视图会显示组件实例的边界。要隐藏它们，请在“2D ”视图中右键单击，然后从上下文菜单中选择“Show Bounds ”。

预览组件尺寸

UI 文件中根组件的宽度和高度决定了该组件的大小。 您可以在其他 UI 文件中以不同尺寸复用组件（例如按钮），并设计适用于不同设备配置文件、屏幕分辨率或屏幕方向的 UI。如果组件的最终尺寸由属性绑定决定，其尺寸也可能为零 (0,0)。

若要尝试不同的组件尺寸，请在工具栏上的“Override Width ”和“Override Height ”字段（1）中输入数值。更改内容将显示在“2D ”视图（2）和“States ”视图（3）中，但 UI 文件中的属性值不会被永久更改。您可以在“Properties ”视图（4）中永久更改属性值。

要设置根组件的初始大小，请选择“Edit ” > “Preferences ” > Qt Quick > Qt Quick Designer ，并在“Root Component Init Size ”组中指定组件的宽度和高度。

指定画布尺寸

要更改画布尺寸，请选择“Edit ” > “Preferences ” > Qt Quick > Qt Quick Designer 并在“Canvas ”组中指定画布的宽度和高度。

设置画布颜色

如果将根组件的背景设置为透明，工作区域的颜色可能会导致您难以看清正在处理的组件实例。 为了使组件实例更清晰可见，您可以在“ ”列表中选择画布颜色。默认情况下，颜色为透明。设置画布颜色不会以任何方式影响根组件或组件实例的背景颜色。

刷新 2D 视图内容

打开 UI 文件时，文件中定义的组件及其包含的组件实例会绘制在“2D ”视图中。 当您在Properties 中编辑组件实例属性时，代码与2D 视图中的显示可能出现不一致。例如，当您更改组件实例在列或行中的位置时，新位置可能无法在2D 视图中正确显示。

要刷新“2D ”视图的内容，请选择R键或“ ”（Reset View ）按钮。