本节对应的视频讲解:B_站_链_接
【QT开发笔记-基础篇】| 第二章 常用控件 | 2.12 表格控件 QTableWidget(1)
QTableWidget
是 Qt
中的表格控件,可以行列的形式来展示数据
1. 属性和方法
QTableWidget
有很多属性和方法,完整的可查看帮助文档。
在窗口上放置一个 QTableWidget
控件后,既可以在设计师 UI
界面来编辑属性和添加数据,也可以在代码中动态地设置
这里列出常用的属性和方法
1.1 行列数目、行表头、列表头
表格控件的第一行称为行表头,用于设置每一列的标题
表格控件的第一列称为列表头,用于设置每一行的标题,通常缺省则默认显示行号
设置和获取行列的数目
// 获取/设置行的数目
int rowCount() const
void setRowCount(int rows)
// 获取/设置列的数目
int columnCount() const
void setColumnCount(int columns)
设置行列表头
// 设置行表头
void setHorizontalHeaderLabels(const QStringList &labels)
// 设置列表头 - 通常不设置,则默认为行号
void setVerticalHeaderLabels(const QStringList &labels)
设置列的宽度
// 获取行表头
QHeaderView *horizontalHeader() const
// 设置列的宽度
void QHeaderView::setSectionResizeMode(QHeaderView::ResizeMode mode)
其中 ResizeMode
是一个枚举,取值如下:
- HeaderView::Interactive 0 用户可拖动改变列宽
- QHeaderView::Fixed 2 固定列宽
- QHeaderView::Stretch 1 拉伸自适应列宽大小
- QHeaderView::ResizeToContents 3 根据内容设置列宽
通常,先整体设置为 QHeaderView::Stretch
, 然后根据需要对单独的列进行设置,如下:
// 1、先设置自适应宽度,再单独设置某一列的宽度规则
ui->twStudent->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch); //先自适应宽度
// 2、然后,单独设置某一列根据内容调整宽度,或者单独设置某一列为固定宽度
// ui->twStudent->horizontalHeader()->setSectionResizeMode(0, QHeaderView::ResizeToContents);
ui->twStudent->horizontalHeader()->setSectionResizeMode(0, QHeaderView::Fixed);
ui->twStudent->setColumnWidth(0, 80);
1.2 单元格
每个网格单元称为一个单元格。每个单元格有一个行号、列号。
在 QTableWidget
表格控件中,每一个单元格是一个 QTableWidgetItem
对象,可以设置其文字内容等。
获取和设置单元格
// 获取和设置指定行列位置的单元格
QTableWidgetItem *item(int row, int column) const;
void setItem(int row, int column, QTableWidgetItem *item)
// 构造 QTableWidgetItem
QTableWidgetItem(const QIcon &icon, const QString &text, int type = Type)
QTableWidgetItem(const QString &text, int type = Type)
单元格文本对齐方式
// 获取和设置单元格文本的对齐方式
int textAlignment() const
void setTextAlignment(int alignment)
参数 alignment
是一个枚举类型,常用取值如下:
-
Qt::AlignLeft
(0x0001) 水平方向-左对齐 -
Qt::AlignRight
(0x0002) 水平方向-右对齐 -
Qt::AlignHCenter
(0x0004) 水平方向-居中对齐 -
Qt::AlignTop
(0x0020) 垂直方向-上对齐 -
Qt::AlignBottom
(0x0040) 垂直方向-下对齐 -
Qt::AlignVCenter
(0x0080) 垂直方向-居中对齐 -
Qt::AlignCenter
(AlignVCenter | AlignHCenter) 垂直方向和水平方向-居中对齐
上面的每一个宏,都代表 16
进制中的一位,可以进行或(|
)操作,来同时设置多个对齐方式。
单元格是否可编辑
// 获取和设置单元格是否可编辑
QAbstractItemView::EditTriggers editTriggers() const
void setEditTriggers(QAbstractItemView::EditTriggers triggers)
这是继承自其父类 QAbstractItemView
中的方法
其中,QAbstractItemView::EditTriggers
是一个枚举,常用取值如下:
-
AbstractItemView::NoEditTriggers
0 不可编辑 -
QAbstractItemView::CurrentChanged
1 当切换单元格时 -
QAbstractItemView::DoubleClicked
2 当双击单元格时 -
QAbstractItemView::SelectedClicked
4 当单击一个已选中的单元格时 -
QAbstractItemView::EditKeyPressed
8 当一个单元格获取焦点,按编辑按键时(F2) -
QAbstractItemView::AnyKeyPressed
16 当一个单元格获取焦点,按任意键时 -
QAbstractItemView::AllEditTriggers
31 以上所有条件的组合。(31 = 1|2|4|8|16)
1.3 隔行交替背景色
如下的奇数行和偶数行,它们的背景色不同,便于用户浏览
// 获取和设置是否允许隔行交替背景色
bool alternatingRowColors() const
void setAlternatingRowColors(bool enable)
这是继承自其父类 QAbstractItemView
中的方法
1.4 选择模式、选择行为
所谓选择行为,是指当点击一个单元格时,是选中该单元格,还是选中一整行
// 获取和设置选择行为
QAbstractItemView::SelectionBehavior selectionBehavior() const
void setSelectionBehavior(QAbstractItemView::SelectionBehavior behavior)
这是继承自其父类 QAbstractItemView
中的方法
其中 QAbstractItemView::SelectionBehavior
是一个枚举,取值为:
QAbstractItemView::SelectItems
0 选中单元格
QAbstractItemView::SelectRows
1 选中单元格所在行
QAbstractItemView::SelectColumns
2 选中单元格所在列
所谓选择模式,是指设置表格控件只可选择单行、可选择多行等。
// 获取和设置选择模式
QAbstractItemView::SelectionMode selectionMode() const
void setSelectionMode(QAbstractItemView::SelectionMode mode)
这是继承自其父类 QAbstractItemView
中的方法
其中 QAbstractItemView::SelectionMode
是一个枚举,取值为:
-
QAbstractItemView::
NoSelection
0 不可选择 -
QAbstractItemView::
SingleSelection
1 单行选择,一次只允许选择一行 -
QAbstractItemView::
MultiSelection
2 多行选择,鼠标单击就可以选择多行 -
QAbstractItemView::
ExtendedSelection
3 扩展选择,按shift键选中一个范围内的行,ctrl键可以选中不相邻的行 -
QAbstractItemView::
ContiguousSelection
4 相邻选择,按shift键或ctrl键都可以选中一个范围内的行
1.5 设置样式表
通过设置样式表,可以使的表格控件更加美观
void Widget::on_btnStyleSheet_clicked()
{
QString cellStyle = R"(
QTableView
{
text-align:center;
background-color: rgba(255, 255, 255, 0);
alternate-background-color:#e3edf9;
font:14px "微软雅黑";
color:#677483;
gridline-color: #ccddf0;
}
)";
const QString horizontalHeaderStyle = R"(
QHeaderView::section {
color: black;
font:bold 14px "微软雅黑";
text-align:center;
height:32px;
background-color: #d1dff0;
border:1px solid #8faac9;
border-left:none;
}
)";
const QString verticalHeaderStyle = R"(
QHeaderView::section {
color: black;
font:bold 14px "微软雅黑";
width:60px;
text-align:center;
background-color: #d1dff0;
border:1px solid #8faac9;
border-left:none;
}
)";
ui->twStudent->setStyleSheet(cellStyle);
ui->twStudent->horizontalHeader()->setStyleSheet(horizontalHeaderStyle);
ui->twStudent->verticalHeader()->setStyleSheet(verticalHeaderStyle);
}
以上 R
包裹的字符串,就是 C++
中的原始字符串
原始字符串:使用前缀 R
来标识,并用 "(
和 )"
用作定界符
就是所见即所得,不用写难以理解的转义字符。
2. 案例
本案例展示表格控件的以下操作:
- 行表头的设置
- 列表头的设置
- 交替显示背景色
- 单元格可编辑
- 设置样式表
- 选择行为:单元格选择或行选择
- 数据的增删改查
2.1 布局
在 UI
设计师界面,拖拽对应的控件,修改显示的文字、控件的 name
,然后完成布局文章来源:https://www.toymoban.com/news/detail-530311.html
2.2 代码实现
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 1. 初始化列表控件
// 1.1 共有4列,并添加列的名称
ui->twStudent->setColumnCount(4);
QStringList horizontalHeader;
horizontalHeader << "姓名";
horizontalHeader << "性别";
horizontalHeader << "年龄";
horizontalHeader << "籍贯";
ui->twStudent->setHorizontalHeaderLabels(horizontalHeader);
// 1.2 设置列的宽度
// 先设置自适应宽度,再单独设置某一列的宽度规则
ui->twStudent->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch); //先自适应宽度
// 然后,可以单独设置某一列根据内容调整宽度
// ui->twStudent->horizontalHeader()->setSectionResizeMode(0, QHeaderView::ResizeToContents);
// 或者,可以单独设置某一列为固定宽度
// ui->twStudent->horizontalHeader()->setSectionResizeMode(0, QHeaderView::Fixed);
// ui->twStudent->setColumnWidth(0, 80);
// 1.3 添加几行初始化数据
appendOneRow("李雷", "男", 12, "广东");
appendOneRow("韩梅梅", "女", 11, "北京");
appendOneRow("林涛", "男", 13, "上海");
// 2. 设置行表头是否显示
// 首先根据在属性窗口中设置的属性,初始化复选框
if(ui->twStudent->horizontalHeader()->isHidden()) {
ui->cboHHeader->setChecked(false);
} else {
ui->cboHHeader->setChecked(true);
}
// 点击复选框时,显示或者隐藏行表头
connect(ui->cboHHeader, &QCheckBox::stateChanged, this, [=](int state) {
if(state == Qt::Checked) {
ui->twStudent->horizontalHeader()->show();
} else if(state == Qt::Unchecked) {
ui->twStudent->horizontalHeader()->hide();
}
});
// 3. 设置列表头是否显示
// 首先根据在属性窗口中设置的属性,初始化复选框
if(ui->twStudent->verticalHeader()->isHidden()) {
ui->cboVHeader->setChecked(false);
} else {
ui->cboVHeader->setChecked(true);
}
// 点击复选框时,显示或者隐藏列表头
connect(ui->cboVHeader, &QCheckBox::stateChanged, this, [=](int state) {
if(state == Qt::Checked) {
ui->twStudent->verticalHeader()->show();
} else if(state == Qt::Unchecked) {
ui->twStudent->verticalHeader()->hide();
}
});
// 4. 交替显示行的背景色
// 首先根据在属性窗口中设置的属性,初始化复选框
if(ui->twStudent->alternatingRowColors()) {
ui->cboAlternate->setChecked(true);
} else {
ui->cboAlternate->setChecked(false);
}
// 点击复选框时,使能或者禁能交替背景色
connect(ui->cboAlternate, &QCheckBox::stateChanged, this, [=](int state) {
if(state == Qt::Checked) {
ui->twStudent->setAlternatingRowColors(true);
} else if(state == Qt::Unchecked) {
ui->twStudent->setAlternatingRowColors(false);
}
});
// 5. 设置单元格是否可编辑
// 首先根据在属性窗口中设置的属性,初始化复选按钮
int trigger = ui->twStudent->editTriggers();
if(trigger == QAbstractItemView::NoEditTriggers) {
ui->cboEditCell->setChecked(false);
} else {
ui->cboEditCell->setChecked(true);
}
// 点击复选按钮时,使能或者禁能单元格编辑
connect(ui->cboEditCell, &QCheckBox::stateChanged, this, [=](int state) {
if(state == Qt::Checked) {
// 当双击单元格/选中单元格然后单击/按下编辑键F2,都可以编辑单元格。
ui->twStudent->setEditTriggers(QAbstractItemView::DoubleClicked |
QAbstractItemView::SelectedClicked |
QAbstractItemView::EditKeyPressed);
} else if(state == Qt::Unchecked) {
ui->twStudent->setEditTriggers(QAbstractItemView::NoEditTriggers);
}
});
// 6. 设置行选择还是单元格选择
// 首先根据在属性窗口中设置的属性,初始化单选按钮的选中状态
int selectionBehavior = ui->twStudent->selectionBehavior();
if(selectionBehavior == QAbstractItemView::SelectItems) {
ui->rbCell->setChecked(true);
} else if(selectionBehavior == QAbstractItemView::SelectRows){
ui->rbRow->setChecked(true);
}
// 点击单选按钮时,使能单元格选中或者行选中
mButtonGroupSelection = new QButtonGroup(this);
mButtonGroupSelection->addButton(ui->rbCell, 0);
mButtonGroupSelection->addButton(ui->rbRow, 1);
connect(ui->rbCell, &QRadioButton::clicked, this, &Widget::onSelectionRadioButtonClicked);
connect(ui->rbRow, &QRadioButton::clicked, this, &Widget::onSelectionRadioButtonClicked);
// 7. 单元格点击时, 将对应行的数据显示到文本框
connect(ui->twStudent, &QTableWidget::itemClicked, this, &Widget::onItemClicked);
}
Widget::~Widget()
{
delete ui;
}
void Widget::appendOneRow(QString name, QString gender, int age, QString province)
{
// 获取当前行数
int count = ui->twStudent->rowCount();
qDebug() << "current count:" << count;
// 设置当前行数
ui->twStudent->setRowCount(count+1);
QTableWidgetItem* nameItem = new QTableWidgetItem(name);
QTableWidgetItem* genderItem = new QTableWidgetItem(gender);
QTableWidgetItem* ageItem = new QTableWidgetItem(QString::number(age));
QTableWidgetItem* provinceItem = new QTableWidgetItem(province);
nameItem->setTextAlignment(Qt::AlignCenter);
genderItem->setTextAlignment(Qt::AlignCenter);
ageItem->setTextAlignment(Qt::AlignCenter);
provinceItem->setTextAlignment(Qt::AlignCenter);
ui->twStudent->setItem(count, 0, nameItem);
ui->twStudent->setItem(count, 1, genderItem);
ui->twStudent->setItem(count, 2, ageItem);
ui->twStudent->setItem(count, 3, provinceItem);
}
void Widget::insertOneRow(int row, QString name, QString gender, int age, QString province)
{
ui->twStudent->insertRow(row);
// 上面 insertRow 只是插入一个空行,需要手动添加每个单元格的内容
QTableWidgetItem* nameItem = new QTableWidgetItem(name);
QTableWidgetItem* genderItem = new QTableWidgetItem(gender);
QTableWidgetItem* ageItem = new QTableWidgetItem(QString::number(age));
QTableWidgetItem* provinceItem = new QTableWidgetItem(province);
nameItem->setTextAlignment(Qt::AlignCenter);
genderItem->setTextAlignment(Qt::AlignCenter);
ageItem->setTextAlignment(Qt::AlignCenter);
provinceItem->setTextAlignment(Qt::AlignCenter);
ui->twStudent->setItem(row, 0, nameItem);
ui->twStudent->setItem(row, 1, genderItem);
ui->twStudent->setItem(row, 2, ageItem);
ui->twStudent->setItem(row, 3, provinceItem);
}
void Widget::on_btnAppend_clicked()
{
QString name = ui->leName->text();
QString gender = ui->leGender->text();
int age = ui->leAge->text().toInt();
QString province = ui->leProvince->text();
appendOneRow(name, gender, age, province);
}
void Widget::on_btnInsert_clicked()
{
QString name = ui->leName->text();
QString gender = ui->leGender->text();
int age = ui->leAge->text().toInt();
QString province = ui->leProvince->text();
// 获取当前选中的行号
int currentRow = ui->twStudent->currentRow();
insertOneRow(currentRow, name, gender, age, province);
}
void Widget::on_btnDelete_clicked()
{
// 获取当前选中的行号
int currentRow = ui->twStudent->currentRow();
ui->twStudent->removeRow(currentRow);
}
void Widget::on_btnModify_clicked()
{
QString name = ui->leName->text();
QString gender = ui->leGender->text();
int age = ui->leAge->text().toInt();
QString province = ui->leProvince->text();
// 获取当前选中的行号
int currentRow = ui->twStudent->currentRow();
QTableWidgetItem* nameItem = new QTableWidgetItem(name);
QTableWidgetItem* genderItem = new QTableWidgetItem(gender);
QTableWidgetItem* ageItem = new QTableWidgetItem(QString::number(age));
QTableWidgetItem* provinceItem = new QTableWidgetItem(province);
nameItem->setTextAlignment(Qt::AlignCenter);
genderItem->setTextAlignment(Qt::AlignCenter);
ageItem->setTextAlignment(Qt::AlignCenter);
provinceItem->setTextAlignment(Qt::AlignCenter);
ui->twStudent->setItem(currentRow, 0, nameItem);
ui->twStudent->setItem(currentRow, 1, genderItem);
ui->twStudent->setItem(currentRow, 2, ageItem);
ui->twStudent->setItem(currentRow, 3, provinceItem);
}
void Widget::onItemClicked(QTableWidgetItem *item)
{
int row = item->row();
QString name = ui->twStudent->item(row, 0)->text();
QString gender = ui->twStudent->item(row, 1)->text();
QString age = ui->twStudent->item(row, 2)->text();
QString province = ui->twStudent->item(row, 3)->text();
ui->leName->setText(name);
ui->leGender->setText(gender);
ui->leAge->setText(age);
ui->leProvince->setText(province);
}
void Widget::on_btnStyleSheet_clicked()
{
QString cellStyle = R"(
QTableView
{
text-align:center;
background-color: rgba(255, 255, 255, 0);
alternate-background-color:#e3edf9;
font:14px "微软雅黑";
color:#677483;
gridline-color: #ccddf0;
}
)";
const QString horizontalHeaderStyle = R"(
QHeaderView::section {
color: black;
font:bold 14px "微软雅黑";
text-align:center;
height:32px;
background-color: #d1dff0;
border:1px solid #8faac9;
border-left:none;
}
)";
const QString verticalHeaderStyle = R"(
QHeaderView::section {
color: black;
font:bold 14px "微软雅黑";
width:60px;
text-align:center;
background-color: #d1dff0;
border:1px solid #8faac9;
border-left:none;
}
)";
ui->twStudent->setStyleSheet(cellStyle);
ui->twStudent->horizontalHeader()->setStyleSheet(horizontalHeaderStyle);
ui->twStudent->verticalHeader()->setStyleSheet(verticalHeaderStyle);
}
void Widget::onSelectionRadioButtonClicked()
{
int checkedId = mButtonGroupSelection->checkedId();
if(checkedId == 0) {
ui->twStudent->setSelectionMode(QAbstractItemView::SingleSelection);
ui->twStudent->setSelectionBehavior(QAbstractItemView::SelectItems);
} else if (checkedId == 1) {
ui->twStudent->setSelectionMode(QAbstractItemView::SingleSelection);
ui->twStudent->setSelectionBehavior(QAbstractItemView::SelectRows);
}
}
本节对应的视频讲解:B_站_链_接
https://www.bilibili.com/video/BV15N4y177W2文章来源地址https://www.toymoban.com/news/detail-530311.html
到了这里,关于【QT开发笔记-基础篇】| 第二章 常用控件 | 2.12 表格控件 QTableWidget的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!