＜3＞, 常用控件

目录

一、控件概述

二、QWidget 核心属性

1， 核心属性列表

2，enabled

3，geometry

4，windowTitle

5，windowIcon

6，windowOpacity

7，font

8，toolTip

9，focusPolicy

10，styleSheet

三、按钮类控件

1，QPushButton

2，Radio Buttion

3，Check Box

四、显示类控件

1，Label

2，LCD Number

3，ProgressBar

4，Calendar Widget

五、输入类控件

1，Line Edit

2，Text Edit

3，Combo Box

4，SpinBox

5，Date Edit & Time Edit

6，Dial

7，Slider

六、多元素控件

1，QListWidget

2，QTableWidget

3，QTreeWidget

七、容器类控件

1，Group Box

2，Tab Widget

八、布局管理器

1，垂直布局

2，水平布局

3，网格布局

4，表单布局

5，Spacer

---

一、控件概述

Widget是Qt中的核心概念，意思是“控件”，控件是构成图形化界面的基本要素。

像下图中的, 按钮, 列表视图, 树形视图, 单行输入框, 多行输入框, 滚动条, 下拉框,等待，都可以称为“控件”。

Qt 作为⼀个成熟的 GUI 开发框架, 内置了大量的常用控件. 这一点在 Qt Designer 中就可以看到端倪。并且 Qt 也提供了 "自定义控件" 的能力, 可以让程序猿在现有控件不能满足需求的时候, 对现有控件做出扩展, 或者手搓出新的控件。

控件是GUI开发中的通用概念，不仅局限在于Qt中。

控件体系的发展阶段：

第一阶段：

完全没有控件，此时需要通过一些绘图API手动的绘制出按钮或者输入框等内容，代码编写繁琐，例如文曲星LAVA平台开发。

第二阶段：

只包含粗略的控件，只提供了按钮、输入框、单选框、复选框等最常用的控件，例如html的原生控件。

第三阶段：

更完整的控件体系，基本可以覆盖到GUI开发中的大部分场景，例如早期的MFC、VB、C++Builder、Qt、Delph，到后来的Android SDK，Java FX、前端各种UI库等等。

二、QWidget 核心属性

1， 核心属性列表

属性	作用
enabled	设置控件是否可使用. true 表示可用 false 表示禁用.
geometry	位置和尺寸. 包含 x, y, width, height 四个部分. 其中坐标是以父元素为参考进行设置的.
windowTitle	设置 widget 标题
windowIcon	设置 widget 图标
windowOpacity	设置 widget 透明度
cursor	鼠标悬停时显示的图标形状. 是普通箭头, 还是沙漏, 还是十字等形状. 在 Qt Designer 界面中可以清楚看到可选项.
font	字体相关属性. 涉及到字体家族, 字体大小, 粗体, 斜体, 下划线等等样式
toolTip	鼠标悬停在 widget 上会在状态栏中显示的提示信息.
toolTipDuring	toolTip 显示的持续时间.
statusTip	Widget 状态发⽣改变时显⽰的提⽰信息(⽐如按钮被按下等).
whatsThis	鼠标悬停并按下 alt+F1 时, 显示的帮助信息(显示在一个弹出的窗口中).
styleSheet	允许使用 CSS 来设置 widget 中的样式. Qt 中支持的样式非常丰富, 对于前端开发人员上手是非常友好的.
focusPolicy	该 widget 如何获取到焦点.
contextMenuPolicy	上下文菜单的显示策略. Qt::DefaultContextMenu：默认的上下文菜单策略 ，用户可以通过鼠标右键或键盘快捷键触发上下文菜单。 Qt::NoContextMenu：禁用上下文菜单 ，即使用户点击鼠标右键也不会显示菜单。 Qt::PreventContextMenu：防止控件显示上下文菜单 ，即使用户点击鼠标右键也不会显示菜单。 Qt::ActionsContextMenu：将上下文菜单替换为控件的“动作”菜单 ，用户可以通 过鼠标右键或键盘快捷键触发这个菜单。 Qt::CustomContextMenu：使用自定义的上下文菜单 ，用户可以通过鼠标右键或键 盘快捷键触发这个菜单。
locale	设置语言和国家地区.
acceptDrops	该部件是否接受拖放操作。 如果设置为true ，那么该部件就可以接收来自其他部件的拖放操作。 当一个部件被拖放 到该部件上时 ，该部件会接收到相应的拖放事件（如dropEvent）。 如果设置为false ，那么该部件将不会接收任何拖放操作。
minimumSize	控件的最小尺寸 . 包含最小宽度和最小高度.
maximumSize	控件的最大尺寸 . 包含最大宽度和最大高度.
sizePolicy	尺寸策略. 设置控件在布局管理器中的缩放方式.
windowModality	指定窗口是否具有 "模态" 行为.
sizeIncrement	拖动窗口大小时的增量单位.
baseSize	窗口的基础大小, 用来搭配 sizeIncrement 调整组件尺寸是计算组件应该调整到的合适 的值.
palette	调色板. 可以设置 widget 的颜色风格.
mouseTracking	是否要跟踪鼠标移动事件. 如果设为 true, 表示需要跟踪, 则鼠标划过的时候该 widget 就能持续收到鼠标移动事件. 如果设为 false, 表示不需要跟踪, 则鼠标划过的时候 widget 不会收到鼠标移动事件, 只 能收到鼠标按下或者释放的事件.
tabletTracking	是否跟踪触摸屏的移动事件. 类似于 mouseTracking . Qt 5.9 中引入的新属性.
layoutDirection	布局方向. Qt::LeftToRight：文本从左到右排列 ，也是默认值。 Qt::RightToLeft：文本从右到左排列。 Qt::GlobalAtomics：部件的布局方向由全局原子性决定(PS 这个翻译其实有点尴 尬. 其实就是根据应用程序中的其他 widget 布局方向确定的)。
autoFillBackground	是否自动填充背景颜色.
windowFilePath	能够把 widget 和一个本地文件路径关联起来. PS: 其实作用不大.
accessibleName	设置 widget 的可访问名称. 这个名称可以被辅助技术 (像屏幕阅读器) 获取到. 这个属性用于实现无障碍程序的场景中 (也就是给盲人写的程序).
accessibleDescripti on	设置 widget 的详细描述. 作用同 accessibleName
inputMethodHints	针对输入框有效, 用来提示用戶当前能输入的合法数据的格式. 比如只能输入数字, 只能 输入日期等.

2，enabled

API	说明
windowIcon()	获取到控件的窗口图标. 返回 QIcon 对象.
setWindowIcon(const QIcon& icon)	设置控件的窗口图标.

示例

#include <QPushButton>test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);QPushButton* btn = new QPushButton(this);btn->setText("这是个被禁用的按钮 ");btn->setEnabled(false);
}

3，geometry

API	说明
geometry()	获取到控件的位置和尺寸. 返回结果是一个 QRect, 包含了 x, y, width, height. 其中 x, y 是左上角的坐标.
setGeometry(QRect) setGeometry(int x, int y, int width, intheight)	设置控件的位置和尺寸. 可以直接设置一个 QRect, 也可以分四个属性单独设置.

示例

void test::on_up_clicked()
{QRect rect = ui->pushButton->geometry();ui->pushButton->setGeometry(rect.x(),rect.y()-5,rect.width(),rect.height());qDebug() << rect;
}void test::on_down_clicked()
{QRect rect = ui->pushButton->geometry();ui->pushButton->setGeometry(rect.x(),rect.y()+5,rect.width(),rect.height());qDebug() << rect;
}void test::on_left_clicked()
{QRect rect = ui->pushButton->geometry();ui->pushButton->setGeometry(rect.x()-5,rect.y(),rect.width(),rect.height());qDebug() << rect;
}void test::on_right_clicked()
{QRect rect = ui->pushButton->geometry();ui->pushButton->setGeometry(rect.x()+5,rect.y(),rect.width(),rect.height());qDebug() << rect;
}

4，windowTitle

API	说明
windowTitle()	获取到控件的窗口标题.
setWindowTitle(const QString& title)	设置控件的窗口标题.

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);this->setWindowTitle("666");
}

5，windowIcon

API	说明
windowIcon()	获取到控件的窗口图标. 返回 QIcon 对象
setWindowIcon(const QIcon& icon)	设置控件的窗口图标.

示例

#include <QIcon>test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);QIcon icon(":/rose.png");this->setWindowIcon(icon);
}

6，windowOpacity

API	说明
windowOpacity()	获取到控件的不透明数值. 返回 float, 取值为 0.0-> 1.0 其中 0.0 表示全透明, 1.0 表示 完全不透明.
setWindowOpacity(float n)	设置控件的不透明数值.

示例

void test::on_add_clicked()
{this->setWindowOpacity(this->windowOpacity() - 0.1);
}
void test::on_sub_clicked()
{this->setWindowOpacity(this->windowOpacity() + 0.1);
}

7，font

API	说明
setToolTip	设置 toolTip. 鼠标悬停在该 widget 上时会有提示说明.
setToolTipDuring	设置 toolTip 提示的时间. 单位 ms. 时间到后 toolTip 自动消失.

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);// 设置 label 的⽂本内容ui->label->setText("这是一段文本");// 创建字体对象QFont font;// 设置字体家族font.setFamily("仿宋");// 设置字体大小font.setPointSize(20);// 设置字体加粗font.setBold(true);// 设置字体倾斜font.setItalic(true);// 设置字体下划线font.setUnderline(true);// 设置字体删除线font.setStrikeOut(true);// 设置字体对象到 label 上ui->label->setFont(font);
}

8，toolTip

API	说明
setToolTip	设置 toolTip. 鼠标悬停在该 widget 上时会有提示说明.
setToolTipDuring	设置 toolTip 提示的时间. 单位 ms. 时间到后 toolTip 自动消失.

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);    ui->add->setToolTip("这是+按钮");ui->add->setToolTipDuration(1000);ui->sub->setToolTip("这是-按钮");ui->add->setToolTipDuration(3000);
}

9，focusPolicy

API	说明
focusPolicy()	获取该 widget 的 focusPolicy, 返回 Qt::FocusPolicy
setFocusPolicy(Qt::FocusPolicy policy)	设置 widget 的 focusPolicy.

类型说明

Qt::FocusPolicy 是⼀个枚举类型. 取值如下

Qt::NoFocus ：控件不会接收键盘焦点

Qt::TabFocus ：控件可以通过Tab键接收焦点

Qt::ClickFocus ：控件在⿏标点击时接收焦点

Qt::StrongFocus ：控件可以通过Tab键和⿏标点击接收焦点 (默认值)

Qt::WheelFocus : 类似于 Qt::StrongFocus , 同时控件也通过⿏标滚轮获取到焦点 (新增的选项, ⼀般很少使⽤).

10，styleSheet

CSS (Cascading StyleSheets 层叠样式表) 本身属于网页前端技术. 主要就是用来描述界面的 样式.

所谓 "样式", 包括不限于 大小, 位置, 颜色, 间距, 字体, 背景, 边框等.

我们平时看到的丰富多彩的网页, 就都会用到大量的 CSS.

Qt 虽然是做 GUI 开发, 但实际上和 网页前端 有很多异曲同工之处. 因此 Qt 也引入了对于 CSS 的支持.

CSS 中可以设置的样式属性非常多. 基于这些属性 Qt 只能支持其中一部分, 称为 QSS (Qt StyleSheet) . 具体的支持情况可以参考 Qt 文档中 "Qt StyleSheets Reference" 章节.

示例

void test::on_sun_clicked()
{this->setStyleSheet("background-color: #FFF");
}
void test::on_night_clicked()
{this->setStyleSheet("background-color: #333");
}

三、按钮类控件

1，QPushButton

属性	说明
text	按钮中的文本
icon	按钮中的图标
iconSize	按钮中图标的尺寸
shortCut	按钮对应的快捷键
autoRepeat	按钮是否会重复触发. 当鼠标左键按住不放时, 如果设为 true, 则会持续产生鼠标点击事件; 如果设为 false, 则必须释放鼠标, 再次按下鼠标时才能产生点击事件. (相当于游戏手柄上的 "连发" 效果)
autoRepeatDelay	重复触发的延时时间. 按住按钮多久之后, 开始重复触发.
autoRepeatInterval	重复触发的周期.

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);    // 设置这些按钮的图标ui->pushButton->setIcon(QIcon(":/doge.png"));ui->pushButton->setIconSize(QSize(100,100));ui->up->setShortcut(QKeySequence(Qt::Key_W));ui->down->setShortcut(QKeySequence(Qt::Key_S));ui->left->setShortcut(QKeySequence(Qt::Key_A));ui->right->setShortcut(QKeySequence(Qt::Key_D));ui->up->setAutoRepeat(true);ui->down->setAutoRepeat(true);ui->left->setAutoRepeat(true);ui->right->setAutoRepeat(true);
}test::~test()
{delete ui;
}void test::on_up_clicked()
{QRect rect = ui->pushButton->geometry();ui->pushButton->setGeometry(rect.x(),rect.y()-10,rect.width(),rect.height());
}void test::on_down_clicked()
{QRect rect = ui->pushButton->geometry();ui->pushButton->setGeometry(rect.x(),rect.y()+10,rect.width(),rect.height());
}void test::on_left_clicked()
{QRect rect = ui->pushButton->geometry();ui->pushButton->setGeometry(rect.x()-10,rect.y(),rect.width(),rect.height());
}void test::on_right_clicked()
{QRect rect = ui->pushButton->geometry();ui->pushButton->setGeometry(rect.x()+10,rect.y(),rect.width(),rect.height());
}

2，Radio Buttion

Radio Buttion是单选按钮. 可以让我们在多个选项中选择一个

属性	说明
checkable	是否能选中
checked	是否已经被选中. checkable 是 checked 的前提条件.
autoExclusive	是否排他. 选中一个按钮之后是否会取消其他按钮的选中. 对于 QRadioButton 来说默认就是排他的.

示例1

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);    // 设置默认选中该按钮ui->man->setChecked(true);ui->label->setText("默认的性别为: 男");// 禁 other 选项,虽然不会被选中, 但是可以触发点击事件ui->other->setCheckable(false);// 禁 other 选项,此时该按钮无法被选中, 不响应任何输入ui->other->setEnabled(false);
}test::~test()
{delete ui;
}void test::on_man_clicked()
{ui->label->setText("你选择的性别为：男");
}void test::on_woman_clicked()
{ui->label->setText("你选择的性别为：女");
}void test::on_other_clicked()
{ui->label->setText("你选择的性别为：其他");
}

示例2

#include <QButtonGroup>test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);    // 给radioButton分组QButtonGroup* group1 = new QButtonGroup(this);QButtonGroup* group2 = new QButtonGroup(this);group1->addButton(ui->radioButton);group1->addButton(ui->radioButton_2);group1->addButton(ui->radioButton_3);group2->addButton(ui->radioButton_4);group2->addButton(ui->radioButton_5);group2->addButton(ui->radioButton_6);
}

示例3

void test::on_radioButton_clicked(bool checked)
{// checked 表示当前radioButton是否选中状态，true为选中，false为不选中qDebug() << "clicked: " << checked;
}void test::on_radioButton_2_pressed()
{qDebug() << "pressed";
}void test::on_radioButton_3_released()
{qDebug() << "released";
}void test::on_radioButton_4_toggled(bool checked)
{// checked的状态改变就会触发这个信号qDebug() << "toggled: " << checked;}

3，Check Box

Check Box表示复选按钮. 可以允许选中多个.

示例

void test::on_pushButton_clicked()
{QString result = "今天你的安排是：";if(ui->eat->isChecked()){result += ui->eat->text();}if(ui->sleep->isChecked()){result += ui->sleep->text();}if(ui->play->isChecked()){result += ui->play->text();}ui->label->setText(result);
}

四、显示类控件

1，Label

属性	说明
text	QLabel 中的文本
textFormat	文本的格式. Qt::PlainText 纯文本 Qt::RichText 富文本(支持 html 标签) Qt::MarkdownText markdown 格式 Qt::AutoText 根据文本内容自动决定文本格式.
pixmap	QLabel 内部包含的图片
scaledContents	设为 true 表示内容自动拉伸填充QLabel 设为 false 则不会自动拉伸
alignment	对齐方式. 可以设置水平和垂直方向如何对齐.
wordWrap	设为 true 内部的文本会自动换行. 设为 false 则内部文本不会自动换行.
indent	设置文本缩进. 水平和垂直方向都生效.
margin	内部文本和边框之间的边距. 不同于于 indent, 但是是上下左右四个方向都同时有效. 而 indent 最多只是两个方向有效(具体哪两个方向有效取决于 alignment )
openExternalLinks	是否允许打开一个外部的链接. (当 QLabel 文本内容包含 url 的时候涉及到)
buddy	QLabel中的文本，可以设置为 "快捷键 &A" 这样的形式， 其中 & 后⾯跟着的字符, 就是快捷键， 可以通过 alt + A 的⽅式来触发该快捷键 给 QLabel 关联一个 "伙伴" , 这样点击 QLabel 时就能激活对应的伙伴. 例如伙伴如果是一个 QCheckBox, 那么该 QCheckBox 就会被选中.

示例1

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);// 先把QLabel设置到窗口一样大// 并且把QLabel左上角设置到窗口的左上角QRect rect = this->geometry();ui->label->setGeometry(0,0,rect.width(),rect.height());// 设置图片ui->label->setPixmap(QPixmap(":/huaji.png"));// 让图片铺满整个QLabel窗口ui->label->setScaledContents(true);
}void test::resizeEvent(QResizeEvent *event)
{// 随着鼠标拖动窗口，改变图片大小qDebug()<<event->size();ui->label->setGeometry(0,0,event->size().width(),event->size().height());
}

示例2

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);// 设置对齐方式ui->label->setText("这是一段文本");ui->label->setAlignment(Qt::AlignRight | Qt::AlignTop);// 设置自动换行ui->label_2->setText("这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 ");ui->label_2->setWordWrap(true);// 设置缩进ui->label_3->setText("这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 这是一段很长的文本 ");ui->label_3->setWordWrap(true);ui->label_3->setIndent(50);// 设置边距ui->label_4->setText("这是一段文本");ui->label_4->setMargin(30);
}

示例3

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);// 设置 label 的伙伴 widgetui->label->setBuddy(ui->radioButton);ui->label_2->setBuddy(ui->radioButton_2);
}

2，LCD Number

属性	说明
intValue	QLCDNumber：显示的数字值(int).
value	QLCDNumber：显示的数字值(double). 和 intValue 是联动的. 例如给 value 设为 1.5, intValue 的值就是 2. 另外, 设置 value 和 intValue 的方法名字为 者 setIntValue .
digitCount	显示几位数字.
mode	数字显示形式. 1. QLCDNumber::Dec ：十进制模式 ，显示常规的十进制数字。 2. QLCDNumber::Hex ：十六进制模式 ，以十六进制格式显示数字。 3. QLCDNumber::Bin ：二进制模式 ，以二进制格式显示数字。 4. QLCDNumber::Oct ：八进制模式 ，以八进制格式显示数字。 只有十进制的时候才能显示小数点后的内容.
segmentStyle	设置显示风格. 1. QLCDNumber::Flat ：平面的显示风格 ，数字呈现在一个平坦的表面上。 2. QLCDNumber::Outline ：轮廓显示风格 ，数字具有清晰的轮廓和阴影效果。 3. QLCDNumber::Filled ：填充显示风格 ，数字被填充颜色并与背景区分开。
smallDecimalPoint	设置比较小的小数点.

示例1

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);//设置初始值ui->lcdNumber->display("10");// 创建一个QTimer实例timer = new QTimer(this);// 把QTimer的timeout信号和咱们自己的槽函数进行链接connect(timer,&QTimer::timeout,this,&test::handle);// 启动定时器，参数是触发timerout的周期，单位是毫秒timer->start(1000);
}test::~test()
{delete ui;
}void test::handle()
{// 先拿到LCDNumber中的数字int value = ui->lcdNumber->intValue();if(value <= 0){// 数字减到0了，停止定时器timer->stop();return;}ui->lcdNumber->display(value - 1);
}

3，ProgressBar

属性	说明
minimum	进度条最⼩值
maximum	进度条最大值
value	进度条当前值
alignment	⽂本在进度条中的对齐⽅式. . Qt::AlignLeft : 左对齐 . Qt::AlignRight : 右对齐 . Qt::AlignCenter : 居中对齐 . Qt::AlignJustify : 两端对齐
textVisible	进度条的数字是否可见.
orientation	进度条的方向是水平还是垂直
invertAppearance	是否是朝反方向增长进度
textDirection	文本的朝向.
format	展示的数字格式. . %p ：表示进度的百分比（0-100） . %v ：表示进度的数值（0-100） . %m ：表示剩余时间（ 以毫秒为单位） . %t ：表示总时间（ 以毫秒为单位）

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);// 创建一个QTimer实例timer = new QTimer(this);// 把QTimer的timeout信号和咱们自己的槽函数进行链接connect(timer,&QTimer::timeout,this,&test::handle);// 启动定时器，参数是触发timerout的周期，单位是毫秒timer->start(100);
}test::~test()
{delete ui;
}void test::handle()
{// 先拿到LCDNumber中的数字int value = ui->progressBar->value();if(value >= 100){// 进度条满了，停止定时器timer->stop();return;}ui->progressBar->setValue(value + 1);
}

4，Calendar Widget

属性	说明
selectDate	当前选中的日期
minimumDate	最小日期
maximumDate	最大日期
firstDayOfWeek	每周的第—天(也就是日历的第—列) 是周几.
gridVisible	是否显示表格的边框
selectionMode	是否允许选择日期
navigationBarVisible	日历上方标题是否显示
horizontalHeaderFormat	日历上方标题显示的日期格式
verticalHeaderFormat	日历第—列显示的内容格式
dateEditEnabled	是否允许日期被编辑

void test::on_calendarWidget_selectionChanged()
{QDate date = ui->calendarWidget->selectedDate();qDebug()<<date;ui->label->setText(date.toString());
}

五、输入类控件

1，Line Edit

属性	说明
text	输入框中的文本
inputMask	输入内容格式约束
maxLength	最大长度
frame	是否添加边框
echoMode	显示方式. QLineEdit::Normal ：这是默认值 ，文本框会显示输入的文本。 QLineEdit::Password ：在这种模式下 ，输入的字符会被隐藏， 通常用星号（*） 或等号（=）代替。 QLineEdit::NoEcho ：在这种模式下 ，文本框不会显示任何输入 的字符。
cursorPosition	光标所在位置
alignment	文字对齐方式, 设置水平和垂直方向的对齐.
dragEnabled	是否允许拖拽
readOnly	是否是只读的(不允许修改)
placeHolderText	当输入框内容为空的时候, 显示什么样的提示信息
clearButtonEnabled	是否会自动显示出 "清除按钮" .

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);ui->lineEdit_name->setPlaceholderText("输入姓名");ui->lineEdit_name->setClearButtonEnabled(true);ui->lineEdit_password->setEchoMode(QLineEdit::Password);ui->lineEdit_password->setPlaceholderText("输入密码");ui->lineEdit_password->setClearButtonEnabled(true);ui->lineEdit_password->setEchoMode(QLineEdit::Password);ui->lineEdit_phone->setPlaceholderText("输入号码");ui->lineEdit_phone->setClearButtonEnabled(true);ui->lineEdit_phone->setInputMask("000-0000-0000");
}test::~test()
{delete ui;
}void test::on_pushButton_submit_clicked()
{QString gender = ui->radioButton->isChecked() ? "男" : "女";qDebug()<<"姓名"<<ui->lineEdit_name->text()<<"密码"<<ui->lineEdit_password->text()<<"性别"<<gender<<"电话"<<ui->lineEdit_phone->text();
}

2，Text Edit

属性	说明
markdown	输入框内持有的内容. 支持 markdown 格式. 能够自动的对markdown 文本进行 渲染成 html.
html	输入框内持有的内容. 可以支持大部分 html 标签. 包括 img 和 table 等.
placeHolderText	输入框为空时提示的内容.
readOnly	是否是只读的
undoRedoEnable	是否开启 undo / redo 功能. 按下 ctrl + z 触发 undo 按下 ctrl + y 触发 redo
autoFormating	开启自动格式化.
tabstopWidth	按下缩进占多少空间
overwriteMode	是否开启覆盖写模式
acceptRichText	是否接收富文本内容
verticalScrollBarPolicy	垂直方向滚动条的出现策略 Qt::ScrollBarAsNeeded : 根据内容自动决定是否需要滚动条。这是默认值。 Qt::ScrollBarAlwaysOff : 总是关闭滚动条。 Qt::ScrollBarAlwaysOn : 总是显示滚动条。
horizontalScrollBarPolicy	水平方向滚动条的出现策略 Qt::ScrollBarAsNeeded : 根据内容自动决定是否需要滚动条。这是默认值。 Qt::ScrollBarAlwaysOff : 总是关闭滚动条。 Qt::ScrollBarAlwaysOn : 总是显示滚动条。
信号	说明
textChanged()	文本内容改变时触发
selectionChanged()	选中范围改变时触发
cursorPositionChanged()	光标移动时触发
undoAvailable(bool)	可以进行 undo 操作时触发
redoAvailable(bool)	可以进行 redo 操作时触发
copyAvaiable(bool)	文本被选中/取消选中时触发

示例

void test::on_textEdit_textChanged()
{// 获取到多行输入框直接的内容const QString& text = ui->textEdit->toPlainText();ui->label->setText(text);qDebug() << "[textChanged] " << ui->textEdit->toPlainText();
}
void test::on_textEdit_selectionChanged()
{const QTextCursor& cursor = ui->textEdit->textCursor();qDebug() << "[selectionChanged] " << cursor.selectedText();
}
void test::on_textEdit_cursorPositionChanged()
{const QTextCursor& cursor = ui->textEdit->textCursor();qDebug() << "[cursorPositionChanged] " << cursor.position();
}
void test::on_textEdit_undoAvailable(bool b)
{qDebug() << "[undoAvailable] " << b;
}
void test::on_textEdit_redoAvailable(bool b)
{qDebug() << "[redoAvailable] " << b;
}
void test::on_textEdit_copyAvailable(bool b)
{qDebug() << "[copyAvailable] " << b;
}

3，Combo Box

属性	说明
currentText	当前选中的文本
currentIndex	当前选中的条目下标. 从 0 开始计算. 如果当前没有条目被选中, 值为 -1
editable	是否允许修改 设为 true 时, QComboBox 的行为就非常接近 QLineEdit , 也可以设置 validator
iconSize	下拉框图标 (小三角) 的大小
maxCount	最多允许有多少个条目

核心方法

方法	说明
addItem(const QString&)	添加一个条目
currentIndex()	获取当前条目的下标 从 0 开始计算. 如果当前没有条目被选中, 值为 -1
currentText()	获取当前条目的文本内容.

核心信号

信号	说明
activated(int) activated(const QString & text)	当用户选择了一个选项时发出. 这个时候相当于用户点开下拉框, 并且鼠标划过某个选项. 此时还没有确认做出选择.
currentIndexChanged(int) currentIndexChanged(const QString & text)	当前选项改变时发出. 此时用户已经明确的选择了一个选项. 用户操作或者通过程序操作都会触发这个信号.
editTextChanged(const QString & text)	当编辑框中的文本改变时发出 (editable 为 true 时有效)

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);ui->comboBox->addItem("麦辣鸡腿堡");ui->comboBox->addItem("巨无霸");ui->comboBox->addItem("培根双层牛堡");ui->comboBox_2->addItem("中薯条");ui->comboBox_2->addItem("麦乐鸡块");ui->comboBox_2->addItem("麦辣鸡翅");ui->comboBox_3->addItem("可乐");ui->comboBox_3->addItem("雪碧");
}test::~test()
{delete ui;
}void test::on_pushButton_clicked()
{qDebug() << ui->comboBox->currentText() << "," << ui->comboBox_2->currentText() << "," << ui->comboBox_3->currentText();
}

4，SpinBox

属性	说明
value	存储的数值.
singleStep	每次调整的 "步长". 按下一次按钮数据变化多少.
displayInteger	数字的进制. 例如 displayInteger 设为 10, 则是按照 10 进制表示. 设为 2 则为 2 进制表示.
minimum	最小值
maximum	最大值
suffix	后缀
prefix	前缀
wrapping	是否允许换行
frame	是否带边框
alignment	文字对齐方式.
readOnly	是否允许修改
buttonSymbol	按钮上的图标. UpDownArrows 上下箭头形式 PlusMinus 加减号形式 NoButtons 没有按钮
accelerated (加速的)	按下按钮时是否为快速调整模式
correctionMode	输入有误时如何修正. QAbstractSpinBox::CorrectToPreviousValue : 如果用户输入了一个 无效的值（例如 ，在只能显示正整数的SpinBox中输入了负数）， 那么 SpinBox会恢复为上一个有效值。例如 ，如果SpinBox的初始值是1 ，用户 输入了-1（无效）， 然后SpinBox会恢复为1。 QAbstractSpinBox::CorrectToNearestValue : 如果用户输入了一个 无效的值 ，SpinBox会恢复为最接近的有效值。例如 ，如果SpinBox的初始 值是1 ，用户输入了-1（无效）， 那么SpinBox会恢复为0。
keyboardTrack	是否开启键盘跟踪. 设为 true, 每次在输入框输入一个数字, 都会触发一次 valueChanged() 和 textChanged() 信号. 设为 false, 只有在最终按下 enter 或者输入框失去焦点, 才会触发 valueChanged() 和 textChanged() 信号.
accelerated (加速的)	按下按钮时是否为快速调整模式
correctionMode	输入有误时如何修正. . QAbstractSpinBox::CorrectToPreviousValue : 如果用户输入了一个 无效的值（例如 ，在只能显示正整数的SpinBox中输入了负数）， 那么 SpinBox会恢复为上一个有效值。例如 ，如果SpinBox的初始值是1 ，用户 输入了-1（无效）， 然后SpinBox会恢复为1。 . QAbstractSpinBox::CorrectToNearestValue : 如果用户输入了一个 无效的值 ，SpinBox会恢复为最接近的有效值。例如 ，如果SpinBox的初始 值是1 ，用户输入了-1（无效）， 那么SpinBox会恢复为0。
keyboardTrack	是否开启键盘跟踪. 设为 true, 每次在输入框输入一个数字, 都会触发一次 valueChanged() 和 textChanged() 信号. 设为 false, 只有在最终按下 enter 或者输入框失去焦点, 才会触发 valueChanged() 和 textChanged() 信号.

核心信号

信号	说明
textChanged(QString)	微调框的文本发生改变时会触发. 参数 QString 带有 前缀 和 后缀.
valueChanged(int)	微调框的文本发生改变时会触发. 参数 int, 表示当前的数值.

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);ui->comboBox->addItem("麦辣鸡腿堡");ui->comboBox->addItem("巨无霸");ui->comboBox->addItem("培根双层牛堡");ui->comboBox_2->addItem("中薯条");ui->comboBox_2->addItem("麦乐鸡块");ui->comboBox_2->addItem("麦辣鸡翅");ui->comboBox_3->addItem("可乐");ui->comboBox_3->addItem("雪碧");// 针对 QStringBox 的范围进行设置ui->spinBox->setRange(1,5);ui->spinBox_2->setRange(1,5);ui->spinBox_3->setRange(1,5);ui->spinBox->setValue(1);ui->spinBox_2->setValue(1);ui->spinBox_3->setValue(1);
}test::~test()
{delete ui;
}void test::on_pushButton_clicked()
{qDebug() << ui->comboBox->currentText()<< ui->spinBox->value()<< ui->comboBox_2->currentText()<< ui->spinBox_2->value()<< ui->comboBox_3->currentText()<< ui->spinBox_3->value();
}

5，Date Edit & Time Edit

属性	说明
dateTime	时间日期的值. 形如 2000/1/1 0:00:00
date	单纯日期的值. 形如 2001/1/1
time	单纯时间的值. 形如 0:00:00
displayFormat	时间日期格式. 形如 yyyy/M/d H:mm . y 表示年份 . M 表示月份 . d 表示日期 . H 表示小时 . m 表示分钟 . s 表示秒 注意: 这里的格式化符号的含义, 不要记忆. 不同语言/库的设定规则 是存在差异的. 一定是用的时候再去查.
minimumDateTime	最小时间日期
maximumDateTime	最大时间日期
timeSpec	. Qt::LocalTime ：显示本地时间。 . Qt::UTC ：显示协调世界时（ UTC）。 . Qt::OffsetFromUTC ：显示相对于UTC的偏移量(时差).

示例

void test::on_pushButton_clicked()
{QDateTime timeOld = ui->dateTimeEdit->dateTime();QDateTime timeNew = ui->dateTimeEdit_2->dateTime();int days = timeOld.daysTo(timeNew);int seconds = timeOld.secsTo(timeNew);int hours = (seconds/3600) % 24;ui->label->setText(QString("爱你以及持续了") + QString::number(days)+ QString(" 天零 ") +  QString::number(hours)+ QString("小时"));
}

6，Dial

核心属性

属性	说明
value	持有的数值.
minimum	最小值
maximum	最大值
singleStep	按下方向键的时候改变的步长.
pageStep	按下 pageUp / pageDown 的时候改变的步长.
sliderPosition	界面上旋钮显示的初始位置
tracking	外观是否会跟踪数值变化. 默认值为 true. 一般不需要修改.
wrapping	是否允许循环调整. 即数值如果超过最大值, 是否允许回到最小值. (调整过程能否 "套圈")
notchesVisible	是否显示刻度线
notchTarget	刻度线之间的相对位置. 数字越大, 刻度线越稀疏.

核心信号

属性	说明
valueChanged(int)	数值改变时触发
rangeChanged(int, int)	范围变化时触发

7，Slider

核心属性

属性	说明
value	持有的数值.
minimum	最小值
maximum	最大值
singleStep	按下方向键的时候改变的步长.
pageStep	按下 pageUp / pageDown 的时候改变的步长.
sliderPosition	滑动条显示的初始位置
tracking	外观是否会跟踪数值变化. 默认值为 true. 一般不需要修改.
orientation	滑动条的方向是水平还是垂直
invertedAppearance	是否要翻转滑动条的方向
tickPosition	刻度的位置.
tickInterval	刻度的密集程度.

核心信号

属性	说明
valueChanged(int)	数值改变时触发
rangeChanged(int, int)	范围变化时触发

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);// 使用快捷键，需要用到QShortCut类// 需要两个快捷键，-进行减少，=进行增加（=和+是一个按钮）QShortcut* shortCut1 = new QShortcut(this);shortCut1->setKey(QKeySequence("-"));QShortcut* shortCut2 = new QShortcut(this);shortCut2->setKey(QKeySequence("="));// 使用信号槽，感知到快捷键被按下connect(shortCut1, &QShortcut::activated, this, &test::sunValue);connect(shortCut1, &QShortcut::activated, this, &test::addValue);    
}test::~test()
{delete ui;
}void test::sunValue()
{// 获取到当前的值int value = ui->horizontalSlider->value();if (value <= ui->horizontalSlider->minimum()){return;}ui->horizontalSlider->setValue(value - 5);
}void test::addValue()
{// 获取到当前的值int value = ui->horizontalSlider->value();if (value <= ui->horizontalSlider->minimum()){return;}ui->horizontalSlider->setValue(value - 5);
}void test::on_horizontalSlider_valueChanged(int value)
{ui->label->setText("当前的值为：" + QString::number(value));
}

六、多元素控件

1，QListWidget

核心属性

属性	说明
currentRow	当前被选中的是第几行
count	一共有多少行
sortingEnabled	是否允许排序
isWrapping	是否允许换行
itemAlignment	元素的对齐方式
selectRectVisible	被选中的元素矩形是否可见
spacing	元素之间的间隔

核心方法

方法	说明
addItem(const QString& label) addItem(QListWidgetItem *item)	列表中添加元素.
currentItem()	返回 QListWidgetItem* 表示当前选中的元素
setCurrentItem(QListWidgetItem* item)	设置选中哪个元素
setCurrentRow(int row)	设置选中第几行的元素
insertItem(const QString& label, int row) insertItem(QListWidgetItem *item,int row)	在指定的位置插入元素
item(int row)	返回 QListWidgetItem* 表示第 row 行的元素
takeItem(int row)	删除指定行的元素, 返回 QListWidgetItem* 表示是哪个元素被删除了

核心信号

方法	说明
currentItemChanged(QListWidgetItem* current, QListWidgetItem* old)	选中不同元素时会触发. 参数是当前选中的元素和之前选中的元素.
currentRowChanged(int)	选中不同元素时会触发. 参数是当前选中元素的行数.
itemClicked(QListWidgetItem* item)	点击某个元素时触发
itemDoubleClicked(QListWidgetItem* item)	双击某个元素时触发
itemEntered(QListWidgetItem* item)	鼠标进入元素时触发

核心方法

方法	说明
setFont	设置字体
setIcon	设置图标
setHidden	设置隐藏
setSizeHint	设置尺寸
setSelected	设置是否选中
setText	设置文本
setTextAlignment	设置文本对齐方式.

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);// 往里面添加元素ui->listWidget->addItem(new QListWidgetItem("C++"));ui->listWidget->addItem(new QListWidgetItem("JAVA"));ui->listWidget->addItem(new QListWidgetItem("Python"));// QListWidgetItem中，可以设置字体属性/图标/文字大小/是否选中
}test::~test()
{delete ui;
}void test::on_pushButton_clicked()
{// 先获取输入框内容，添加到QWidget中const QString &text = ui->lineEdit->text();// 添加到QListWidget中ui->listWidget->addItem(text);
}void test::on_pushButton_2_clicked()
{// 先获取到被选中的元素是哪个int row = ui->listWidget->currentRow();if(row < 0) {return;}// 按照行号来删除ui->listWidget->takeItem(row);
}void test::on_listWidget_currentItemChanged(QListWidgetItem *current, QListWidgetItem *previous)
{// 通过这个槽函数感知到变化if(current != nullptr){qDebug()<<"当前选中的元素"<<current->text();}if(current != nullptr){qDebug()<<"上次选中的元素"<<current->text();}
}

2，QTableWidget

方法	说明
item(int row, int column)	根据行数列数获取指定的
setItem(int row, int column, QTableWidget*)	根据行数列数设置表格中的元素
currentItem()	返回被选中的元素 QTableWidgetItem*
currentRow()	返回被选中元素是第几行
currentColumn()	返回被选中元素是第几列
row(QTableWidgetItem* )	获取指定 item 是第几行
column(QTableWidgetItem* )	获取指定 item 是第几列
rowCount()	获取行数
columnCount()	获取列数
insertRow(int row)	在第 row 行处插入新行
insertColumn(int column)	在第 column 列插入新列
removeRow(int row)	删除第 row 行
removeColumn(int column)	删除第 column 列
setHorizontalHeaderItem(int column,QTableWidget*)	设置指定列的表头
setVerticalHeaderItem(int row, QTableWidget*)	设置指定行的表头

核心信号

信号	说明
cellClicked(int row, int column)	点击单元格时触发
cellDoubleClicked(int row, int column)	双击单元格时触发
cellEntered(int row, int column)	鼠标进入单元格时触发
currentCellChanged(int row, int column,int previousRow, int previousColumn)	选中不同单元格时触发

核心方法

方法	说明
row()	获取当前是第几行
column()	获取当前是第几列
setText(const QString&)	设置文本
setTextAlignment(int)	设置文本对齐
setIcon(const QIcon&)	设置图标
setSelected(bool)	设置被选中
setSizeHints(const QSize&)	设置尺寸
setFont(const QFont&)	设置字体

示例

void test::on_pushButton_insertRow_clicked()
{// 新增一行int rowCount = ui->tableWidget->rowCount();ui->tableWidget->insertRow(rowCount);
}void test::on_pushButton_insertColum_clicked()
{// 新增一列int curColumn = ui->tableWidget->columnCount();ui->tableWidget->insertColumn(curColumn);const QString& text = ui->lineEdit->text();ui->tableWidget->setHorizontalHeaderItem(curColumn,new QTableWidgetItem(text));
}void test::on_pushButton_deletRow_clicked()
{// 删除选中行int curRow = ui->tableWidget->currentRow();ui->tableWidget->removeRow(curRow);
}void test::on_pushButton_deleteColum_clicked()
{// 删除选中列int curColumn = ui->tableWidget->currentColumn();ui->tableWidget->insertColumn(curColumn);
}

3，QTreeWidget

方法	说明
clear	清空所有子节点
addTopLevelItem(QTreeWidgetItem* item)	新增顶层节点
topLevelItem(int index)	获取指定下标的顶层节点.
topLevelItemCount()	获取顶层节点个数
indexOfTopLevelItem(QTreeWidgetItem* item)	查询指定节点是顶层节点中的下标
takeTopLevelItem(int index)	删除指定的顶层节点. 返回 QTreeWidgetItem* 表示被删除的元素
currentItem()	获取到当前选中的节点, 返回 QTreeWidgetItem*
setCurrentItem(QTreeWidgetItem* item)	选中指定节点
setExpanded(bool)	展开/关闭节点
setHeaderLabel(const QString& text)	设置 TreeWidget 的 header 名称.

核心信号

信号	说明
currentItemChanged(QTreeWidgetItem* current, QTreeWidgetItem* old)	切换选中元素时触发
itemClicked(QTreeWidgetItem* item, int col)	点击元素时触发
itemDoubleClicked(QTreeWidgetItem* item, int col)	双击元素时触发
itemEntered(QTreeWidgetItem* item, int col)	鼠标进入时触发
itemExpanded(QTreeWidgetItem* item)	元素被展开时触发
itemCollapsend(QTreeWidgetItem* item)	元素被折叠时触发

核心属性

属性	说明
text	持有的文本
textAlignment	文本对齐方式
icon	持有的图表
font	文本字体
hidden	是否隐藏
disabled	是否禁用
expand	是否展开
sizeHint	尺寸大小
selected	是否选中

核心方法

方法	说明
addChild(QTreeWidgetItem* child)	新增子节点
childCount()	子节点的个数
child(int index)	获取指定下标的子节点. 返回 QTreeWidgetItem*
takeChild(int index)	删除对应下标的子节点
removeChild(QTreeWidgetItem* child)	删除对应的子节点
parent()	获取该元素的父节点

示例

test::test(QWidget *parent): QWidget(parent), ui(new Ui::test)
{ui->setupUi(this);// 设置根节点的名字ui->treeWidget->setHeaderLabel("动物");// 新增顶层节点QTreeWidgetItem* item1 = new QTreeWidgetItem();// 每个节点设置多个列item1->setText(0, "猫");// 添加到顶层节点当中ui->treeWidget->addTopLevelItem(item1);// 新增顶层节点QTreeWidgetItem* item2 = new QTreeWidgetItem();// 每个节点设置多个列item2->setText(0, "狗");// 添加到顶层节点当中ui->treeWidget->addTopLevelItem(item2);// 新增顶层节点QTreeWidgetItem* item3 = new QTreeWidgetItem();// 每个节点设置多个列item3->setText(0, "鸟");// 添加到顶层节点当中ui->treeWidget->addTopLevelItem(item3);// 添加子节点QTreeWidgetItem* item4 = new QTreeWidgetItem();item4->setText(0, "中华田园猫");item1->addChild(item4);QTreeWidgetItem* item5 = new QTreeWidgetItem();item5->setText(0, "布偶猫");item1->addChild(item5);QTreeWidgetItem* item6 = new QTreeWidgetItem();item6->setText(0, "暹罗猫");item1->addChild(item6);
}test::~test()
{delete ui;
}void test::on_pushButton_insertTop_clicked()
{// 获取到输入框中的内容const QString& text = ui->lineEdit->text();// 构造一个QTreeWidgetItemQTreeWidgetItem* item = new QTreeWidgetItem();item->setText(0, text);// 添加到顶层节点当中ui->treeWidget->addTopLevelItem(item);
}void test::on_pushButton_insertItem_clicked()
{// 获取到当前选中的节点QTreeWidgetItem* currentItem = ui->treeWidget->currentItem();if(currentItem == nullptr){return;}// 获取到输入框的内容const QString& text = ui->lineEdit->text();if(currentItem == nullptr){return;}// 构造一个 QTreeWidgetItemQTreeWidgetItem* item = new QTreeWidgetItem();item->setText(0, text);// 插入到选中节点的子节点当中currentItem->addChild(item);
}void test::on_pushButton_deleteItem_clicked()
{// 先获取到选中的元素QTreeWidgetItem* currentItem = ui->treeWidget->currentItem();if(currentItem == nullptr){return;}// 删除选中的元素，先获取父元素，再通过父元素删除QTreeWidgetItem* parent = currentItem->parent();if(parent == nullptr){int index = ui->treeWidget->indexOfTopLevelItem(currentItem);ui->treeWidget->takeTopLevelItem(index);}else{parent->removeChild(currentItem);}
}

七、容器类控件

1，Group Box

核心属性

属性	说明
title	分组框的标题
alignment	分组框内部内容的对齐方式
flat	是否是 "扁平" 模式
checkable	是否可选择. 设为 true, 则在 title 前方会多出一个可勾选的部分.
checked	描述分组框的选择状态 (前提是 checkable 为 true)

示例

、

2，Tab Widget

核心属性

属性	说明
tabPosition	标签页所在的位置. . North 上方 . South 下方 . West 左侧 . East 右侧
currentIndex	当前选中了第几个标签页 (从 0 开始计算)
currentTabText	当前选中的标签页的文本
currentTabName	当前选中的标签页的名字
currentTabIcon	当前选中的标签页的图标
currentTabToolTip	当前选中的标签页的提示信息
tabsCloseable	标签页是否可以关闭
movable	标签页是否可以移动

核心信号

属性	说明
currentChanged(int)	在标签页发生切换时触发, 参数为被点击的选项卡编号.
tabBarClicked(int)	在点击选项卡的标签条的时候触发. 参数为被点击的选项卡编号.
tabBarDoubleClicked(int)	在双击选项卡的标签条的时候触发. 参数为被点击的选项卡编号.
tabCloseRequest(int)	在标签页关闭时触发. 参数为被关闭的选项卡编号.

示例

void test::on_pushButton_clicked()
{// 使用addTab方法创建新的标签页// 参数1 要指定一个QWidget// 参数2 要指定这个标签页的 text（标题），此处标题就叫做 Tab + 数字int count = ui->tabWidget->count();QWidget* w = new QWidget();ui->tabWidget->addTab(w, QString("Tab ") + QString::number(count + 1));// 添加一个QLabel显示内容QLabel* label = new QLabel(w);label->setText(QString("标签页") + QString::number(count + 1));label->resize(100,50);// 设置新的标签页被选中ui->tabWidget->setCurrentIndex(count);
}void test::on_pushButton_2_clicked()
{int index = ui->tabWidget->currentIndex();ui->tabWidget->removeTab(index);
}

八、布局管理器

1，垂直布局

核心属性

属性	说明
layoutLeftMargin	左侧边距
layoutRightMargin	右侧边距
layoutTopMargin	上方边距
layoutBottomMargin	下方边距
layoutSpacing	相邻元素之间的间距

示例

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建三个按钮QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");QPushButton* btn3 = new QPushButton("按钮3");// 创建布局管理器, 并且把按钮添加进去// 如果创建的时候指定父元素为 this, 则后面不需要 setLayout 方法了.QVBoxLayout* layout = new QVBoxLayout();layout->addWidget(btn1);layout->addWidget(btn2);layout->addWidget(btn3);// 把布局管理器设置到 widget 中this->setLayout(layout);
}

2，水平布局

核心属性

属性	说明
layoutLeftMargin	左侧边距
layoutRightMargin	右侧边距
layoutTopMargin	上方边距
layoutBottomMargin	下方边距
layoutSpacing	相邻元素之间的间距

示例

1 Widget::Widget(QWidget *parent)
2     : QWidget(parent)
3     , ui(new Ui::Widget)
4 {
5     ui->setupUi(this);
6
7     // 创建三个按钮
8     QPushButton* btn1 = new QPushButton("按钮1");
9     QPushButton* btn2 = new QPushButton("按钮2");
10     QPushButton* btn3 = new QPushButton("按钮3");
11
12     // 创建布局管理器
13     QHBoxLayout* layout = new QHBoxLayout();
14     layout->addWidget(btn1);
15     layout->addWidget(btn2);
16     layout->addWidget(btn3);
17
18     // 设置 layout 到 widget 上
19     this->setLayout(layout);
20 }

3，网格布局

核心属性

属性	说明
layoutLeftMargin	左侧边距
layoutRightMargin	右侧边距
layoutTopMargin	上方边距
layoutBottomMargin	下方边距
layoutHorizontalSpacing	相邻元素之间水平方向的间距
layoutVerticalSpacing	相邻元素之间垂直方向的间距
layoutRowStretch	行方向的拉伸系数
layoutColumnStretch	列方向的拉伸系数

示例

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建三个按钮QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");QPushButton* btn3 = new QPushButton("按钮3");// 创建布局管理器QHBoxLayout* layout = new QHBoxLayout();layout->addWidget(btn1);layout->addWidget(btn2);layout->addWidget(btn3);// 设置 layout 到 widget 上this->setLayout(layout);// 设置 layout 到窗口中.this->setLayout(layout);
}

4，表单布局

除了上述的布局管理器之外, Qt 还提供了QForm Layout, 属于是QGridLayout的特殊情况, 专门用于实现两列表单的布局。这种表单布局多用于让用户填写信息的场景. 左侧列为提示, 右侧列为输入框。

示例 : 使用QForm Layout创建表单

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建 layoutQFormLayout* layout = new QFormLayout();this->setLayout(layout);// 创建三个 labelQLabel* label1 = new QLabel("姓名 ");QLabel* label2 = new QLabel("年龄 ");QLabel* label3 = new QLabel("电话 ");// 创建三个 lineEditQLineEdit* lineEdit1 = new QLineEdit();QLineEdit* lineEdit2 = new QLineEdit();QLineEdit* lineEdit3 = new QLineEdit();// 创建一个提交按钮QPushButton* btn = new QPushButton("提交 ");// 把上述元素添加到 layout 中layout->addRow(label1, lineEdit1);layout->addRow(label2, lineEdit2);layout->addRow(label3, lineEdit3);layout->addRow(NULL, btn);
}

5，Spacer

核心属性

属性	说明
width	宽度
height	高度
hData	水平方向的 sizePolicy 值。 QSizePolicy::Ignored : 忽略控件的尺⼨，不对布局产⽣影响。 QSizePolicy::Minimum : 控件的最⼩尺⼨为固定值，布局时不会超过该值。 QSizePolicy::Maximum : 控件的最⼤尺⼨为固定值，布局时不会⼩于该值。 QSizePolicy::Preferred : 控件的理想尺⼨为固定值，布局时会尽量接近该值。 QSizePolicy::Expanding : 控件的尺寸可以根据空间调整 ，尽可能占据更多空间。 QSizePolicy::Shrinking : 控件的尺寸可以根据空间调整 ，尽可能缩小以适应空间。
vData	垂直方向的 sizePolicy 选项同上.

示例

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QHBoxLayout* layout = new QHBoxLayout();this->setLayout(layout);QPushButton* btn1 = new QPushButton("按钮1");QPushButton* btn2 = new QPushButton("按钮2");// 创建 SpacerQSpacerItem* spacer = new QSpacerItem(200, 20);layout->addWidget(btn1);// 在两个 widget 中间添加空白layout->addSpacerItem(spacer);layout->addWidget(btn2);
}