QT从入门到实战x篇_15_登录窗口布局（代码实现布局总结、手动布局实例、widget、行列形式的用栅格、弹簧调整控件与widget距离）

本篇主要介绍利用代码和手动的方式创建和调整一个UI界面并进行布局调整。

关于代码实现UI界面的一些总结：
（1）设置window/dialog对象的最小尺寸、title

setMinimumSize(800, 600);
setWindowTitle(tr("My Dialog"));

（2）对于水平或者垂直布局，"addWidget(widget对象)"用于包含widget类的控件（不知道是不是widget查看父类这些）、"addLayout(布局)"用于包含布局；
（3）"布局->setMargin(); 布局->setStretch(对象1,展现时比例); 布局->setStretch(对象2,展现时比例);"调整布局关系；

MainLayout->setMargin(2);  //距离widget边沿距离为2
MainLayout->setStretch(0,1); //第一个对象与第二个对象展现时比例为1
MainLayout->setStretch(1,1); //第二个对象与第一个对象展现时比例为1

（4）在调整好布局包含关系后，切记布局都是要有对象的，即依赖的widget类对象，使用"widget类对象->setLayout(布局)"即可实现依赖关系或者说是加入widget的对象树中;另外还需要设置widget在关窗后自动销毁及是否为模态对话框的设置。

    this->setLayout(MainLayout);  //设置widget的布局属性
    this->setAttribute(Qt::WA_DeleteOnClose);//窗口关闭后，自动释放内存
    this->setModal(true); //设置是否为模态对话框 true模态 默认false 非模态

（5）实现以下界面的方法

代码如下：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    initUI();
}

void Widget::initUI()
{
    m_buttonWrite = new QPushButton(QString::fromLocal8Bit("写入数据"));
    m_buttonStop = new QPushButton(QString::fromLocal8Bit("停止数据读入"));
    QHBoxLayout *operLayout = new QHBoxLayout;
    operLayout->addWidget(m_buttonWrite);
    operLayout->addWidget(m_buttonStop);
    operLayout->addStretch();

    QVBoxLayout *layout = new QVBoxLayout;
    layout->addLayout(operLayout);
    setLayout(layout); //默认使用的是this指针，指向Widget对象
}

以下为手动布局的详情：
总结放于前： 好看的界面需要使用widget包含控件，对几行几列的使用栅格、水平、垂直、弹簧。代码实现是先生成控件对象，然后将控件摆放到widget中。

1. 首先创建一个带UI的工程文件，创建时的设置如下：
（1）状态栏移除
此处生成的是一个mainwindow的界面，对于你不想要的状态栏等，可以在右侧中选中，右键选择移除即可。

只剩下一个QWidget

（2）利用label控件，创建一个登录名

（3）LineEdit控件创建一个输入框

同理创建出密码和按钮，但是这个时候创建出来的控件位置这些都是固定的，不会随着窗口大小而自适应。

（4）利用widget进行布局。
比较推荐的布局方式是利用widget进行布局，将控件拖入widget控件之中，这个时候看到widget里还是比较乱的。

（5）选择水平布局：

瞬间感觉好看很多

同理对其他的控件也是用widget进行布局，得到：

（6）对整体来个竖直方向布局：

虽然可以随着界面变化，看起来不美观，需要再进行调整。
调整一下整体的大小

（7）利用弹簧进行调整相对位置

（8）弹簧固定值设置
加弹簧后虽然可以跟随界面变化，但是按钮之间距离太大了，这个时候需要将中间弹簧设置为一个定值，这样就不会出现这样的问题了。

弹簧距离设置为定值

都加上弹簧之后的效果

（9）如何打破整体布局，取消了弹簧效果：


2. 利用栅格进行布局
（1）取消之后再添加一个widget，将“用户名”和“密码”拖入其中，因为两个可以看做两行两列的空间布局，因此选中这个widget，点击“栅格布局”。

（2）然后选中最大的那个widget，选择“垂直布局”，发现既对齐又布局会好很多。

（3）加弹簧并去除widget与控件之间空隙
再加上弹簧后的效果，但是垂直方向距离比较大，这是因为左侧每个widget与控件之间有很大空隙，怎么去除这些间隙呢？

选中widget，右侧中选中“sizePolicy”下的垂直策略，选中"Fixed"

同理操作下边的widget，再增加弹簧之后，效果如下：

至此，界面布局已经完成。
3. 如何进行属性设置？
（1）改变主窗口的名

（2）固定窗口大小设置

（3）设置margin属性
后来你会发现弹簧或者控件和widget有一定的间隔，这个参数即为margin，可以设置为0

（4）密码控件处暗码显示

4.学习视频地址：登录窗口布局（手动布局、widget、行列形式的用栅格、弹簧调整控件与widget距离）