Ⅰ Ⅰ Ⅰ创建基本控件

在 U I UI UI界面拖拽两个 l a b e l label label作为账号,密码

拖拽两个 L i n e   E d i t Line\ Edit Line Edit作为输入框,两个 P u s h   B u t t o n Push\ Button Push Button作为登录和退出


QT实现登录窗口布局_输入框

Ⅱ Ⅱ Ⅱ使用布局

但是这样并不整齐,我们需要左右居中,上下对齐…

我们从 C o n t a i n e r Container Container中拉出一个叫 w i d g e t widget widget的东西

然后把标签"账号"和输入框拖进这个 w i d g e t widget widget里去

选中 w i d g e t widget widget,点击水平布局即可

QT实现登录窗口布局_网格布局_02

这排按键就在窗口顶端

QT实现登录窗口布局_网格布局_03

但是这样确实局部居中了,但是相对于整个窗口来说并不居中啊!!!

没关系,选中整个窗口 c e n t r a l w i d g e t centralwidget centralwidget点击垂直居中QT实现登录窗口布局_网格布局_04

但是这样也,太难看了吧!!!

Ⅲ . Ⅲ. Ⅲ.弹簧的使用

左侧的控件区有个叫弹簧的东西,如图所示,可以美化布局

QT实现登录窗口布局_边距_05

如图所示,三个弹框把按钮稍微分开了一些

QT实现登录窗口布局_输入框_06

但是间距是不是还有点远呢??没关系,点击弹簧,里面可以在右下角设置宽度以及是否可伸缩


Ⅲ.网格布局

由于上面的账号密码构成了一个两行两列的布局,所以可以使用网格布局

也就是只用一个 w i d g e t widget widget装账号密码和两个输入框,点网格布局

然后对整体窗口进行垂直布局,再根据需求顶弹簧


QT实现登录窗口布局_输入框_07

但是密码框和下面的按钮隔得太远了,不美观,怎么办呢

我们发现隔得这么远是因为外面的 w i d g e t widget widget就是这么大

所以选中 w i d g e t widget widget找到 s i z e p o l i c y sizepolicy sizepolicy设置垂直居中为 f i x e d fixed fixed就会把框缩小

然后调整整个窗口的大小到合适位置即可

Ⅳ.一些属性的修改

当然这些操作都可以通过代码来完成,不过使用 U I UI UI更加方便

选中整个窗口,找到 W i n d o w t i t l e Windowtitle Windowtitle可以修改窗口名字

还有 m i n i u m S i z e miniumSize miniumSize和 m a x i u m S i z e maxiumSize maxiumSize是设置窗口的最小最大尺寸

如果相等就意味着用户无法拉伸

QT实现登录窗口布局_边距_08

至于这个弹簧和边界还空了一点位置,这是由于窗口的边距影响的,左边距右边距等等

选中 w i d g e t widget widget修改 l a y o u t l e f m a . . . . . layoutlefma..... layoutlefma.....之类的属性即可

然后密码框也有属性设置显示模式…

QT实现登录窗口布局_边距_09