Day02_设计器的使用之控件篇

前篇------布局

图一

图二

设计上图所示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，选择全局包含，添加，提升即可。

最终的显示结果为：