QT学习（3） 简单布局实现登录界面的效果

这是在一个QT的视频教学上看到的，记录一下。

GUI编程中，界面组件的布局很重要，如果没有加入布局的话，当用户调整窗口大小的时候就会很难看。可能是把一些改显示的东西遮住了，也可能是界面上大量留白。

先看一下QQ的登录界面：

其中最基础的就是用户头像，帐号，密码和登录按钮了。我们自己实现一个类似的界面。

此外，这个界面可以随意拉伸或者收缩。图片大小和界面上标签的组件的绝对位置也会发生变化。

这就需要利用QT的页面布局的功能。首先在窗口上放置三个Widget，分别用于容纳头像、用户输入、按钮。

先看一下按钮部分，在ui设计器中：

按照这样的顺序来，先放置widget，再在widget上放置两个按钮，然后在两个按钮之间以及按钮和边界的位置上放置“弹簧”，一共三个弹簧。弹簧就是上面的spacer。最后对整个widget选择水平布局。

看一下输入用户名和密码的部分：

可以看到此widget上有两个label和两个editline组件，只要我们放好它们的相对位置，再对widget点击设置网格布局即可。

最后看一下头像部分：

这里先取消了布局，才看出来图片的左右两边各有一个弹簧。此widget上就是由一个显示图片的label和两个水平弹簧组成。

 最后，点击主窗口，设置垂直布局。