QT基础入门——界面布局和常用控件(四)

前言:

所谓 GUI 界面,归根结底,就是一堆组件的叠加。我们创建一个窗口,把按钮放上面,把图标放上面,这样就成了一个界面。在放置时,组件的位置尤其重要。我们必须要指定组件放在哪里,以便窗口能够按照我们需要的方式进行渲染。这就涉及到组件定位的机制。Qt为我们应用程序界面开发提供的一系列的控件,下面我们介绍一下界面布局和最常用一些控件,所有控件的使用方法我们都可以通过帮助文档获取。

目录

一、布局管理器

1.系统提供的布局控件

2.利用widget做布局

 二、常用控件

1.按钮组

2. ListWidget列表容器

 3.QTreeWidget树控件

(1)设置头:

(2)创建根节点:

(3)添加根节点到树控上:

(4)添加子节点:

4.QTableWidget 表格控件

(1)设置列数:

(2)设置水平表头:

(3)设置行数:

(4)设置正文:

5.其他控件 

(1)stackedWidget  栈控件

(2)下拉框   

(3)QLabel 显示图片

(4)QLabel显示动图gif图片

(5)完整代码 


一、布局管理器

1.系统提供的布局控件

这4个为系统给我们提供的布局的控件,但是使用起来不是非常的灵活

2.利用widget做布局

第二种布局方式是利用控件里的widget来做布局,在Containers中

在widget中的控件可以进行水平、垂直、栅格布局等操作,比较灵活。

默认窗口和控件之间有9间隙,可以调整layoutLeftMargine 

利用弹簧进行布局控制:

再布局的同时我们需要灵活运用弹簧的特性让我们的布局更加的美观,下面是一个登陆窗口,利用widget可以搭建出如下登陆界面:

 二、常用控件

1.按钮组

(1)  QpushButton:    常用按钮

(2)  QToolButton:     工具按钮用于显示图片,如图想显示文字

                                   修改风格:   toolButtonstyle ,凸起风格autoRaise

(3)   radioButton:       单选按钮,设置默认 u->rBtnMan->setChecked(true);

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//设置单选按钮   男默认选中ui->rBtnMan->setChecked(true);connect(ui->rBtnWoman,&QRadioButton::clicked,[=](){qDebug() << "选中了女的";});}MainWindow::~MainWindow()
{delete ui;
}

(4)   checkbox:           多选按钮,监听状态,2选中   1当选   0未选中

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//多选按钮  2是选中,0是未选中connect(ui->cBox,&QCheckBox::stateChanged,[=](int state){qDebug() << state;});
}MainWindow::~MainWindow()
{delete ui;
}

2. ListWidget列表容器

  1. QListWidgetItem * item 一行内容
  2. 可以利用addItems一次性添加整个诗内容
  3. 设置居中方式item->setTextAlignment(Qt::AlignHCenter);
  4. ui->listWidget ->addItem ( item )
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QListWidgetItem>
#include <QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//利用listWidget写诗QListWidgetItem * item = new  QListWidgetItem("锄禾日当午");//将一行诗放到listWidget控件中ui->listWidget->addItem(item);item->setTextAlignment(Qt::AlignHCenter);}MainWindow::~MainWindow()
{delete ui;
}

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QListWidgetItem>
#include <QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//QList<QString>QStringList list;list << "锄禾日当午" << "旱地和下土" << "谁知盘中餐" << "粒粒皆辛苦";ui->listWidget->addItems(list);}MainWindow::~MainWindow()
{delete ui;
}

 3.QTreeWidget树控件

(1)设置头:

        ui->treeWidget->setHeaderLabels(QStringList()<< "英雄"<< "英雄介绍");

(2)创建根节点:

        QTreeWidgetItem * liItem = new QTreeWidgetItem(QStringList()<< "力量");

(3)添加根节点到树控上:

        ui->treeWidget->addTopLevelItem(liItem);

(4)添加子节点:

        liItem->addChild(l1);

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//treeWidget树控件使用//设置水平头ui->treeWidget->setHeaderLabels(QStringList() << "英雄" << "英雄介绍");QTreeWidgetItem * liItem = new QTreeWidgetItem(QStringList() << "力量");QTreeWidgetItem * minItem = new QTreeWidgetItem(QStringList() << "敏捷");QTreeWidgetItem * zhiItem = new QTreeWidgetItem(QStringList() << "智力");//加载顶层的节点ui->treeWidget->addTopLevelItem(liItem);ui->treeWidget->addTopLevelItem(minItem);ui->treeWidget->addTopLevelItem(zhiItem);//追加子节点QStringList heroL1;heroL1 << "刚被猪" << "前排坦克,能在吸收伤害的同时造成可观的范围输出";QTreeWidgetItem * l1 = new QTreeWidgetItem(heroL1);liItem->addChild(l1);QStringList heroL2;heroL2 << "船长" << "前排坦克,能肉能输出能控场的全能英雄";QTreeWidgetItem * l2 = new QTreeWidgetItem(heroL2);liItem->addChild(l2);QStringList heroM1;heroM1 << "月骑" << "中排物理输出,可以使用分裂利刃攻击多个目标";QTreeWidgetItem * M1 = new QTreeWidgetItem(heroM1);minItem->addChild(M1);QStringList heroM2;heroM2 << "小鱼人" << "前排战士,擅长偷取敌人的属性来增强自身战力";QTreeWidgetItem * M2 = new QTreeWidgetItem(heroM2);minItem->addChild(M2);QStringList heroZ1;heroZ1 << "死灵法师" << "前排法师坦克,魔法抗性较高,拥有治疗技能";QTreeWidgetItem * Z1 = new QTreeWidgetItem(heroZ1);zhiItem->addChild(Z1);QStringList heroZ2;heroZ2 << "巫医" << "后排辅助法师,可以使用奇特的巫术诅咒敌人与治疗队友";QTreeWidgetItem * Z2 = new QTreeWidgetItem(heroZ2);zhiItem->addChild(Z2);
}MainWindow::~MainWindow()
{delete ui;
}

4.QTableWidget 表格控件

(1)设置列数:

        ui->tableWidget->setColumnCount(3);

(2)设置水平表头:

        ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<< "性别"<< "年龄");

(3)设置行数:

        ui->tableWidget->setRowCount(5);

(4)设置正文:

        ui->tableWidget->setItem(0,0, new QTableWidgetItem("亚瑟"));

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//tableWidget表格控件使用//设置列数ui->tableWidget->setColumnCount(3);//设置水平表头ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<< "性别"<< "年龄");//设置行数ui->tableWidget->setRowCount(5);//设置正文
//    ui->tableWidget->setItem(0,0, new QTableWidgetItem("亚瑟"));
//    ui->tableWidget->setItem(0,1, new QTableWidgetItem("男"));
//    ui->tableWidget->setItem(0,2, new QTableWidgetItem("18"));QStringList nameList;nameList << "亚瑟" << "赵云" << "张飞" << "关羽" << "花木兰";QList<QString> sexList;sexList << "男" << "男" << "男" << "男" << "女";//QList<QString>等价于QStringListfor(int i = 0;i < 5;i++){int col = 0;ui->tableWidget->setItem(i,col++, new QTableWidgetItem(nameList[i]));ui->tableWidget->setItem(i,col++, new QTableWidgetItem(sexList.at(i)));//int 转QStringui->tableWidget->setItem(i,col++, new QTableWidgetItem(QString::number(i+18)));}}MainWindow::~MainWindow()
{delete ui;
}

5.其他控件 

(1)stackedWidget  栈控件

ui->stackedWidget->setCurrentIndex(1);

#include "widget.h"
#include "ui_widget.h"
#include <QMovie>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//栈控件使用//设置默认定位页面ui->stackedWidget->setCurrentIndex(0);//btn1按钮connect(ui->btn1,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(1);});//btn2按钮connect(ui->btn2,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(2);});//btn3按钮connect(ui->btn3,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(0);});}Widget::~Widget()
{delete ui;
}

(2)下拉框   

 ui->comboBox->addItem("奔驰");

#include "widget.h"
#include "ui_widget.h"
#include <QMovie>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//下拉框ui->comboBox->addItem("奔驰");ui->comboBox->addItem("宝马");ui->comboBox->addItem("拖拉机");//点击按钮  选中宝马connect(ui->btnt,&QPushButton::clicked,[=](){//ui->comboBox->setCurrentIndex(2);ui->comboBox->setCurrentText("宝马");});}Widget::~Widget()
{delete ui;
}

(3)QLabel 显示图片

ui->lbl_Image->setPixmap(QPixmap(":/Image/butterfly.png"))

#include "widget.h"
#include "ui_widget.h"
#include <QMovie>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//利用QLabel显示图片ui->lbl_image->setPixmap(QPixmap(":/Image/butterfly.png"));}Widget::~Widget()
{delete ui;
}

(4)QLabel显示动图gif图片

ui->lbl_movie->setMovie(movie);

movie->start();

#include "widget.h"
#include "ui_widget.h"
#include <QMovie>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//利用QLabel显示动态图片QMovie * movie = new QMovie(":/Image/mario.gif");ui->lbl_movie->setMovie(movie);//播放动图movie->start();
}Widget::~Widget()
{delete ui;
}

(5)完整代码 

#include "widget.h"
#include "ui_widget.h"
#include <QMovie>
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//栈控件使用//设置默认定位页面ui->stackedWidget->setCurrentIndex(0);//btn1按钮connect(ui->btn1,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(1);});//btn2按钮connect(ui->btn2,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(2);});//btn3按钮connect(ui->btn3,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(0);});//下拉框ui->comboBox->addItem("奔驰");ui->comboBox->addItem("宝马");ui->comboBox->addItem("拖拉机");//点击按钮  选中宝马connect(ui->btnt,&QPushButton::clicked,[=](){//ui->comboBox->setCurrentIndex(2);ui->comboBox->setCurrentText("宝马");});//利用QLabel显示图片ui->lbl_image->setPixmap(QPixmap(":/Image/butterfly.png"));//利用QLabel显示动态图片QMovie * movie = new QMovie(":/Image/mario.gif");ui->lbl_movie->setMovie(movie);//播放动图movie->start();
}Widget::~Widget()
{delete ui;
}

 

三、自定义控件

在搭建Qt窗口界面的时候,在一个项目中很多窗口,或者是窗口中的某个模块会被经常性的重复使用。一般遇到这种情况我们都会将这个窗口或者模块拿出来做成一个独立的窗口类,以备以后重复使用。

在使用Qt的ui文件搭建界面的时候,工具栏栏中只为我们提供了标准的窗口控件,如果我们想使用自定义控件怎么办?

我们从QWidget派生出一个类SmallWidget,实现了一个自定窗口

1.samllWidget.h

提供 getNum  和 setNum对外接口

#ifndef SAMLLWIDGET_H
#define SAMLLWIDGET_H#include <QWidget>namespace Ui {
class samllWidget;
}class samllWidget : public QWidget
{Q_OBJECTpublic:explicit samllWidget(QWidget *parent = nullptr);~samllWidget();//设置数字void setNum(int num);//获取数字int getNum();private:Ui::samllWidget *ui;
};#endif // SAMLLWIDGET_H

2.samllWidget.cpp

实现功能,改变数字,滑动条跟着移动 ,信号槽监听

#include "samllwidget.h"
#include "ui_samllwidget.h"samllWidget::samllWidget(QWidget *parent) :QWidget(parent),ui(new Ui::samllWidget)
{ui->setupUi(this);//QSpinBox移动   QSlider跟着移动void(QSpinBox:: * spSignal)(int) = &QSpinBox::valueChanged;connect(ui->spinBox,spSignal,ui->horizontalSlider,&QSlider::setValue);// QSlider滑动   QSpinBox数字跟着改变connect(ui->horizontalSlider,&QSlider::valueChanged,ui->spinBox,&QSpinBox::setValue);
}//设置数字
void samllWidget::setNum(int num)
{ui->spinBox->setValue(num);
}
//获取数字
int samllWidget::getNum()
{return ui->spinBox->value();
}samllWidget::~samllWidget()
{delete ui;
}

3.samllWidget.ui 

.ui中 设计 QSpinBox和QSlider 两个控件

Widget中使用自定义控件,拖拽一个Widget,点击提升为,点击添加,点击提升

弹出提升窗口部件对话框

添加要提升的类的名字,然后选择 添加

添加之后,类名会显示到上边的列表框中,然后单击提升按钮,完成操作.

我们可以看到, 这个窗口对应的类从原来的QWidget变成了SmallWidget

再次运行程序,这个widget_3中就能显示出我们自定义的窗口了.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/127048.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手把手教你编写LoadRunner脚本

编写 LoadRunner 脚本需要熟悉脚本语言、业务场景、参数化技术、断言和事务等基础知识。 在实际编写时&#xff0c;可以根据具体测试需求&#xff0c;结合实际情况进行合理的配置和调整。 基本步骤 创建脚本 在 LoadRunner 的 Controller 模块中&#xff0c;创建一个新的测试…

Python之字符串分割替换移除

Python之字符串分割替换移除 分割 split(sepNone, maxsplit-1) -> list of strings 从左至右sep 指定分割字符串&#xff0c;缺省的情况下空白字符串作为分隔符maxsplit 指定分割的次数&#xff0c;-1 表示遍历整个字符串立即返回列表 rsplit(sepNone, maxsplit-1) -> …

Pytorch目标分类深度学习自定义数据集训练

目录 一&#xff0c;Pytorch简介&#xff1b; 二&#xff0c;环境配置&#xff1b; 三&#xff0c;自定义数据集&#xff1b; 四&#xff0c;模型训练&#xff1b; 五&#xff0c;模型验证&#xff1b; 一&#xff0c;Pytorch简介&#xff1b; PyTorch是一个开源的Python机…

Angular学习笔记:路由

本文是自己的学习笔记&#xff0c;主要参考资料如下。 - B站《Angular全套实战教程》&#xff0c;达内官方账号制作&#xff0c;https://www.bilibili.com/video/BV1i741157Fj?https://www.bilibili.com/video/BV1R54y1J75g/?p32&vd_sourceab2511a81f5c634b6416d4cc1067…

【红日靶场】vulnstack3-完整渗透过程

系列文章目录 【红日靶场】vulnstack1-完整渗透过程 【红日靶场】vulnstack2-完整渗透过程 【红日靶场】vulnstack3-完整渗透过程 文章目录 系列文章目录基本信息环境配置开始渗透信息收集暴力破解漏洞利用绕过内网信息收集尝试上线msf上线msf横向移动msf 传达会话给cs横向到域…

DNSlog 注入简单笔记

无回显的盲注可以想办法回显到 dns 日志上&#xff1a; 1、打开 http://www.dnslog.cn 获取域名 2、注入&#xff1a; ?id1 and (select load_file(concat(//,(select database()),.3.mw0gxd.dnslog.cn/a)))-- 3、点击刷新得到回显&#xff1a;

接口测试复习Requests PyMysql Dubbo

一。基本概念 接口概念&#xff1a;系统与系统之间 数据交互的通道。 接⼝测试概念&#xff1a;校验 预期结果 与 实际结果 是否⼀致。 特征&#xff1a; 测试⻚⾯测试发现不了的问题。&#xff08;因为&#xff1a;接⼝测试 绕过前端界⾯。 &#xff09; 符合质量控制前移理…

linux系统中常见注册函数的使用方法

大家好&#xff0c;今天给大家分享一下&#xff0c;linux系统中常见的注册函数register_chrdev_region()、register_chrdev()、 alloc_chrdev_region()的使用方法​。 一、函数包含的头文件&#xff1a; 分配设备编号&#xff0c;注册设备与注销设备的函数均在fs.h中申明&…

Django实战项目-学习任务系统-用户登录

第一步&#xff1a;先创建一个Django应用程序框架代码 1&#xff0c;先创建一个Django项目 django-admin startproject mysite将创建一个目录&#xff0c;其布局如下&#xff1a;mysite/manage.pymysite/__init__.pysettings.pyurls.pyasgi.pywsgi.py 2&#xff0c;再创建一个…

pyqt5使用经验总结

pyqt5环境配置注意&#xff1a; 安装pyqt5 pip install PyQt5 pyqt5-tools 环境变量-创建变量名&#xff1a; 健名&#xff1a;QT_QPA_PLATFORM_PLUGIN_PATH 值为&#xff1a;Lib\site-packages\PyQt5\Qt\plugins pyqt5经验2&#xff1a; 使用designer.exe进行设计&#xff1…

网络爬虫指南

一、定义 网络爬虫&#xff0c;是按照一定规则&#xff0c;自动抓取网页信息。爬虫的本质是模拟浏览器打开网页&#xff0c;从网页中获取我们想要的那部分数据。 二、Python为什么适合爬虫 Python相比与其他编程语言&#xff0c;如java&#xff0c;c#&#xff0c;C&#xff…

通过融合UGV的地图信息和IMU的惯性测量数据,实现对车辆精确位置和运动状态的估计和跟踪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…