目录
1. 布局(Layout)
非常常用
1.可以直接拖动创建一个指定布局窗口
2.也可先把控件放在同一个Widget窗口中,再选择布局
2. 弹簧(Spacers)
可以控制控件的位置
选中弹簧在属性栏中可以控制弹簧大小(Fixed为固定弹簧)
3. 按钮(Bottons)
常用的有
Push Botton
3.1 Push Botton
点击响应
加载图标
加载图标,在属性栏中icon模块选择资源
在inconSize中修改图标大小
3.2 QToolButton
工具按钮,常用于显示图片,可以通过调整按钮的类型来调整文字与图片的关系
ToolButtonIconOnly 只显示图片
ToolButtonTextOnly 只显示文本
ToolButtonTextBesideIcon 文本在图片旁
如图第二个按钮为ToolButtonIconOnly类型
autoRaise控制背景是否透明
3.3 Radio Button(单选)
3.3.1 设置Radio Button控件
单独放是可以选中
放在同一个框框中可以做到只能选一个
3.3.2 设置默认勾选
初始是都没选中
可通过代码来实现默认选项使用 Radio Button->setChecked(true)
Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); //单选按钮 默认选中 男 ui->rbtn_man->setChecked(true); }
运行结果
3.3.3 设置勾选时进行的操作
使用connect来链接点击后的操作
//点击女单选按钮 打印输出 connect(ui->rbtn_woman,&QRadioButton::clicked,[=](){ qDebug()<<"选中“女”"; });
3.4 Check Box(复选)
可以同时多选
Check Box作为信号有专门的发信号函数,stateChanged有参数state
槽函数必须要有int 这个参数
//复选按钮 点击环境好后 监听 connect(ui->checkBox,&QCheckBox::stateChanged,[=](int state){ qDebug()<<state; });
2为全选中 0为未选中
可在属性栏中勾选tristate选项可以触发半选 输出1
4. Item Widgets
QListWidget
QTreeWidget
QTableWidget
4.1 QListWidget
QListWidget 是qt中的列表框控件,它用于显示多个列表项
列表项对应的类是QListWidgetItem.
4.1.1 代码实现
使用QListWidgetItem 创建列表项
ui->listWidget->addItem() 将列表项加载到控件中
item->setTexAlignment(Qt:: ) 设置对齐方式
ui->listWidget->addItems(QStringList)可以一次性放入多个列表项,但不能设置对齐方式
//listWidget QListWidgetItem* item = new QListWidgetItem("锄禾日当午"); ui->listWidget->addItem(item); //居中 item->setTextAlignment(Qt::AlignHCenter); //QStringList QList<QString> QStringList list; list << "锄禾日当午" <<"汗滴禾下土" << "谁知盘中餐" << "粒粒皆辛苦"; //addItems参数为QStringList 可以放多行 但不能居中 ui->listWidget->addItems(list);
运行结果
4.3.2 ui 实现
可以轻松实现各种功能
4.2 QTreeWidget
4.2.1 代码实现
QTreeWidget 是 Qt 框架提供的一种树形控件,它能以树形结构展示数据(或者文件)之间的包含关系。
头:ui->treeWidget->setHeaderLables (QStringList);
根:ui->treeWidget->addTopLevelItem (QTreeWidgetItem*);
枝:QTreeWidgetItem->addChild (QTreeWidgetItem*);
//treeWidget树控件使用 //设置头 ui->treeWidget->setHeaderLabels(QStringList() << "英雄" << "分路"); QTreeWidgetItem* proItem1 = new QTreeWidgetItem(QStringList() << "中路"); QTreeWidgetItem* proItem2 = new QTreeWidgetItem(QStringList() << "对抗路"); QTreeWidgetItem* proItem3 = new QTreeWidgetItem(QStringList() << "发育路"); //将根放到树中 ui->treeWidget->addTopLevelItem(proItem1); ui->treeWidget->addTopLevelItem(proItem2); ui->treeWidget->addTopLevelItem(proItem3); QStringList hero1; QStringList hero2; QStringList hero3; hero1 << "马超" << "以吃中路兵线文明,接管中路并线则征服峡谷"; hero2 << "马超" << "对抗路一哥,自加强两星期后惨遭大砍"; hero3 << "元神" << "著名演员桑杰伦说到,除非对抗路削弱,否则元神就是打发育路"; QTreeWidgetItem* l1 = new QTreeWidgetItem(hero1); QTreeWidgetItem* l2 = new QTreeWidgetItem(hero2); QTreeWidgetItem* l3 = new QTreeWidgetItem(hero3); //在根里添加枝杈 proItem1->addChild(l1); proItem2->addChild(l2); proItem3->addChild(l3);
4.2.2 ui 实现
4.3 QTableWidget
4.3.1 ui实现
5. Containers
Group Box 分组容器
Scroll Area 可以上下滑动的窗口
Tool Box 分组容器
Tab Widget 多个标签的窗口
Stacked Widget 栈容器窗口,可以链接按钮
5.1 Group Box
一个分组容器,可以将一些控件组在一个区域,便于功能分区
5.2 Scroll Area
对区域内增加一个上下滑动的滑块
5.3 Tool Box
分组区域
在对象栏中右键可以添加页
选中ToolBox在属性栏中可以设置各种属性
可以在每个栏下面拖入控件
5.4 Tab Widget
可以作为浏览标签
选中tabWidget对象,在属性栏中可以设置各种属性
同理,可以在标签页面添加各种控件
右键对象,可以添加标签
5.5 Stacked Widget
栈容器,可以通过按钮来设置第几页的内容
将两个容器分别放入栈的两个位置中,通过右上角进行翻页
放入之后再对象栏中可以看到栈里面有两个对象
设置两个按钮来控制,否则默认为打开第一页,且不会再运行窗口中进行翻页
代码进行链接
//点击按钮 切换 stacked容器 connect(ui->bt_scrollArea,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(0); }); connect(ui->bt_ToolBox,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(1); });
运行结果
同理在对象栏中右键选择添加栈容量
5.6 Dock Widget
铆接部件(浮动窗口)
5.6.1 代码实现
//铆接部件 (浮动窗口) QDockWidget* dock = new QDockWidget("aaa",this); addDockWidget(Qt::TopDockWidgetArea,dock); dock->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea);
运行结果
1.正常添加铆接部件(默认在上方)
2.拖动时可以作为浮动窗口
3.在加入核心部件之后,可以 附着在上下左右边框
5.6.2 ui 实现
6. Input Widgets
Combo Box 下拉框
6.1 Combo Box
6.1.1 代码实现
//下拉框的实现 ui->comboBox->addItem("奔驰"); ui->comboBox->addItem("宝马"); ui->comboBox->addItem("拖拉机"); //点击按钮 选中拖拉机下拉框内容 connect(ui->bt_select,&QPushButton::clicked,[=](){ ui->comboBox->setCurrentText("拖拉机"); });
运行时点击“拖拉机”按钮“,则下拉框内容切换为”拖拉机“
6.1.2 ui 实现
直接双击添加
6.2 Font Combo Box
字体下拉框
默认有系统自带的多种字体
6.3 Line Edit
单行编辑框
在属性框中可以在echo Mode中设置密码模式
6.3 Text Edit
核心文本框
可以修改字体格式(运行时不能)
6.4 Plain Text Edit
纯文本框,不能调格式
6.5 Spin Box
计数器
6.6 Double Spin Box
双精度计数器
6.7 Time Edit
时间控件
6.8 Date Edit
日期控件
6.9 Date/Time Edit
时间日期控件
6.10 Dial
6.11 Horizontal Scroll Bar
水平滑块
6.12 Vertical Scroll Bar
垂直滑块
6.13 Horizontal Slider
水平滚动条
6.14 Vertical Slider
垂直滚动条
6.15 Key Sequence Edit
设置快捷键
7. Display Widgets
7.1 Label
标签页面,可以添加文字,也可以添加图片或动图
7.1.1 添加图片
添加图片:在属性栏中找到pixmap,在资源文件中添加图片
可以选中scaledContents,使图片填充标签框
7.1.2 添加动图
添加动图需要通过代码实现
//利用QLabel 显示动态图片 格式要求 gif QMovie* movie = new QMovie(":/images/bandicam 2024-04-29 18-27-59-055 00_00_00-00_00_30.gif"); ui->label->setMovie(movie); movie->start();
7.1.3 添加Label的边框
在属性栏中QFrame的frameShape选择合适的边框