QT常用控件三

一，输入类

1.Combo Box

Combo Box的的效果就是一个下拉框，我们现在UI界面手动创建一个看看效果吧

我们先来认识一下有那些常用的属性

//添加条目，也就是下拉框内容
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)
//设置提示词，前提需要将下拉框设置为可编辑
QCompleter *completer() const
//有多少个下拉框条目
int count() const
//获取当前选中条目下标
int currentIndex() const
//获取当前选中条目文本
QString currentText() const
//释放允许设置重复下拉框内容
bool duplicatesEnabled() const
//寻找指定文本下标
int findText(const QString &text, Qt::MatchFlags flags = ...) const
//是否显示边框
bool hasFrame() const
//设置下拉框图标大小
QSize iconSize() const
//插入下拉框选项
void insertItem(int index, const QString &text, const QVariant &userData = QVariant())
void insertItem(int index, const QIcon &icon, const QString &text, const QVariant &userData = QVariant())
void insertItems(int index, const QStringList &list)
QComboBox::InsertPolicy insertPolicy() const
//在指定下标处设置分割符
void insertSeparator(int index)
//设置下拉框文本内容是否可以编辑
bool isEditable() const
//获取下拉框内容，图标/文本
QIcon itemIcon(int index) const
QString itemText(int index) const
QLineEdit *lineEdit() const
//获取设定的下拉框选项数量
int maxCount() const

常用信号

//当用户选中某个下拉框选项，不包括代码改变选项
void activated(int index)
void activated(const QString &text)
//当选项改变时触发，包括代码改变时触发
void currentIndexChanged(const QString &text)
void currentIndexChanged(int index)
//当用户修改下拉框选项内容
void editTextChanged(const QString &text)

接下来我们简单的设计点餐系统吧

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QStringList main_food = {"汉堡", "米饭", "面条"};QStringList assist_food = {"卤蛋", "烤肠", "腐竹"};QStringList drike_food = {"可乐", "雪碧", "果纸"};//添加下拉框选项ui->comboBox->addItems(main_food);ui->comboBox_2->addItems(assist_food);ui->comboBox_3->addItems(drike_food);//设置显示边框ui->comboBox->setFrame(true);ui->comboBox_2->setFrame(true);ui->comboBox_3->setFrame(true);
}
void Widget::on_pushButton_clicked()
{qDebug()<<"点单"<<ui->comboBox->currentText()<<"+"<<ui->comboBox_2->currentText()<<"+"<<ui->comboBox_3->currentText();
}

效果：

2.QSpinbox

这个控件的功能是微调框，类似于点外卖时选中点餐的数量，我们先简单看一下它的效果和关键属性

//去除文本框里面前缀和后缀不符合数字的文本内容
QString cleanText() const  
//获取设置微调框里面最大值和最小值
int maximum() const  
int minimum() const  
//获取前缀
QString prefix() const  
//设置最大值和最小值
void setMaximum(int max)  
void setMinimum(int min)  
//设置前缀
void setPrefix(const QString &prefix)  
//设置数字范围
void setRange(int minimum, int maximum) 
//设置点击按钮步长 
void setSingleStep(int val)  
//设置步长类型
void setStepType(QAbstractSpinBox::StepType stepType)  
//设置后缀
void setSuffix(const QString &suffix)  
//获取单步步长
int singleStep() const  
//设置自适应步长，类似于1，2，4，6这种，在某些场景可减少用户点击次数
QAbstractSpinBox::StepType stepType() const  
//获取后缀
QString suffix() const 
//获取当前值 
int value() const

信号：

//当微调框内的文本发生改变时触发
void textChanged(const QString &text)
//当微调框内的数值发生改变时
void valueChanged(int i)

接下来我们简单的使用一下吧

3.Date/Time edit

标题其实包括了三个控件但是很相似所有就放一起了，其实就是年月日和时分的两个控件拆分和组合，我们先看一下简单的使用

接下来我们了解一下这个大控件的属性，掌握这一个基本上都会用了

//获取控件内的日期
//QDate构造函数
//QDate(int y, int m, int d)
QDate date() const
//获取控件内的时间
//QDateTime构造函数
//QDateTime(const QDate &date, const QTime &time, const QTimeZone &timeZone)
//QDateTime(const QDate &date, const QTime &time, Qt::TimeSpec spec, int offsetSeconds)
//QDateTime(const QDate &date, const QTime &time, Qt::TimeSpec spec = Qt::LocalTime)
QDateTime dateTime() const
//获取控件里面的时分
QTime time() const
//QTime构造函数
//QTime(int h, int m, int s = 0, int ms = 0)
//展示格式
QString displayFormat() const
//最大最小时间
QDateTime minimumDateTime() const
QDateTime maximumDateTime() const
//设置时间为世界时区，还是本地时区
//TimeSpec构造函数
//本地时间，UTC时间，与UTC偏移时间差，0时区时间
//Qt::LocalTime 0 Locale dependent time (Timezones and Daylight Savings Time).
//Qt::UTC 1 Coordinated Universal Time, replaces Greenwich Mean Time.
//Qt::OffsetFromUTC 2 An offset in seconds from Coordinated Universal Time.
//Qt::TimeZone 3 A named time zone using a specific set of Daylight Savings rules.
void setTimeSpec(Qt::TimeSpec spec)

接下来我们认识一下常用信号

//当日期，时分秒，日期时分秒改变时触发的信号
void dateChanged(const QDate &date)
void dateTimeChanged(const QDateTime &datetime)
void timeChanged(const QTime &time)

接下来我们设计一个简单的预约功能

#include "widget.h"
#include "ui_widget.h"
#include<QDebug>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QDateTime nowtime = QDateTime::currentDateTime();ui->dateTimeEdit->setDateTime(nowtime);
}Widget::~Widget()
{delete ui;
}void Widget::on_dateTimeEdit_dateTimeChanged(const QDateTime &dateTime)
{QDateTime nowtime = QDateTime::currentDateTime();QDateTime settime = ui->dateTimeEdit->dateTime();if(settime<nowtime){ui->dateTimeEdit->setDateTime(nowtime);qDebug("时间不合法，预约失败");return;}QString text;if(ui->radioButton->isChecked())text=ui->radioButton->text();if(ui->radioButton_2->isChecked())text=ui->radioButton_2->text();if(ui->radioButton_3->isChecked())text=ui->radioButton_3->text();qDebug()<<"肖涵坤在"<<settime.toString("yyyy-MM-dd hh:mm:ss")<<"预约了"<<text<<"套餐";
}

4.Dial

这个控件的效果就是一个旋钮，如下图

我们来了解一下它的常用属性吧

//获取旋钮指向的数值
int value() const
//最大最小值
int maximum() const
int minimum() const
//设置初始位置
void setSliderPosition(int)
//是否能够循环转动
void setWrapping(bool on)
//刻度线是否可见
bool notchesVisible() const
//刻度线密集程度
void setNotchTarget(double target)

常用槽函数

//当值改变时触发
void valueChanged(int value)
//当范围改变时触发
void rangeChanged(int min, int max)

5.Slider

用法基本上与Dail相同，这里就介绍一下区别。区别就是，这个控件有垂直与水平区别，还可以逆转方向

//滑动条方向是否反向
void setInvertedAppearance(bool)

二，多元素控件

我们先来认识有那些多元素控件：QListWidget/QListView，QLabelWidget/QLabelView，QTreeWidget/QTreeView.

XXXWidget和XXXView有什么区别呢？

XXXView是视图和数据分离，XXXView单独使用里面是不能设置如何内容的，需要搭配Model对象使用（如QStandardItemModel）

XXXWidget则是对XXXView进行了封装，将Model和XXXView结合起来，相当于XXXWidget=XXXView+QStandardItemModel。这样子的好处是简化开发步骤和难度，但缺点功能拓展固定了

XXXWidget适合简单场景，XXXView适合复杂和自定义场景。XXXView支持多视图共享同一数据源，性能更优。

我们这里暂时只讲解XXXWidget，大家需要用到XXXView可以查阅相关文档使用

1.QListWidget

QListWidget的效果是显示一个纵向的列表，每一个选项都可以被选中如下图

接下来我们学习一下它的常用属性

//当前被选中的是第几行的下标
int currentRow() const
//有多少行
int count() const
//是否允许排序
bool isSortingEnabled() const
//是否允许换行
bool isWrapping() const
//设置元素对齐方式
void setItemAlignment(Qt::Alignment alignment)
//被选中的元素矩形是否可见
void setSelectionRectVisible(bool show)
//元素间的间隔
int spacing() const
//添加元素
void addItem(QListWidgetItem *item)
void addItems(const QStringList &labels)
//当前选中的元素
QListWidgetItem *currentItem() const
//插入元素
void insertItem(int row, QListWidgetItem *item)
void insertItem(int row, const QString &label)
void insertItems(int row, const QStringList &labels)
//获取第几行的元素
QListWidgetItem *item(int row) const
//删除第几行的元素
QListWidgetItem *takeItem(int row)

我们继续学习一下常用信号

//当前选中元素改变
void currentItemChanged(QListWidgetItem *current, QListWidgetItem *previous)
//选中行改变
void currentRowChanged(int currentRow)
//元素被点击时触发
void itemClicked(QListWidgetItem *item)
//元素被双击时触发
void itemDoubleClicked(QListWidgetItem *item)
//鼠标进入元素时触发
void itemEntered(QListWidgetItem *item)

接下来我们用这些函数写一个具备增删的QlistWidget

2.QTableWidget

QTableWidget和QListWidget的区别是，QListWidget是一个纵向的一列，而QTableWidget是一个表格,效果如下图

我们来看一下他不同于QListWidget的不同之处

//x向指定行列的单元格输入元素
void setItem(int row, int column, QTableWidgetItem *item)
//设置指定行/列的表头
void setVerticalHeaderItem(int row, QTableWidgetItem *item)
void setHorizontalHeaderItem(int column, QTableWidgetItem *item)

其他的基本上都差不多，此处就暂时跳过了

3.QTreeWidget

这个控件效果和名字一样，就是树状结构

接下来我来介绍一下与之前不同的属性方法

// 新增子节点（参数：子节点指针）
void addChild(QTreeWidgetItem *child)// 返回子节点数量
int childCount() const// 获取指定下标的子节点（返回指针）
QTreeWidgetItem* child(int index) const// 移除并返回指定下标的子节点（需手动删除）
QTreeWidgetItem* takeChild(int index)// 直接删除指定子节点（自动释放内存）
void removeChild(QTreeWidgetItem *child)// 获取父节点指针（若无返回nullptr）
QTreeWidgetItem* parent() const

三，容器类控件

1.TabWidget

这个控件的效果类似于浏览器里面的标签页，其实就是每个标签页都是一个QWidget我们先简单看看使用吧。

接下来我们认识一下它的常用属性

//添加标签页，可设置图标
int addTab(QWidget *page, const QString &label)
int addTab(QWidget *page, const QIcon &icon, const QString &label)
//设置标签页位置
void setTabPosition(QTabWidget::TabPosition)
//当前选中标签页的下标
int currentIndex() const
//设置标签页文本，图标，位置，提示信息
void setTabText(int index, const QString &label)
void setTabIcon(int index, const QIcon &icon)
void setTabPosition(QTabWidget::TabPosition)
void setTabToolTip(int index, const QString &tip)
//设置标签页是否可以关闭
void setTabsClosable(bool closeable)
//设置标签页是否可以移动
bool isMovable() const

核心属性

//标签页切换
void currentChanged(int index)
//点击标签条
void tabBarClicked(int index)
//双击标签条
void tabBarDoubleClicked(int index)
//标签页关闭
void tabCloseRequested(int index)

接下来我们简单的使用一下

2.Group Box

这个控件的效果就是创建一个带标题的分组框，很简单，如下是大致效果图

核心属性

//设置分组框标题
void setTitle(const QString &title)
//设置对齐方式
//Qt::AlignLeft 
//Qt::AlignRight 
//Qt::AlignHCenter
void setAlignment(int alignment)
//是否可以被选中
bool isCheckable() const

四，布局管理器

之前我们想要让元素出现到想要的位置，出现想要的大小，要么是手动在UI界面调整，要么在代码里面使用绝对定位，这样子既不方便，还可能不满意出错，还需要设置resizeEvent(QResizeEvent *event)来让控件大小随界面变化而变化，布局管理器就是用来解决这个问题的，当我们预设好后，布局管理器会自动计算这些帮我们调整位置大小。

1.垂直布局管理器（QVBoxLayout）

我们先学习一下核心属性

// 设置布局边距（单位：像素）
layout->setContentsMargins(20, 15, 20, 15);  // 参数顺序：左, 上, 右, 下
// 等效于：
// layout->setLeftMargin(20);    // layoutLeftMargin
// layout->setTopMargin(15);     // layoutTopMargin
// layout->setRightMargin(20);   // layoutRightMargin
// layout->setBottomMargin(15);  // layoutBottomMargin// 设置元素间距（单位：像素）
layout->setSpacing(10);  // layoutSpacing

接下来我们简单的使用一下

    ui->setupUi(this);QPushButton* button_1 = new QPushButton("按钮1");QPushButton* button_2 = new QPushButton("按钮2");QPushButton* button_3 = new QPushButton("按钮3");QVBoxLayout* vlayout = new QVBoxLayout();vlayout->addWidget(button_1);vlayout->addWidget(button_2);vlayout->addWidget(button_3);this->setLayout(vlayout);

这样子控件距离就会自动排列计算好，并且随着窗口的变化而变化，但是有一个问题一个界面可以设置几个layout，我们先看一下setlayout这个函数

void setLayout(QLayout *layout)

根据这个界面我们发现代码设置layout只能设置一个，但是我们使用一下控件创建多个layout试试

为啥我们通过ui界面就可以设置多个layout，当我们仔细观察后会发现通过ui界面设置的layout并不会随着窗口变化而变化，这是因为实际上ui界面设置layout并不是通过setlayout设置的，而且创建后通过geometry将layout放置到一个指定的位置，因此会显示多个layout，但是效果不尽如人意，得出结论一个widget只能设置一个layout。

2.水平布局管理器（QHBoxLayout）

上面的垂直布局管理器是将控件垂直排列，水平布局管理器则相反，核心属性差不多，但是接下来我介绍一个函数，使用这个函数可以更加灵活的使用布局管理器

上面我们说了一个widget只能设置一个布局管理器，但是没说布局管理器里面不能添加另一个布局管理器，接下来我们就简单使用一下。

void addLayout(QLayout *layout, int stretch = 0)

这样子我们就做到了一个widget有多个生效的layout的效果。

3.网格布局管理器（QGridlayout）

我们上面讲的是垂直和水平方向的布局管理器，现在我们要讲的是网格状的布局管理器，类似于上面两个布局管理器的结合，它的效果简单使用如下

// 1. 设置四周边距（单位：像素）
layout->setContentsMargins(leftMargin,    // layoutLeftMargintopMargin,     // layoutTopMarginrightMargin,   // layoutRightMarginbottomMargin   // layoutBottomMargin
);// 2. 设置元素间距（单位：像素）
layout->setHorizontalSpacing(horizontalSpacing);  // layoutHorizontalSpacing
layout->setVerticalSpacing(verticalSpacing);     // layoutVerticalSpacing// 3. 设置拉伸系数（适用于GridLayout）
layout->setRowStretch(row, stretchFactor);       // layoutRowStretch
layout->setColumnStretch(column, stretchFactor);  // layoutColumnStretch// 4.添加控件void addLayout(QLayout *layout, int row, int column, Qt::Alignment alignment =Qt::Alignment())
void addLayout(QLayout *layout, int row, int column, int rowSpan, int columnSpan,Qt::Alignment alignment = Qt::Alignment())
void addWidget(QWidget *widget, int row, int column, Qt::Alignment alignment =Qt::Alignment())

和之前的区别就是添加坐标，垂直水平间距可以设置。但有一个要注意的，如果两个元素直接设置了多个元素距离，但是中间没有控件，这些间距会被忽略不生效的。有一个函数使用起来比较实用，接下来我介绍并简单使用一下

//设置行列拉伸系数，0表示固定长度不参与拉伸，其他的会计算总和求比例
void setRowStretch(int row, int stretch)
void setColumnStretch(int column, int stretch)

    QPushButton* button_1 = new QPushButton("按钮1");QPushButton* button_2 = new QPushButton("按钮2");QPushButton* button_3 = new QPushButton("按钮3");QPushButton* button_4 = new QPushButton("按钮4");QPushButton* button_5 = new QPushButton("按钮5");QPushButton* button_6 = new QPushButton("按钮6");QGridLayout* gridlayout = new QGridLayout();this->setLayout(gridlayout);gridlayout->addWidget(button_1, 0 ,0);gridlayout->addWidget(button_2, 0 ,1);gridlayout->addWidget(button_3, 1 ,0);gridlayout->addWidget(button_4, 1 ,1);gridlayout->addWidget(button_5, 2 ,0);gridlayout->addWidget(button_6, 2 ,1);//第一列拉伸参数为1gridlayout->setColumnStretch(0, 1);//第二列拉伸参数为第一列的两倍gridlayout->setColumnStretch(0, 2);gridlayout->setRowStretch(0, 1);//0默认固定大小，不参与拉伸gridlayout->setRowStretch(0, 0);gridlayout->setRowStretch(0, 3);//需要设置按钮的policy为填充才能看到行与行之间的效果button_1->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button_2->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button_3->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button_4->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button_5->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);button_6->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

4.表单布局（QFormLayout）

QFormLayout属于是QGridLayout的一个分支用来处理特殊情况，QFormLayout左侧是提示，右侧是控件，可以使用场景类似于填写个人信息

//添加行元素，左侧是文本，右侧是控件
void addRow(QWidget *label, QWidget *field)
void addRow(QWidget *label, QLayout *field)
void addRow(const QString &labelText, QWidget *field)
void addRow(const QString &labelText, QLayout *field)
void addRow(QWidget *widget)
void addRow(QLayout *layout)

我们现在看一下上面这张图片的代码

    QFormLayout* formlayout = new QFormLayout();this->setLayout(formlayout);QLineEdit* lineedit_1 = new QLineEdit();QLineEdit* lineedit_2 = new QLineEdit();QLineEdit* lineedit_3 = new QLineEdit();QPushButton* pushbutton = new QPushButton();pushbutton->setText("提交");formlayout->addRow("姓名", lineedit_1);formlayout->addRow("年龄", lineedit_2);formlayout->addRow("电话", lineedit_3);formlayout->addRow(pushbutton);

5.spacer

有时候我们需要在控件之间添加空白，但是布局管理器在控件行或者列之间没有元素时时不会有效果的，我们可以通过添加空白控件实现这个效果，spacer就是空白控件，接下来我们学习一下常用的属性。

//设置空白控件大小
virtual void setGeometry(const QRect &r) override
//设置展示效果，w宽带，h长度，hPolicy水平策略，vPolicy垂直策略
// =============== 尺寸策略说明 ===============
// Ignored
//   完全忽略宽度         完全忽略高度
// Minimum
//   宽度≥minimumWidth()  高度≥minimumHeight()
// Maximum
//   宽度≤maximumWidth()  高度≤maximumHeight()
// Preferred
//   尽量接近sizeHint()宽度  尽量接近sizeHint()高度
// Expanding
//   优先扩展占用多余空间    优先扩展占用多余空间
// MinimumExpanding
//   保证最小宽度后扩展（替代Shrinking） 同左
void changeSize(int w, int h, QSizePolicy::Policy hPolicy = QSizePolicy::Minimum, QSizePolicy::Policy vPolicy = QSizePolicy::Minimum)

接下来我们简单的使用一下。

    QSpacerItem* spacer= new QSpacerItem(200, 20);QHBoxLayout* hlayout = new QHBoxLayout();this->setLayout(hlayout);QPushButton* button_1 = new QPushButton("按钮1");QPushButton* button_2 = new QPushButton("按钮2");hlayout->addWidget(button_1);//注意添加空白控件需要使用下面这个函数
// ===================== 布局方法说明 =====================
// 方法         参数类型       用途                         适用场景
// ------------------------------------------------------
// addWidget()  QWidget*      直接添加可视化控件到布局       添加普通控件（QPushButton/QLabel等）
// addItem()    QLayoutItem*  添加抽象布局项                需要动态管理布局项或添加非控件元素时hlayout->addItem(spacer);hlayout->addWidget(button_2);

效果：

欧克，常用控件这一块我们就暂时结束了，大家如果有用到其他控件可以查阅文档，或者借助AI定向学习即可，下次见。