前篇------布局
图一
图二
设计上图所示Qt界面，首先是整个界面的布局，布局类型有两种：绝对定位和布局定位：
绝对定位：给出组件的坐标和长宽值。用户改变窗口大小或者拖动窗口边缘时，采用绝对位置的组件不会有任何响应，组件不会自由伸缩。
布局定位：把组件放入布局后，布局由专门的布局管理器进行管理。当需要调整大小或位置时，Qt使用对应的布局管理器进行调整。
三种常用的布局方式：
1）、水平布局：QHBoxLayout，按照水平方向从左到右布局
2）、垂直布局：QVBoxLayout，按照竖直方向从上到下布局
3）、网格布局：QGridLayout，在一个网格中进行布局
图一中整个界面分为四部分：图像区、输入区、按钮区、滑变区
图像区的设计：
在容器中选择一个控件widget层在容器层中拖入Label标签，在标签中插入图片，为了保持图片居中，在space中选择两个水平弹簧保持图片布局位置随着缩放而保持居中位置。在图像区设计好之后，图像区内部使用水平布局，在整个界面使用垂直布局。
输入区的设计：
输入区中包含两个名称的textLabel和两个lineEditor行编辑区，在容器中拖入一个控件widget后，在控件中拖入组件，widget中的组件选择的布局方式为QGridWidget
按钮区的设计：
同样加入一个widget，之后再widget中添加button，可通过弹簧控件按钮相对位置，在两个按钮中间，为了保持外观，可在按键中间的位置添加弹簧，在弹簧的sizetype属性中设置为fixed，在sizehint属性中设置宽度的大小。
滑变区的设计在下半部分说明
前篇------自定义控件
上文中提到了水平/垂直/网格布局：
接下来举一个水平布局的例子：
首先是在Qt中创建一个工程，Qwidget作为基类，姑且自定义类名为MyWidget，创建好的工程主函数为
1 #include "mywidget.h" 2 #include <QApplication> 3 #include<QSpinBox> 4 #include<QSlider> 5 #include<QHBoxLayout> 6 #include<QObject> 7 8 9 int main(int argc, char *argv[]) 10 { 11 QApplication a(argc, argv); 12 //创建一个w派生串口 13 MyWidget w; 14 //设置窗口名称，姑且叫Jerry吧，注意字符串需要用双引号 15 w.setWindowTitle("Jerry"); 16 //创建一个滑块，并设置w为其父窗口，注意向其传入父窗口的地址，使用&取地址符 17 QSpinBox *spinBox = new QSpinBox(&w); 18 //创建一个滑条，并设其为水平形式 19 QSlider *slider = new QSlider(Qt::Horizontal, &w); 20 spinBox->setRange(0, 130); //设计滑块滑动范围 21 slider->setRange(0, 130); //设计滑条滑动范围 22 //槽函数连接 23 /* 24 * 信号发出方：滑条 25 * 发出信号：数字改变 26 * 信号接收方：滑块 27 * 信号处理函数（槽函数）：显示滑条数值 28 */ 29 QObject::connect(slider, &QSlider::valueChanged, 30 spinBox, &QSpinBox::setValue); 31 void (QSpinBox:: *spinBoxSignal)(int) = &QSpinBox::valueChanged; 32 /* 33 * 信号发出方：滑块 34 * 发出信号：滑块信号 35 * 信号接收方：滑条 36 * 信号处理函数（槽函数）：设置滑条标志位 37 */ 38 QObject::connect(spinBox, spinBoxSignal, 39 slider, &QSlider::setValue); 40 spinBox->setValue(35); //给滑块设定初始值，不设置的话默认为0 41 //给控件设置布局 42 QHBoxLayout *layout = new QHBoxLayout; 43 layout->addWidget(spinBox); 44 layout->addWidget(slider); 45 w.setLayout(layout); 46 47 w.show(); 48 49 return a.exec(); 50 }
运行结果：
同理，在已经创建好的界面中，如图二所示，添加一个widget组件，然后选中工程--->新建一个C++类------>C++ Class---->基类（base class）选为Qwidget---->起一个派生名（比如SmallWidget）
接着在smallwidget.cpp文件中：
#include "smallwidget.h" #include <QSpinBox> #include <QSlider> #include <QHBoxLayout> SmallWidget::SmallWidget(QWidget *parent) : QWidget(parent) { QSpinBox *spin = new QSpinBox(this); QSlider *slider = new QSlider(Qt::Horizontal, this); //把控件添加到布局中 QHBoxLayout *hLayout = new QHBoxLayout(this); hLayout->addWidget(spin); hLayout->addWidget(slider); /* * 用法：static_cast < type-id > ( expression ) * 该运算符把expression转换为type-id类型 */ connect(spin, static_cast<void (QSpinBox::*)(int)>(&QSpinBox::valueChanged), slider, &QSlider::setValue); QObject::connect(slider, &QSlider::valueChanged, spin, &QSpinBox::setValue); /* * QSpinBox::valueChanged返回值的类型有int和str两种，使用woid函数强制类型转换 */ // void (QSpinBox:: *spinBoxSignal)(int) = &QSpinBox::valueChanged; // QObject::connect(spin, spinBoxSignal, // slider, &QSlider::setValue); }
然后在ui界面之前添加的空白widget中右击，选择提升为，提升的类名称为class派生类的名字SmallWidget，选择全局包含，添加，提升即可。
最终的显示结果为：
