布局管理器~登录界面的搭建实例

2023-05-16

所谓的图形用户界面（GUI ），本质上就是一堆组件的叠加。创建一个窗口，把按钮放上面，把图标放上面，这样就成了一个界面。因此，组件位置的放置尤其重要，指定组件放置的位置，以便窗口能够按照需要的方式进行渲染。这就涉及到组件定位的机制。

Qt 提供了两种组件定位机制：绝对定位和布局定位。

绝对定位：给出组件的坐标和长宽值。这样Qt 就能知道组件的位置以及设置组件的大小。但这有一个问题：若用户改变了窗口大小，比如点击最大化按钮或者使用鼠标拖动窗口边缘，采用绝对定位的组件是不会有任何响应的。这是因为并没有告诉 Qt在窗口变化时，组件是否要更新自己以及如何更新。
布局定位：将组件放入某一种布局，布局由专门的布局管理器进行管理。当需要调整大小或者位置的时候，Qt 使用对应的布局管理器进行调整。

采用绝对定位的组件虽然可以禁止用户改变窗口大小来解决这个问题，但这也是不合时宜。布局定位完美的解决了使用绝对定位造成的缺陷。

Qt 提供的最常用的三种布局：

QHBoxLayout：按水平方向从左到右布局；
QVBoxLayout：按竖直方向从上到下布局；
QGridLayout：在一个网格中进行布局，类似于 HTML 的 table；

系统提供的布局控件

系统提供了4个布局控件，但是使用起来不是非常的灵活，这里就不详细介绍了。

利用widget做布局

第二种布局方式是利用控件里的widget来做布局，在Containers中

可以在widget中对控件可以进行水平、垂直、栅格布局等操作。灵活运用弹簧的特性可使步局更加的美观，下面是一个登陆窗口，利用widget可以搭建出如下登陆界面：

下面演示一下上图中登录界面的搭建步骤：

新建工程——>打开ui文件：

打破布局，否则无法自定义控件布局：

添加label和line Edit：

修改label后，新建一个widget，并按图所示将label和line Edit都拖入widget中，再点击栅格布局：

点击栅格布局之后，会发现widget框的大小和labe两个控件大小不匹配，

需选中widget框，在属性栏中设置sizePOlicy垂直策略为fixed。效果如下所示：

添加两个按钮，双击修改为登录和退出，同样新建一个widget，并将两个按钮都拖入widget中，再点击栅格布局。并选中widget框，在属性栏中设置sizePOlicy垂直策略为fixed。：
选择这个大的widget框，将它设置为垂直布局（这一步很重要，否则下一步添加弹簧会不管用）：

添加弹簧，并设置一些控件之间弹簧的宽度：

最终效果如下所示：

补充

可以在对话框属性中设置登录对话框的大小为固定（只需将最大最小设置为相同即可）。也可以将输入密码框设置为保密输入，只需选中密码输入框，在属性中将返回模式echoMode设置为Password即可。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)