使布局具有可扩展性

用户界面中组件的位置可以是绝对位置，也可以是相对于其他组件的位置。可视化组件在屏幕坐标系中的任何瞬间都存在于特定位置。可视化组件的 x 坐标和 y 坐标是相对于其可视化父组件而言的，左上角的坐标为（0，0）。

如果设计的是静态用户界面，手动定位是最有效的组件定位方式。对于动态用户界面，请使用以下定位方法。

设置绑定

使用属性绑定，可以连接组件的属性。因此，一个组件的变化会影响另一个组件。一旦设置了绑定，如果其他属性或数据值发生变化，属性值就会自动保持更新。

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

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 。这样就可以将同级组件保持在一起。

在下图中，矩形 2的左边缘锚定到其左侧同级组件矩形 1 的右边缘，而其上边缘锚定到其父组件的顶部。

代码中的锚点设置如下：

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 字段中设置子组件之间的间距。

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

行和流量定位器

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中提供的组件来排列用户界面中的组件。

与定位器不同，布局同时管理其子组件的位置和大小，因此非常适合动态和可调整大小的用户界面。不过，请不要在Properties 的几何图形 - 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. 从Component 视图拖动一个Stack Layout 到Navigator 或2D 视图。
2. 将三个Rectangle 组件拖到Navigator 视图中的Stack Layout 组件。

   

3. 选择一个矩形组件，然后进入Properties 视图 > 矩形 >Fill color ，将其更改为 "#ff0000"。
4. 对于第二个矩形，按照前面的步骤，将Fill color 更改为 "0000ff"。
5. 对于第三个矩形，按照前面的步骤，将Fill color 更改为 "00ff00"。
6. 将Slider 组件从Components 视图拖到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 控件在控件组周围绘制框架。

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

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