【Qt教程】2.2 - Qt5 布局管理器（水平、垂直、栅格布局）、弹簧、设计一个登陆界面

使用布局管理器，来设计一个登陆界面

都是操作，没代码没理论。参照：Qt设计一登陆窗口布局

 

1. 新建空工程

双击.ui文件，进入界面设计区。

我们新建工程时候，使用的是QMainWindow类，会自动包含菜单栏、状态栏。在右上角对象浏览器中，我们可以选选择性的删除掉他们。

 

我们要设计的是一个登陆窗口，于是菜单栏、工具栏、状态栏都不需要。将其在UI设计器中全部删除掉。

现在运行只是一个空窗口，与Widget类没什么区别。

 

2. 登陆窗口布局

文字显示使用Label，输入框使用Line Edit，按键使用Push Button。

大概拖拽、编辑后是这个样子。

不过此时运行，控件的位置不是随着窗口变化的，而是固定位置的，还需很多完善。需要使用布局管理器。

 

3. 布局管理器

控件拖拽进来不是对齐的，我们先进行对齐的布局。

对齐有两种操作方式：

• 1.使用垂直/水平布局 Vertical/Horizontal Layout，之后将控件拖入，再调节大小。不过这个不是很灵活。
• 2. 使用 Widget，将控件拖入，选中 Widget，使用Vertical/Horizontal Layout。这样用起来更加灵活。

我们先将 使用Widge，将用户名和输入框拖入，进行水平对齐。再使用Widge，将密码和输入框拖入，进行水平对齐。

 

如何区分Widget是否有过布局？？没有布局的Widget的图标不一样，有个红圈。

 

再使用Widget，将这三个子Widget全部放入，使用栅格布局Grid Layout。

不过这样搞又发现了问题，上下输入框大小不一致。

于是将控件全部分离出，再使用一个Widget，将控件全部放入，使用栅格对齐。

这回输入框是一致，可按键又不一样了。因为栅格布局会自动整理好几行几列，行列全部一致，所以会出现如上情况。

只好将按键单独布局。

将整体窗口使用垂直布局，将窗口大小像素缩小。

 

4. 使用弹簧进行位置调整

使用弹簧对各个控件进行一下中心调整。

（注意：没有布局的界面，弹簧是无效的。同理，已经布好弹簧的界面，如果想让弹簧失效，可以使用取消布局）

如果想让弹簧是固定距离，更改属性为 Fixed，输入宽度。

而现在这两个子Widget的上下距离都比较大，如果使用垂直弹簧的话，会给两个的中间搞出很大的空隙。

为了消除空袭，将两部分的Widget垂直高度固定，垂直策略改为Fixed。

之后再适当的在垂直方向加上一些弹簧。

嗯，有那味了。

 

5. 其他修改、隐藏密码

界面布局就大概完成了，之后再对属性进行一些修改。

窗口标题，windowTitle。

现在的窗口还是可以缩放的，我们想要固定。将最大最小范围限定为同一值。

 

再仔细观察窗口，发现弹簧和窗口/控件间是有间隙的。系统默认为9个像素间隙。

间隙距离可以选中 Widget，属性拖到最后的Layout进行修改。

 

另外现在输入密码，密码是显示在屏幕上的，想要普通登陆界面的登陆效果，也要更改 Line Edit 的属性。

将echoMode改为Password。

就是这样，输入密码时明文不可见。一个完整的登陆窗口就设计好了。