元素布局

本节看完你将学会：

1. 使用锚定位

2. 使用列布局

前言

登录界面制作-布局是本系列教程的第二节，本系列教程将介绍如何使用Qt Design Studio使用一些基本的UI组件(如页面、按钮和输入框)创建一个简单的UI。本节描述了如何在页面上定位UI组件，以创建可伸缩的UI。

为了确保布局具有响应性，并且调整桌面或不同屏幕尺寸的设备上的UI大小时，所有UI组件都保持在适当的位置上，这样的情况需要使用锚和定位器。

锚定UI组件

锚布局

在基于锚点的布局中，每个组件实例可以被认为具有一组不可见的锚点线:顶部、底部、左边、右边、填充、水平居中、垂直居中和基线。

通过将一个或多个组件实例的锚线附加到另一个组件实例的锚线上，锚点可以将一个组件实例放置在另一个组件实例的附近或内部。如果组件实例发生变化，锚定到它的实例将自动调整以维护锚定。

静态元素锚定

首先，将静态页面元素、背景图像(adventurePage)、logo (qt_logo_green_128x128px)和标记行(tagLine)锚定到页面。

要在页面上锚定组件实例:

1. 双击Screen01.ui.qml跳转到Design视窗

2. 在Navigator中选择adventurePage显示其属性Properties

3. 在Properties > Layout中，选择锚定按钮，将adventurePage锚定到Target字段中的父节点。这将把背景图像附加到矩形的所有边

4. 在Navigator中选择qt_logo_green_128x128px

5. 在Properties > Layout中，选择锚定按钮，将qt_logo_green_128x128px锚定到目标字段中其父元素的顶部，并以40像素的边距将其水平对齐。这将标志附加到顶部的矩形，同时保持其水平中心与矩形的水平中心对齐

6. 在Navigator中选择tagLine

7. 在Properties > Layout中，取消选择垂直中心锚定按钮，然后选择top锚定按钮以将tagLine锚定到Target字段的qt_logo_green_128x128px，边缘为40像素。这将tagLine的顶部附加到logo的底部，同时保持其水平中心与矩形的水平中心对齐

8. 选择File > Save或按Ctrl+S保存更改

注意: 可以将组件实例锚定到它们的父组件和兄弟组件。如果Target字段中没有列出组件实例，请检查该组件实例是否位于Navigator中的组件层次结构中的正确位置。

使用列定位器

要在列中定位输入框和按钮，需要学习另一种定位组件的方法。然后，将这些列固定在页面上，以便当屏幕大小改变时，它们的位置可以改变。

定位器

对于许多用例，最好的定位器是简单的网格、行或列，Qt Design Studio提供的组件可以以最有效的方式定位这些排列中的子元素。

列布局

将字段和按钮定位为列:：

1. 在Navigator中选择username和password(按住Shift或Ctrl键进行多次选择)，并右键单击其中任何一个来打开菜单

2. 选择Position > Position in Column

3. 在Navigator中选择column，并将其ID更改为fields

4. 将Column > Spacing设置为20

5. 选择login和createAccount，然后选择Position > Position in Column来将它们定位到列中。

6. 选择按钮列，将其ID更改为buttons，并将按钮之间的间距设置为20像素，如上所示。

现在，要将把fields和buttons列锚定到页面:

1. 在Navigator中选择fields

2. 在Properties > Layout中，选择top按钮以170像素距将字段列的顶部固定到tagLine的底部。

3. 选择水平锚定按钮将fields列锚定到它的父列。

4. 在Navigator中选择buttons

5. 在Properties > Layout中，选择bottom按钮以50像素的边距将buttons列固定在其父节点的底部。

6. 选择水平锚定按钮将buttons列锚定到它的父列。

7. 选择File > Save或按Ctrl+S保存更改

此时就完成了所有元素的布局了。

作者：何名取
链接：https://juejin.cn/post/7101841584961880094
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

原文始发于微信公众号（汇编语言）：Qt Design Studio教程（2）登录界面制作-布局