使布局可缩放

UI 中组件的位置可以是绝对位置，也可以是相对于其他组件的相对位置。在任何时刻，可视组件都位于屏幕坐标系中的特定位置。可视组件的 x 和 y 坐标相对于其可视父组件的坐标，其中左上角的坐标为 (0, 0)。

若您正在设计静态 UI，手动定位是定位组件最有效的方式。对于动态 UI，请使用以下定位方法。

设置绑定

通过属性绑定，您可以连接组件的属性。因此，其中一个属性的变化会影响另一个。一旦设置了绑定，当其他属性或数据值发生变化时，该属性值会自动保持最新。

要为组件属性设置属性绑定：

1. 转到“Properties ”视图，在属性旁选择“ ”（Actions ）菜单，然后选择“Set Binding ”。

   

2. 在“Binding Editor ”中，从可用组件及其属性的列表中选择一个组件和一个属性。

   

设置绑定后，“Actions ”菜单图标将变为 。要删除绑定，请选择Actions >Reset 。

请参阅“在属性之间添加绑定”，了解如何在“Connections ”视图的“Bindings ”选项卡中设置绑定。

设置锚点和边距

在基于锚点的布局中，每个组件都有一组不可见的锚点线：顶部、底部、左侧、右侧、填充、水平居中、垂直居中和基线。 通过将组件的一条或多条锚点线与另一个组件的锚点线连接，可利用锚点将组件放置在另一个组件的旁边或内部。如果某个组件发生变化，与其锚定的组件将自动调整以保持锚定关系。

要为组件设置锚点和边距：

1. 转到“Properties ” > “Layout ” > “Anchors ”。
2. 选择您希望为该组件设置的锚点的对应按钮。您可以组合多个锚点。对于每个选中的按钮，您可以从相应的下拉菜单中选择该锚点的目标组件。
3. 要为组件应用填充锚点，请选择“ ”（Fill to Parent ）。
4. 要将锚点重置为已保存的状态，请选择“ ”（Reset Anchors ）。

出于性能考虑，您只能将组件锚定到其同级组件或直接父级。默认情况下，使用锚定按钮时，组件会锚定到其父级。若要锚定到组件的同级组件，请选择该同级组件作为Target 。

不支持任意锚定。例如，请勿选择：anchor.left: parent.right 。应选择：anchor.left: parent.left 。使用锚定按钮时，对父组件的锚定始终设置在同一侧。然而，对同级组件的锚定则设置在相对的一侧：anchor.left: sibling.right 。这使您能够将同级组件保持在一起。

在下图中，rectangle2的左边缘锚定在其左侧同级组件rectangle1 的右边缘，而其顶部边缘锚定在其父组件的顶部。

代码中锚点的设置如下：

Rectangle {
    id: rectangle2
    width: 84
    height: 84
    color: "#967de7"
    anchors.left: rectangle1.right
    anchors.top: parent.top
    anchors.leftMargin: 51
    anchors.topMargin: 56
}

要定义组件外部的空白区域，请设置Margin 。边距适用于锚点。在使用布局或绝对定位时，边距不会产生任何效果。

对齐和分布组件

对于一组组件，选中它们即可进行对齐和均匀分布。由于组件的位置是固定的，因此无法将这些功能应用于锚定组件。为了便于扩展，请在设计完成后将已对齐和分布的组件锚定。

在“Alignment ”字段中选择相应按钮，可将一组组件的顶部/底部或左侧/右侧边缘对齐至距离组中心最远的组件。例如，进行左对齐时，组件将对齐至最左侧的组件。您还可以对齐组件的水平/垂直中心，或同时对齐两者。

在“Align to ”字段中，选择是相对于选定范围、根组件，还是相对于您在“Key object ”字段中选定的关键组件来对齐组件。关键组件必须是选定范围的一部分。

可对组件或组件间的间距进行均匀分布。如果组件或间距无法以等像素值进行分布且不会产生半像素，系统将发出通知。您可以允许“Qt Quick Designer”使用最接近的值来分布组件或间距，或者调整设计，使组件和间距得到完美分布。

在分配组件时，请选择“Distribute objects ”字段中的按钮，以确定组件之间的距离是基于其顶部/底部或左侧/右侧边缘计算，还是基于其水平/垂直中心计算。

在分配间距时，请选择“Distribute spacing ”字段中的按钮，以确定间距是在目标区域内均匀分布，还是从起始点计算出的指定距离。请选择组件在目标区域内均匀分布的方向：沿 x 轴水平方向，或沿 y 轴垂直方向。

或者，通过选择其中一个起始点按钮（目标区域或项目的顶部/左侧边缘、底部/右侧边缘或中心）来按像素分配间距。应使用哪个边缘取决于项目是水平还是垂直分布：

• 选择“ ”和“ ”可将目标区域或项目的左边缘作为起始点。
• 选择“ ”和“ ”以使用顶部边缘。
• 选择“ ”和“ ”以使用右边缘。
• 选择“ ”和“ ”以使用底部边缘。

在“Pixel spacing ”字段中，以像素为单位设置组件之间的间距。要禁用以像素为单位的间距分布，请选中“ ”按钮。

使用定位器

定位器组件是用于管理其子组件位置的容器。对于许多用例而言，最佳的定位器是简单的列、行、流或网格。请使用“Components >Default Components >Positioner ”中提供的组件，以最有效的方式将组件的子元素按这些布局进行定位。

要在Column 、Row 、Grid 或Flow 中对多个组件进行定位：

1. 在“2D ”视图中选择组件。
2. 在“2D ”视图中的任意位置右键单击，然后选择“Positioner ”>“Row ”、Column 、Grid 或Flow Positioner 。

列定位器

单列布局（Column ）会将子组件沿单列排列。它提供了一种便捷的方式，可在不使用锚点的情况下垂直定位一系列组件。

对于所有定位器，请在“Spacing ”字段中设置子组件之间的间距。

此外，还可以在“填充”部分中设置内容与组件左、右、上、下边缘之间的垂直和水平填充。

“行”和“流”定位器

“Row ”将子组件沿单行排列。它提供了一种便捷的方式，可在不使用锚点的情况下水平定位一系列组件。

“行”（Flow ）组件会像页面上的文字一样排列其子组件，通过换行来创建组件的行或列。

对于流式和行式定位器，还需在“Flow ”字段中将流向设置为“从左到右”或“从上到下”。组件将根据您在“Layout direction ”字段中设置的值相互紧邻排列，直到超过“Flow ”组件的宽度或高度，随后自动换行至下一行或下一列。

在“Layout direction ”字段中，将布局方向设置为“LeftToRight ”或“RightToLeft ”。如果行宽被显式设定，则左锚点仍位于行的左侧，右锚点仍位于行的右侧。

网格定位器

Grid 会创建一个足以容纳所有子组件的单元格网格，并将这些组件从左到右、从上到下依次放置在单元格中。每个组件都位于其单元格的左上角，坐标为 (0, 0)。

Qt Quick Designer 会根据2D 视图中子组件的位置生成网格。您可以在“Rows ”和“Columns ”字段中修改行数和列数。

除了流向和布局方向外，您还可以设置网格组件的水平和垂直对齐方式。默认情况下，网格组件垂直对齐于顶部。水平对齐遵循“Layout direction ”字段的值。例如，当布局方向设置为“LeftToRight ”时，组件将左对齐。

若要镜像布局，请将布局方向设置为RightToLeft 。若要同时镜像组件的水平对齐方式，请在Alignment H 字段中选择AlignRight 。

使用布局

使用“Components ”中提供的组件 > Qt Quick Layouts 中可用的组件来排列 UI 中的组件。

与定位器不同，布局既管理子组件的位置，也管理其大小，因此非常适合动态和可调整大小的用户界面。但是，除非子组件的隐式大小不理想，否则请勿在“Properties ”的“Geometry - 2D”部分中为子组件选择固定的位置和大小。

请使用锚点或布局本身的宽度和高度属性，根据其非布局父组件来设定布局的大小。但请勿将子组件锚定在布局内部。

要在Grid Layout 中放置组件：

1. 选中所有组件，然后右键单击其中一个。
2. 从上下文菜单中，选择“Layout ” > “Grid Layout ”。

   

3. 将组件分配到Grid Layout 后，它们将按行和列排列。

   

若要使组件在网格内自动适应宽高，请按照以下步骤操作：

1. 在“2D ”视图中选中一个Rectangle 组件，然后在“Properties ”视图中转到“Layout ”。
2. 在“Fill layout ”中，同时选中“Width ”和“Height ”复选框。

   

   注意：通过调整 “Row span ”和“Column span ”，使组件在“Grid Layout ”中占据更多的行和列空间。

3. 对所有“Rectangle ”组件重复上述步骤。
4. 在“Navigator ”视图中选择“Grid Layout ”。
5. 在“Properties ”视图中转到“Geometry-2D ”。在“Size ”中，增加“Width ”和“Height ”的值。
6. 所有Rectangle 组件将相应地跟进此更改。

   

堆叠布局

若要将组件堆叠在一起，可以使用Stack Layout 。

使用Stack Layout 的方法：

1. 将“Stack Layout ”组件拖动到“2D ”视图或“Navigator ”视图中。
2. 将需要堆叠的组件从“Components ”视图拖动到“2D ”视图或“Navigator ”视图中，并放置在“Stack Layout ”组件的上方。

   注意：您 还可以通过在“2D ”视图中选择“Stack Layout ”组件名称旁边的“ ”按钮，将组件添加到“Stack Layout ”中。

3. 要在Stack Layout 的组件之间切换，请在2D 视图中选中Stack Layout 组件。然后点击 （Previous ）和 （Next ）按钮。这将更新Stack Layout 的Current index ，并将Current index 组件移至堆栈顶部。

   注意：或者 ，选择Stack Layout 组件，然后转到Properties 视图 >Stack Layout ，并更新Current index 。索引从“0”（零）开始。

请参考以下示例了解Stack Layout 的工作原理：

1. 将一个Stack Layout 从“Component ”视图拖动到“Navigator ”或“2D ”视图中。
2. 将三个Rectangle 组件拖动到Navigator 视图中的Stack Layout 组件上。

   

3. 选中一个矩形组件，转到“Properties ”视图 > “Rectangle” > “Fill color ”，将其更改为“#ff0000”。
4. 对于第二个矩形，按照上述步骤操作，并将Fill color 更改为“0000ff”。
5. 对于第三个矩形，按照之前的步骤操作，将Fill color 改为“00ff00”。
6. 从“Components ”视图中拖动一个Slider 组件到“2D ”视图中。
7. 选中“Slider ”组件，转到“Properties ”视图 > “Slider ”。将“Value ”设置为“0”，“From ”设置为“0”，“To ”设置为“2”，并将“Step size ”设置为“1”。

   

8. 转到“Navigator ”视图，并选择“Stack Layout ”组件。
9. 转到“Properties ”视图 > “Stack Layout ”。选择“ ”以打开上下文菜单，然后选择“Set Binding ”。

   

10. 在“Binding Editor ”中，左侧下拉菜单中选择“Slider ”；右侧下拉菜单中选择“Value ”。选择“OK ”以确认绑定。

    

11. 选择“Live Preview ”或“Run Project ”以运行应用程序。
12. 拖动滑块以更改矩形内的颜色。

    

组织组件

您可以使用“Frame ”和“Group Box ”控件，在控件组周围绘制边框。

下表列出了可用于在用户界面中组织组件的 UI 控件。要访问这些控件，请转至Components > Qt Quick Controls。

图标	名称	用途
	Frame	围绕一组控件的视觉框架。
	Group Box	围绕一组控件的、带有标题的视觉框架。
	Page	一个支持页眉和页脚的样式化页面控件。
	Pane	与应用程序样式和主题相匹配的背景。