前言：
所谓 GUI 界面，归根结底，就是一堆组件的叠加。我们创建一个窗口，把按钮放上面，把图标放上面，这样就成了一个界面。在放置时，组件的位置尤其重要。我们必须要指定组件放在哪里，以便窗口能够按照我们需要的方式进行渲染。这就涉及到组件定位的机制。Qt为我们应用程序界面开发提供的一系列的控件，下面我们介绍一下界面布局和最常用一些控件，所有控件的使用方法我们都可以通过帮助文档获取。
目录
一、布局管理器
1.系统提供的布局控件
2.利用widget做布局
二、常用控件
1.按钮组
2. ListWidget列表容器
3.QTreeWidget树控件
（1）设置头：
（2）创建根节点：
（3）添加根节点到树控上：
（4）添加子节点：
4.QTableWidget 表格控件
（1）设置列数：
（2）设置水平表头：
（3）设置行数：
（4）设置正文：
5.其他控件
（1）stackedWidget 栈控件
（2）下拉框
（3）QLabel 显示图片
（4）QLabel显示动图gif图片
（5）完整代码
一、布局管理器 1.系统提供的布局控件这4个为系统给我们提供的布局的控件，但是使用起来不是非常的灵活
2.利用widget做布局第二种布局方式是利用控件里的widget来做布局，在Containers中
在widget中的控件可以进行水平、垂直、栅格布局等操作，比较灵活。
默认窗口和控件之间有9间隙,可以调整layoutLeftMargine
利用弹簧进行布局控制：
再布局的同时我们需要灵活运用弹簧的特性让我们的布局更加的美观，下面是一个登陆窗口，利用widget可以搭建出如下登陆界面：
二、常用控件 1.按钮组(1) QpushButton: 常用按钮
(2) QToolButton: 工具按钮用于显示图片，如图想显示文字
修改风格: toolButtonstyle ,凸起风格autoRaise
(3) radioButton: 单选按钮，设置默认 u->rBtnMan->setChecked(true);
#include "mainwindow.h"#include "ui_mainwindow.h"#include MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow){ ui->setupUi(this); //设置单选按钮 男默认选中 ui->rBtnMan->setChecked(true); connect(ui->rBtnWoman,&QRadioButton::clicked,[=](){ qDebug() setupUi(this); //多选按钮 2是选中，0是未选中 connect(ui->cBox,&QCheckBox::stateChanged,[=](int state){ qDebug() setTextAlignment(Qt::AlignHCenter);ui->listWidget ->addItem ( item ) #include "mainwindow.h"#include "ui_mainwindow.h"#include #include MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow){ ui->setupUi(this); //利用listWidget写诗 QListWidgetItem * item = new QListWidgetItem("锄禾日当午"); //将一行诗放到listWidget控件中 ui->listWidget->addItem(item); item->setTextAlignment(Qt::AlignHCenter);}MainWindow::~MainWindow(){ delete ui;} #include "mainwindow.h"#include "ui_mainwindow.h"#include #include MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow){ ui->setupUi(this); //QList QStringList list; list setHeaderLabels(QStringList()addChild(l1); #include "mainwindow.h"#include "ui_mainwindow.h"#include MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow){ ui->setupUi(this); //treeWidget树控件使用 //设置水平头 ui->treeWidget->setHeaderLabels(QStringList() treeWidget->addTopLevelItem(zhiItem); //追加子节点 QStringList heroL1; heroL1 tableWidget->setColumnCount(3); //设置水平表头 ui->tableWidget->setHorizontalHeaderLabels(QStringList()setItem(0,0, new QTableWidgetItem("亚瑟"));// ui->tableWidget->setItem(0,1, new QTableWidgetItem("男"));// ui->tableWidget->setItem(0,2, new QTableWidgetItem("18")); QStringList nameList; nameList stackedWidget->setCurrentIndex(0); //btn1按钮 connect(ui->btn1,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(1); }); //btn2按钮 connect(ui->btn2,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(2); }); //btn3按钮 connect(ui->btn3,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(0); });}Widget::~Widget(){ delete ui;} （2）下拉框ui->comboBox->addItem("奔驰");
#include "widget.h"#include "ui_widget.h"#include Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget){ ui->setupUi(this); //下拉框 ui->comboBox->addItem("奔驰"); ui->comboBox->addItem("宝马"); ui->comboBox->addItem("拖拉机"); //点击按钮 选中宝马 connect(ui->btnt,&QPushButton::clicked,[=](){ //ui->comboBox->setCurrentIndex(2); ui->comboBox->setCurrentText("宝马"); });}Widget::~Widget(){ delete ui;} （3）QLabel 显示图片ui->lbl_Image->setPixmap(QPixmap(":/Image/butterfly.png"))
#include "widget.h"#include "ui_widget.h"#include Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget){ ui->setupUi(this); //利用QLabel显示图片 ui->lbl_image->setPixmap(QPixmap(":/Image/butterfly.png"));}Widget::~Widget(){ delete ui;} （4）QLabel显示动图gif图片ui->lbl_movie->setMovie(movie);
movie->start();
#include "widget.h"#include "ui_widget.h"#include Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget){ ui->setupUi(this); //利用QLabel显示动态图片 QMovie * movie = new QMovie(":/Image/mario.gif"); ui->lbl_movie->setMovie(movie); //播放动图 movie->start();}Widget::~Widget(){ delete ui;} （5）完整代码 #include "widget.h"#include "ui_widget.h"#include Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget){ ui->setupUi(this); //栈控件使用 //设置默认定位页面 ui->stackedWidget->setCurrentIndex(0); //btn1按钮 connect(ui->btn1,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(1); }); //btn2按钮 connect(ui->btn2,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(2); }); //btn3按钮 connect(ui->btn3,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(0); }); //下拉框 ui->comboBox->addItem("奔驰"); ui->comboBox->addItem("宝马"); ui->comboBox->addItem("拖拉机"); //点击按钮 选中宝马 connect(ui->btnt,&QPushButton::clicked,[=](){ //ui->comboBox->setCurrentIndex(2); ui->comboBox->setCurrentText("宝马"); }); //利用QLabel显示图片 ui->lbl_image->setPixmap(QPixmap(":/Image/butterfly.png")); //利用QLabel显示动态图片 QMovie * movie = new QMovie(":/Image/mario.gif"); ui->lbl_movie->setMovie(movie); //播放动图 movie->start();}Widget::~Widget(){ delete ui;}三、自定义控件
在搭建Qt窗口界面的时候，在一个项目中很多窗口，或者是窗口中的某个模块会被经常性的重复使用。一般遇到这种情况我们都会将这个窗口或者模块拿出来做成一个独立的窗口类，以备以后重复使用。
在使用Qt的ui文件搭建界面的时候，工具栏栏中只为我们提供了标准的窗口控件，如果我们想使用自定义控件怎么办？
我们从QWidget派生出一个类SmallWidget，实现了一个自定窗口
1.samllWidget.h提供 getNum 和 setNum对外接口
#ifndef SAMLLWIDGET_H#define SAMLLWIDGET_H#include namespace Ui {class samllWidget;}class samllWidget : public QWidget{ Q_OBJECTpublic: explicit samllWidget(QWidget *parent = nullptr); ~samllWidget(); //设置数字 void setNum(int num); //获取数字 int getNum();private: Ui::samllWidget *ui;};#endif // SAMLLWIDGET_H 2.samllWidget.cpp实现功能，改变数字，滑动条跟着移动 ，信号槽监听
#include "samllwidget.h"#include "ui_samllwidget.h"samllWidget::samllWidget(QWidget *parent) : QWidget(parent), ui(new Ui::samllWidget){ ui->setupUi(this); //QSpinBox移动 QSlider跟着移动 void(QSpinBox:: * spSignal)(int) = &QSpinBox::valueChanged; connect(ui->spinBox,spSignal,ui->horizontalSlider,&QSlider::setValue); // QSlider滑动 QSpinBox数字跟着改变 connect(ui->horizontalSlider,&QSlider::valueChanged,ui->spinBox,&QSpinBox::setValue);}//设置数字void samllWidget::setNum(int num){ ui->spinBox->setValue(num);}//获取数字int samllWidget::getNum(){ return ui->spinBox->value();}samllWidget::~samllWidget(){ delete ui;} 3.samllWidget.ui.ui中 设计 QSpinBox和QSlider 两个控件
Widget中使用自定义控件，拖拽一个Widget，点击提升为，点击添加，点击提升
弹出提升窗口部件对话框
添加要提升的类的名字,然后选择 添加
添加之后,类名会显示到上边的列表框中,然后单击提升按钮,完成操作.
我们可以看到, 这个窗口对应的类从原来的QWidget变成了SmallWidget
再次运行程序,这个widget_3中就能显示出我们自定义的窗口了.