QT UI界面小部件

UI设计

所谓 GUI 界面，归根结底，就是一堆组件的叠加。我们创建一个窗口，把按钮放上面，把图标放上面，这样就成了一个界面。在放置时，组件的位置尤其重要。我们必须要指定组件放在哪里，以便窗口能够按照我们需要的方式进行渲染。这就涉及到组件定位的机制。

常用控件

布局控件

Qt 提供的布局中以下三种是我们最常用的：

1. QHBoxLayout：按照水平方向从左到右布局；
2. QVBoxLayout：按照竖直方向从上到下布局；
3. QGridLayout：在一个网格中进行布局，类似于 HTML 的 table；
   

弹簧

分为纵向弹簧和横向弹簧

按钮

PushButton: 普通按钮

ToolButton：工具按钮

RadioButton ：单选按钮

单选按钮需要使用一个组框，框起所有选项。

可以设置按钮的默认选项，通过setChecked()函数

 ui->radioButton->setChecked(true);    //checked 选中的

也可以使用connect函数连接到按钮的触发和槽函数

    connect(ui->radioButton_2,&QRadioButton::clicked,[=]()
    {
        qDebug()<<"选中了第二个";
    });

CheckBox：多选按钮

与单选框一样需要一个组框，框起所有选项，才能进行多选

与单选框一样，也可以设置默认选项。
我们也可以是用connect函数接收它的状态。

    //连接多选按钮
    //信号与槽函数的参数个数要相同或者信号的参数个数要高于槽函数的参数个数
    connect(ui->checkBox,&QCheckBox::stateChanged,[=](int state)
    {
        qDebug()<<state;
    });

单元组件

Qt Creator有3种单元组件如下图：

控件类	控件名	中文名
QListWidget	List Widget	列表单元控件
QTreeWidget	Tree Widget	树形单元控件
QTableWidget	Table Widget	表格单元控件

列表单元部件

两种创建方法

1. 每一行都是QListWidgetItem类型。可以先创建一个QListWidgetItem对象，后添加到QListWidget对象中。这种方法可以单独设置每一行的格式

    QListWidgetItem * item = new QListWidgetItem("锄禾日当午");
    
    ui->listWidget->addItem(item);
    //设置文本对齐格式,设置水平居中
    item->setTextAlignment(Qt::AlignHCenter);

2. 创建QStringList 类型，添加到QListWidget对象中,QStringList类型相当于list< string >类型，类内重载了<<运算符，可以使用<<运算符来生成列表

    QStringList list;
    list<<"锄禾热当午"<<"汗滴禾下土"<<"数自己盘中餐";
    ui->listWidget->addItems(list);

向QListWidget对象中添加一条item时，还可以使用QString类型直接添加

//函数原型如下
 void addItem(const QString &label)

树型单元部件

树型单元部件的每一项都是 QTreeWidgetItem类

1. 树形单元部件使用时需要先设置表头
   使用setHeaderLabels()函数

//函数原型
//设置表头内容
 void setHeaderLabel(const QString &label)
 void setHeaderLabels(const QStringList &labels)
//函数实现
 ui->treeWidget->setHeaderLabels(QStringList()<<"英雄"<<"英雄简介");

2. 设置顶层结点，需要先生成顶层结点，再加入到根节点上。生成顶层结点使用构造函数生成一个指针，加入到根节点使用 addTopLevelItem或addTopLevelItems

//生成结点
 QTreeWidgetItem * liliangitem = new QTreeWidgetItem(QStringList()<<"力量");
 QTreeWidgetItem *   minjieitem = new QTreeWidgetItem(QStringList()<<"敏捷");
 QTreeWidgetItem * zhiliitem = new QTreeWidgetItem(QStringList()<<"智力");
//添加结点
//添加结点函数原型
 void addTopLevelItem(QTreeWidgetItem *item)
 void addTopLevelItems(const QList<QTreeWidgetItem *> &items)
//函数实现
 ui->treeWidget->addTopLevelItem(liliangitem);
 ui->treeWidget->addTopLevelItem(minjieitem);
 ui->treeWidget->addTopLevelItem(zhiliitem);

3. 追加子节点 以上一个结点QTreeWidgetItem为父亲，添加儿子,使用addChild函数，此函数在QTreeWidgetItem类内，是此类的一个方法。

//创建一个结点
QTreeWidgetItem * l1 = new QTreeWidgetItem(QStringList()<<"hero1");
//添加孩子函数原型
 void addChild(QTreeWidgetItem *child)
 void addChildren(const QList<QTreeWidgetItem *> &children)
 
//添加孩子函数实现
liliangitem->addChild(l1);

实现效果

表格单元部件

1. 表格单元 ，需要先设置行数和列数，使用setRowCount()和setColumnCount()设置行数和列数

//设置行数
 void setRowCount(int rows)
 //设置列数
 void setColumnCount(int columns)
 //函数实现
 ui->tableWidget->setColumnCount(3);
 ui->tableWidget->setRowCount(5);

2. 设置单元表格的表头标签 ，参数类型是QStringList类型

//设置表格单元的横向和纵向的表头便签
//设置横向的标头标签
 void setHorizontalHeaderLabels(const QStringList &labels)
//设置纵向的标头标签
 void setVerticalHeaderLabels(const QStringList &labels)
//函数实现
ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<<"性别"<<"年龄");

3. 设置表格单元内每个单元格的内容，使用函数setItem(),参数是QTableWidgetItem类的指针。

//函数原型
 void setItem(int row, int column, QTableWidgetItem *item)
//函数实现
ui->tableWidget->setItem(i,j++,new QTableWidgetItem(name[i]));
ui->tableWidget->setItem(i,j++,new QTableWidgetItem(sex.at(i)));
//int类型转成QString类型
ui->tableWidget->setItem(i,j++,new QTableWidgetItem(QString::number(i+18)));

创建QTableWidgetItem的对象需要使用它自身的构造函数，对于数字转换为QString类型，可以使用QString类型的静态函数方法number()

//函数原型
 QTableWidgetItem(const QTableWidgetItem &other)
 QTableWidgetItem(const QIcon &icon, const QString &text, int type = Type)
 QTableWidgetItem(const QString &text, int type = Type)
 QTableWidgetItem(int type = Type)

容器组件

Group Box

可以用来将单选按钮PushButton和多选按钮Checked Box形成一个组

Scroll Area

用来放置滑动的对象，构成一个滑动框

Tool Box

工具盒子，可以在每个标签下放置想放置的插件

TabWidget

选项卡部件，选中不同的选项卡下可以展示不同的内容，可以自行添加页

栈部件

可以在对应的页放置不同的内容，开发时通过左右箭头切换

在实际使用中，可以通过按钮的点击和设置栈部件的下标来进行不同栈页面的切换，栈页面的切换需要使用setCurrentIndex()函数，这个函数是一个静态函数,也可以设置栈部件的默认界面。

//函数原型
 void setCurrentIndex(int index)
 //函数实现
  ui->stackedWidget->setCurrentIndex(1);
  //栈控件的使用

  //scollArea按钮
  connect(ui->pushButton_scoll,&QPushButton::clicked,[=]()
  {
        ui->stackedWidget->setCurrentIndex(1);
  });
  //toolbox按钮
  connect(ui->pushButton_tool,&QPushButton::clicked,[=]()
  {
        ui->stackedWidget->setCurrentIndex(2);
  });
  //tabwidget按钮
  connect(ui->pushButton_tabwidget,&QPushButton::clicked,[=]()
  {
        ui->stackedWidget->setCurrentIndex(0);
  });

widget

用来放置一些部件，便于整理界面效果

Input Widget

Combo Box

下拉框列表，用来存放一些下拉框内容,添加下拉选项使用addItem()和addItems()函数

//函数原型
 void addItem(const QString &text, const QVariant &userData = QVariant())
 void addItem(const QIcon &icon, const QString &text, const QVariant &userData = QVariant())
 void addItems(const QStringList &texts)
//函数实现
ui->comboBox->addItem("奔驰");
ui->comboBox->addItem("拖拉机");

通过点击按钮，设置下拉的选项，有两种实现方法

• 方法1，设置当前下标
• 方法2，设置当前的文本内容
  这两种方法都是通过槽函数实现的

//函数原型
 void setCurrentIndex(int index)
 void setCurrentText(const QString &text)
 //函数实现
connect(ui->pushButtotuolaji,&QPushButton::clicked,[=]()
{
        //设置当前的下标
        ui->comboBox->setCurrentIndex(1);
        //设置当前文本
        ui->comboBox->setCurrentText("拖拉机");
});

Line Edit

一行文本编辑器，用来输入信息，

Text Edit

文本编辑器

Plain Text Edit

纯文本编辑器

Spin Box

整数数字微调框

Double Spin Box

浮点数数字微调框

Time Edit

时间编辑框 几时几分几秒

Date Edit

日期编辑框 几年几月几秒

Horizontal Scroll Box

水平方向的滑动条

Vertiacl Scroll Box

垂直方向的滑动条

Horizontal Slider

水平滑动块

Vertiacl Slider

数值滑动块

Label

标签，显示信息
可以设置文字信息，也可以显示图片，使用的是setPixmap()设置图像函数,setPicture()函数设置Label内容为图片。还需要使用QPixmap和QMovie的构造函数
.

//函数原型
 void setPicture(const QPicture &picture)
 void setPixmap(const QPixmap &)
//设置显示动图
 void setMovie(QMovie *movie)
//构造函数原型
//QMovie的构造函数
 QMovie(const QString &fileName, const QByteArray &format = QByteArray(), QObject *parent = nullptr)
//QPixmap的构造函数
 QPixmap(const QString &fileName, const char *format = nullptr, Qt::ImageConversionFlags flags = Qt::AutoColor)
 
//label设置显示图片
ui->label->setPixmap(QPixmap(":/Image/down.png"));

//利用QLable显示动态图片
QMovie * movie =  new QMovie(":/Image/mario.gif");
ui->label_move->setMovie(movie);
//播放动图
movie->start();