Qt学习第2.5天

Designer 设计师

Designer与Assistant程序一样，也是Qt Creator内置的一些子程序，Designer程序可以帮助开发者快速设计出UI的样式。其生成的文件扩展名是.ui，即界面文件。

可以在开始菜单中找到此程序，此程序可以单独使用来设计界面。

项目创建完成后，直接双击界面文件，可以打开一个集成的非独立的Designer程序，Designer的各区域划分如下所示：
以下分类并不是官方名称，只是为了便于理解

.ui文件使用的是xml语句，代码可以在Qt中进行查看

常用布局 Layout

可以把布局对象看做是一个透明的玻璃箱，在这个玻璃箱中的组件对象，可以按照某种预设规则排布，常见的布局有垂直布局、水平布局、格点布局等。
需要注意的是布局在预览中使用红线表示，红线在实际的运行中不可见。

另外，内部非空的布局对象最好不要直接删除，可以选中后在工具栏点击打破布局。
若直接删除的活，布局对象中所含有的组件都会随着布局对象的删除而被删除。

常见布局属性如下：

1. 垂直布局（C++中为QVBoxLayout、Designer中是Vertical Layout）
垂直布局的效果是内部的组件竖着排成一排。需要注意的是，一些常见组件不支持在垂直布局中设置伸展的比例参数。

2. 水平布局（C++中为QHBoxLayout、Designer中为Horizontal Layout）
水平布局的使用基本与垂直布局相同，只是方向是水平的。另外，大多数常见组件支持在水平布局中设置伸展的比例参数。

3. 格点布局（QGridLayout、Grid Layout）
组件呈格子状布局。
若想让组件与窗口贴合，可以选中窗口之后随便选择一个布局，点击后Designer会自动将窗口内组件与窗口贴合。或者选中窗口内所有布局和组件再设置一个整体的新布局也能达到一样的效果。

嵌套布局:布局和布局之间可以嵌套，位于内层布局相当于外层布局而言，可以看做是一个复合组件。

伸展器 Spacer

用于填充间距，分水平的和横向的。

使用界面是这样的

运行界面

大小策略
所有组件都有水平和垂直方向的大小策略，如下所示：

选中某个组件后，可以在右下角的属性配置区域找到大小策略对应的配置项。

上面是以QPushButton组件为例，可以看到水平和垂直方向的策略是不同的，点击具体的配置参数，有若干种不同的策略，这里我们简单地说一下部分常用策略的区别：

Fixed——大小不能改变。
Minimum——如果已经是最小则不能再小，但是可以放大到上限。
Maximum——如果已经是最大则不能再大，但是可以缩小到下限。
Prefered/Expanding——可以放大缩小

代码布局

此知识点新创建一个项目，注意不要使用界面文件。（创建时不勾选.ui文件）
Qt中布局的操作除了使用Designer设计外，也可以完全采用C++代码来进行设计，采用纯代码的方式实现UI界面相对比较繁琐。




dialog.h

#ifndef DIALOG_H
#define DIALOG_H


#include <QDialog>
// 垂直布局
#include <QVBoxLayout>
#include <QPushButton>


class Dialog : public QDialog
{
    Q_OBJECT


public:
    Dialog(QWidget *parent = 0);
    ~Dialog();


private:
    // 布局对象
    QVBoxLayout* layout;
    QPushButton* btn1;
    QPushButton* btn2;
};


#endif // DIALOG_H

dialog.cpp

#include "dialog.h"


Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    resize(500,500);
    // 创建按钮
    btn1 = new QPushButton("按钮1",this);
    btn2 = new QPushButton("按钮2",this);
    // 创建布局对象
    layout = new QVBoxLayout(this);
    // 添加组件对象
    layout->addWidget(btn2);
    layout->addWidget(btn1);
}


Dialog::~Dialog()
{
//这里不好判定先删除按钮还是先删除布局
    // “缓释”
    btn1->deleteLater();
    btn2->deleteLater();
    layout->deleteLater();
}

Designer信号槽

在Designer程序中可以点击F4按钮，进入信号槽编辑状态。在信号槽编辑状态中，进行相应的拖拽和信号槽的选择就可以实现信号槽的连接。

此时可以看到左边的组件都不可使用，窗口中的按钮出现了一条接地线，通过弹出的消息框可以看出是按钮发送信号由其所在窗口接收，并执行所需槽函数。
Designer程序默认不显示继承来的信号槽，如果需要使用，勾选后，可以显示所有的信号槽。
配置完成后，点击F3退出此模式。

点击 ，可以在列表中管理Designer设计的信号槽。也可以直接使用此列表进行信号槽的添加、修改和删除。


Designer也可以设计自定义槽函数，只需要在普通设计模式下，选中发射者，鼠标右键，点击“转到槽”，选中信号后，即可以自动在C++代码中创建自定义槽函数并连接。


需要注意的是，这种方式虽然可以生成槽函数代码，但是不生成connect函数代码，但是又已经连接了信号槽。

使用Designer设计信号槽的致命缺陷是不方便维护、代码可读性差，实际开发中请手动配置信号槽连接。