持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
📒博客首页：何名取 的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！
元素布局
本节看完你将学会：
- 使用锚定位
- 使用列布局
前言
登录界面制作-布局是本系列教程的第二节，本系列教程将介绍如何使用Qt Design Studio使用一些基本的UI组件(如页面、按钮和输入框)创建一个简单的UI。本节描述了如何在页面上定位UI组件，以创建可伸缩的UI。
为了确保布局具有响应性，并且调整桌面或不同屏幕尺寸的设备上的UI大小时，所有UI组件都保持在适当的位置上，这样的情况需要使用锚和定位器。
锚定UI组件
锚布局
在基于锚点的布局中，每个组件实例可以被认为具有一组不可见的锚点线:顶部、底部、左边、右边、填充、水平居中、垂直居中和基线。
通过将一个或多个组件实例的锚线附加到另一个组件实例的锚线上，锚点可以将一个组件实例放置在另一个组件实例的附近或内部。如果组件实例发生变化，锚定到它的实例将自动调整以维护锚定。
静态元素锚定
首先，将静态页面元素、背景图像(adventurePage)、logo (qt_logo_green_128x128px)和标记行(tagLine)锚定到页面。
要在页面上锚定组件实例:
- 双击Screen01.ui.qml跳转到Design视窗
- 在Navigator中选择adventurePage显示其属性Properties
- 在Properties > Layout中，选择锚定按钮，将adventurePage锚定到Target字段中的父节点。这将把背景图像附加到矩形的所有边
- 在Navigator中选择qt_logo_green_128x128px
- 在Properties > Layout中，选择锚定按钮，将qt_logo_green_128x128px锚定到目标字段中其父元素的顶部，并以40像素的边距将其水平对齐。这将标志附加到顶部的矩形，同时保持其水平中心与矩形的水平中心对齐
- 在Navigator中选择tagLine
- 在Properties > Layout中，取消选择垂直中心锚定按钮，然后选择top锚定按钮以将tagLine锚定到Target字段的qt_logo_green_128x128px，边缘为40像素。这将tagLine的顶部附加到logo的底部，同时保持其水平中心与矩形的水平中心对齐
- 选择File > Save或按Ctrl+S保存更改
注意: 可以将组件实例锚定到它们的父组件和兄弟组件。如果Target字段中没有列出组件实例，请检查该组件实例是否位于Navigator中的组件层次结构中的正确位置。
使用列定位器
要在列中定位输入框和按钮，需要学习另一种定位组件的方法。然后，将这些列固定在页面上，以便当屏幕大小改变时，它们的位置可以改变。
定位器
对于许多用例，最好的定位器是简单的网格、行或列，Qt Design Studio提供的组件可以以最有效的方式定位这些排列中的子元素。
列布局
将字段和按钮定位为列:：
- 在Navigator中选择username和password(按住Shift或Ctrl键进行多次选择)，并右键单击其中任何一个来打开菜单
- 选择Position > Position in Column
- 在Navigator中选择column，并将其ID更改为fields
- 将Column > Spacing设置为20
- 选择login和createAccount，然后选择Position > Position in Column来将它们定位到列中。
- 选择按钮列，将其ID更改为buttons，并将按钮之间的间距设置为20像素，如上所示。
现在，要将把fields和buttons列锚定到页面:
- 在Navigator中选择fields
- 在Properties > Layout中，选择top按钮以170像素距将字段列的顶部固定到tagLine的底部。
- 选择水平锚定按钮将fields列锚定到它的父列。
- 在Navigator中选择buttons
- 在Properties > Layout中，选择bottom按钮以50像素的边距将buttons列固定在其父节点的底部。
- 选择水平锚定按钮将buttons列锚定到它的父列。
- 选择File > Save或按Ctrl+S保存更改
此时就完成了所有元素的布局了。
