1、概念
在Qt中,控件(Widget)是用来构建用户界面的可视化元素,用于展示信息、接收用户输入、触发事件等。控件可以是按钮、文本框、标签、列表框等各种元素,用于创建丰富的用户界面。
2、常用控件
2.1 Buttons
按钮控件是常用的用户交互控件之一,用于触发特定操作或事件。
- 普通按钮(QPushButton):用于触发一般的操作或事件,如提交表单、打开文件等。
- 复选框按钮(QCheckBox):用于表示两种状态之间的选择,如开关按钮、多选等。
- 单选按钮(QRadioButton):用于从多个互斥选项中选择一个,如性别选择、模式切换等
- 工具按钮(QToolButton):用于显示图标或文本,并触发相关操作,如工具栏按钮、下拉菜单按钮等。
设计如下界面:
同时添加如下测试代码:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 选中常用按键后打印信息
connect(ui->PuBtn_1, &QPushButton::clicked, [=](){
qDebug() << "选中常用按键";
});
// 默认选中未婚
ui->radioButton->setChecked(true);
// 打印多选按钮状态
connect(ui->checkBox, &QPushButton::clicked, [=](int state){
qDebug() << "多选按钮状态:" << state;
});
}
按键测试效果如下:
2.2 List Widget
List Widget用于显示单列的数据列表,每个项都是一个单独的条目。
设计如下界面:
同时添加如下测试代码:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 显示校规校纪
QStringList list;
list << "校规校纪" << "不许打架" << "不许逃课" << "尽量不要同时和好几个人谈恋爱";
ui->listWidget->addItems(list);
// 设置文本居中显示
for(int i = 0; i < ui->listWidget->count(); i++)
{
QListWidgetItem *item = ui->listWidget->item(i);
item->setTextAlignment(Qt::AlignCenter);
}
}
测试效果如下:
2.3 Tree Widget
Tree Widget用于显示具有层次结构的数据,每个项可以包含子项。适用于显示具有父子关系的数据,如文件系统结构、组织架构等。
设计如下界面:
同时添加如下测试代码:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 设置表头
ui->treeWidget->setHeaderLabels(QStringList() << "科目" << "科目介绍");
QStringList listroot, listchild;
listroot << "科目1" << "科目2" << "科目3" << "科目4";
listchild << "纯理论,太简单了" << "一顿操作猛如虎,一看通过两成五" << "过了获得一次尬舞的机会" << "跟教练有仇报仇去吧";
for (int i = 0; i < listroot.size(); ++i)
{
// 添加根节点
QTreeWidgetItem *rootItem = new QTreeWidgetItem(ui->treeWidget);
rootItem->setText(0, listroot[i]);
// 添加对应的子节点
QTreeWidgetItem *childItem = new QTreeWidgetItem(rootItem);
childItem->setText(1, listchild[i]);
}
}
测试效果如下:
2.4 Table Widget
Table Widget用于以表格形式显示数据,包含多行和多列。适用于显示二维数据,如表格数据、数据集等。
设计如下界面:
同时添加如下测试代码:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 设置列数
ui->tableWidget->setColumnCount(3);
// 设置行数
ui->tableWidget->setRowCount(3);
// 设置水平表头
ui->tableWidget->setHorizontalHeaderLabels(QStringList() << "姓名" << "学号" << "成绩");
// 设置内容
QStringList nameList, numberList;
nameList << "张三爷" << "李四爷" << "王五弟";
numberList << "001" << "002" << "003";
int score[3] = {96 ,97 ,99};
for(int i = 0; i < 3; ++i)
{
for(int j = 0; j < 3; ++j)
{
if(j == 0)
{
QTableWidgetItem *item = new QTableWidgetItem(nameList[i]);
item->setTextAlignment(Qt::AlignCenter);
ui->tableWidget->setItem(i, j, item);
}
else if(j == 1)
{
QTableWidgetItem *item = new QTableWidgetItem(numberList[i]);
item->setTextAlignment(Qt::AlignCenter);
ui->tableWidget->setItem(i, j, item);
}
else
{
QTableWidgetItem *item = new QTableWidgetItem(QString::number(score[i]));
item->setTextAlignment(Qt::AlignCenter);
ui->tableWidget->setItem(i, j, item);
}
}
}
}
测试效果如下:
2.5 Containers
-
Scroll Area(滚动区域):用于显示超出视图范围的内容,并提供滚动条进行查看。适用于需要显示大量内容的情况。
-
Tool Box(工具箱):类似于选项卡控件,可以显示多个页面,并通过选项卡切换显示不同内容。适用于显示多个相关页面的场景。
-
Tab Widget(选项卡控件):用于显示多个页面,每个页面对应一个选项卡,用户可以通过点击选项卡切换显示不同内容。常用于分组显示相关内容。
界面设计如下:
显示效果:
-
Stacked Widget(堆叠控件):用于在同一位置显示多个子控件,但只有一个子控件可见。通过切换当前显示的子控件来实现内容的切换。
使用Stacked Widget进行上述3个界面的切换,设计界面如下:
添加按键跳转的测试代码:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 设置默认
ui->stackedWidget->setCurrentIndex(0);
// 设置按键跳转
connect(ui->btn_btn, &QPushButton::clicked, [=](){
ui->stackedWidget->setCurrentIndex(1);
});
connect(ui->btn_net, &QPushButton::clicked, [=](){
ui->stackedWidget->setCurrentIndex(2);
});
connect(ui->btn_grade, &QPushButton::clicked, [=](){
ui->stackedWidget->setCurrentIndex(0);
});
}
测试结果:
2.6 Input Widgets
Input Widgets控件用于接收用户输入数据的控件,常用控件如下:
使用代码添加多选框条目:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 设置下拉框内容
ui->comboBox->addItem("小学");
ui->comboBox->addItem("初中");
ui->comboBox->addItem("高中");
ui->comboBox->addItem("大学");
}
显示效果如下:
2.7 Label
Label控件(QLabel)用于显示文本或图像,并通常用于向用户提供信息或说明。Label控件是一种只读控件,用户不能直接在Label上进行编辑或交互操作。Label控件通常用于显示静态文本、图像、链接等内容。
Label控件的一些常见特性和用法包括:
- 显示文本:Label可以显示文本内容,支持设置字体、颜色、对齐方式等属性。
- 显示图像:Label可以显示图像,支持显示各种格式的图片文件。
- 超链接:Label可以显示带有链接效果的文本,用户可以点击链接跳转到指定的网页或执行其他操作。
- 自动换行:Label支持自动换行功能,当文本内容超出Label的显示范围时会自动换行显示。
- 富文本:Label支持显示富文本内容,可以使用HTML标记语言来设置文本的样式和格式。
通过Label控件,开发者可以方便地向用户展示各种信息、说明、提示等内容,从而增强用户界面的友好性和交互性。
设置一个文本标签和一个显示图片的标签:
编写代码设置图片:
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->label_img->setPixmap(QPixmap(":/file.jpg"));
ui->label_img->resize(300,150);
}
显示效果:
3、总结
本文介绍了QT常用控件,并编写代码进行简单测试。