【Qt学习】05:自定义封装界面类

这篇具有很好参考价值的文章主要介绍了【Qt学习】05:自定义封装界面类。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

自定义封装界面类


1.QListWidget

//1.QListWidget
//方式1
QListWidgetItem *item1 = new QListWidgetItem("this is the first line.");
item1->setTextAlignment(Qt::AlignHCenter);
ui->listWidget->addItem(item1);
QListWidgetItem *item2 = new QListWidgetItem("this is the second line.");
item2->setTextAlignment(Qt::AlignHCenter);
ui->listWidget->addItem(item2);
QListWidgetItem *item3 = new QListWidgetItem("this is the third line.");
item3->setTextAlignment(Qt::AlignHCenter);
ui->listWidget->addItem(item3);
//方式2 list<string>
QStringList list;
for (int i = 0; i < 4; ++i) {
    QString str;
    str.sprintf("this is the %dth sentence.", i);
    list << str;
}
ui->listWidget->addItems(list);

2.QTreeWidget

//2.QTreeWidget
//header 设置表头
ui->treeWidget->setHeaderLabels(QStringList() << "英雄" << "英雄介绍");
//root 设置根节点
QTreeWidgetItem *titem1 = new QTreeWidgetItem(QStringList() << "力量");
QTreeWidgetItem *titem2 = new QTreeWidgetItem(QStringList() << "敏捷");
QTreeWidgetItem *titem3 = new QTreeWidgetItem(QStringList() << "智力");
ui->treeWidget->addTopLevelItem(titem1);
ui->treeWidget->addTopLevelItem(titem2);
ui->treeWidget->addTopLevelItem(titem3);
//leaf 设置叶子节点
QStringList tlist;
tlist << "刚被猪" << "前排坦克 能在吸收伤害的同时可观的范围输出";
QTreeWidgetItem *titem1_1 = new QTreeWidgetItem(tlist);
tlist.clear();
tlist << "船长" << "前排坦克 能肉能输出能控场的全能英雄";
QTreeWidgetItem *titem1_2 = new QTreeWidgetItem(tlist);
tlist.clear();

tlist << "月骑" << "中排物理输出 可以使用分裂利刃攻击多个目标";
QTreeWidgetItem *titem2_1 = new QTreeWidgetItem(tlist);
tlist.clear();
tlist << "小鱼人" << "前排战士 擅长偷取敌人属性来增强自身战斗力";
QTreeWidgetItem *titem2_2 = new QTreeWidgetItem(tlist);
tlist.clear();

tlist << "死灵法师" << "前排法师坦克 魔法抗性较高 拥有治疗技能";
QTreeWidgetItem *titem3_1 = new QTreeWidgetItem(tlist);
tlist.clear();
tlist << "巫医" << "后排辅助法师 可以使用奇特的巫术诅咒敌人与治疗队友";
QTreeWidgetItem *titem3_2 = new QTreeWidgetItem(tlist);
tlist.clear();

titem1->addChild(titem1_1);
titem1->addChild(titem1_2);
titem2->addChild(titem2_1);
titem2->addChild(titem2_2);
titem3->addChild(titem3_1);
titem3->addChild(titem3_2);

3.QTableWidget

//3.QTableWidget
int col = 3;
int row = 5;
//设置列的数目
ui->tableWidget->setColumnCount(col);
//设置水平表头
ui->tableWidget->setHorizontalHeaderLabels(QStringList() << "name" << "gentle" << "age");
//设置行的数目
ui->tableWidget->setRowCount(row);
//设置正文
//ui->tableWidget->setItem(0, 0, new QTableWidgetItem("tom"));
//ui->tableWidget->setItem(0, 1, new QTableWidgetItem("male"));
//ui->tableWidget->setItem(0, 2, new QTableWidgetItem("18"));
QStringList nameList, gentleList;
nameList << "tom" << "jack" << "lucy" << "lily" << "bob";
gentleList << "male" << "male" << "female" << "female" << "male";
for (int i = 0; i < row; ++i) {
    int idx = 0;
    ui->tableWidget->setItem(i, idx++, new QTableWidgetItem(nameList[i]));
    ui->tableWidget->setItem(i, idx++, new QTableWidgetItem(gentleList.at(i)));
    ui->tableWidget->setItem(i, idx++, new QTableWidgetItem(QString::number(i + 18)));
}

4.StackedWidget

//4.StackedWidget
    ui->stackedWidget->setCurrentIndex(0);
    connect(ui->btn_scrollbtns, &QPushButton::clicked, this, [=](){
        ui->stackedWidget->setCurrentIndex(2);
    });
    connect(ui->btn_brosers, &QPushButton::clicked, this, [=](){
        ui->stackedWidget->setCurrentIndex(1);
    });
    connect(ui->btn_groups, &QPushButton::clicked, this, [=](){
        ui->stackedWidget->setCurrentIndex(0);
    });
}

5.Others

//combo box
ui->comboBox->addItem("奔驰");
ui->comboBox->addItem("宝马");
ui->comboBox->addItem("保时捷");
connect(ui->btn_autoselect, &QPushButton::clicked, this, [=](){
    ui->comboBox->setCurrentIndex(2);
    //ui->comboBox->setCurrentText("保时捷");
});
//QLabel1
ui->label_img->setPixmap(QPixmap(":/res/img/backgroud.jpg"));
ui->label_img->setScaledContents(true);
//QLabel2
QMovie *gif = new QMovie(":/res/img/xiongmaoren.gif");
ui->label_img_2->setMovie(gif);
gif->start();

6.自定义封装界面类-显示效果

创建自定义封装界面类步骤一般如下,

(1)添加设计师界面类

添加新文件,Qt->设计师界面类,

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

根据需要选择界面模板即可,这里选择Widget作为界面模板进行创建,

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

根据语义为自定义的界面类确定类名,

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

选择好会后qtcreator会自动的添加 .h.cpp.ui 文件,并可以在新建的 .ui 文件中设计自定义的控件,

(2)在ui中设计自定义界面

在ui界面中设计好自定义控件的界面,如下所示:

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

(3)在需要使用的界面中添加

在需要使用的界面中添加,自定义控件类的父类作为占位控件,详细操作如下:

首先观察到自定义的界面类属于QWidget类型,

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

开始向需要使用到自定义控件界面类的ui文件中,添加一个自定义控件的父类(这里添加的为Widget控件/QWidget类),如下图所示:

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

(4)提升为自定义控件的类

在ui界面中右键wedget控件,将其提升为自定义控件的类SliderBar,

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

在 “提升的窗口部件” 窗口中填写提升的类名称(此处为SliderBar),并勾选上全局包含后(这样再次需要选择提升时就可以快速选择),点击右下角的添加按钮,

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

成功添加到提升的类列表中,如下所示:

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

点击列表中的SliderBar后并点击提升按钮,发现原来为QWidget的占位用的控件,已经被提升为了自定义控件类(SliderBar),

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

(5)测试显示效果

直接运行程序显示Mainwindows,在占位控件处已经显示出了自定义控件之前设计的样式,如下图所示:

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

7.自义封装界面类-功能实现

经过前面ui界面的设计与类的提升,自定义控件的显示已经完成,但是在滑动slider控件时并没有对应的数值出现变化,

为了实现相应的控件逻辑功能,下面还需要编写 .h.cpp 文件内容进行功能上的自定义实现,步骤如下所示:

(1)具体需要的功能分析

SliderBar控件类需要实现的功能,分为两条逻辑,

  1. 功能1:相应的,在修改左侧spinBox的数值时,右侧的slider按钮要能够自己根据数值滑动起来,
  2. 功能2:在滑动slider按钮时,左侧spinBox的数字要能够对应上具体的数值,
(2)功能1实现

在修改spinBox数值时控件会发出一些信号,只要捕获到这些信号就能够实现,修改spinBox数值的同时右侧的slider能够自己滑动,

在QT的帮组手册中可以查询到关于QSpinBox数值修改时,发出的一些信号相关的signal:

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

可以发现,当SpinBox控件数值修改时会触发两个同名重载的信号函数,(这意味着在利用信号与槽机制实现对应的功能时,需要利用函数指针指向指定的函数)

//重载的两个信号函数
void valueChanged(const QString &text)
void valueChanged(int i)
sliderbar.cpp

修改 sliderbar.cpp 中的代码,实现当spinBox数值被修改时,slider可以自动移动的功能,根据QSlider控件的槽函数修改其value值:

#include "sliderbar.h"
#include "ui_sliderbar.h"

SliderBar::SliderBar(QWidget *parent):QWidget(parent), ui(new Ui::SliderBar) {
    ui->setupUi(this);
    //QSpinBox数值修改 QSlider自动滑动
    void(QSpinBox::*funcptr)(int) = &QSpinBox::valueChanged;
    connect(ui->spinBox, funcptr, ui->horizontalSlider, &QSlider::setValue);
}

SliderBar::~SliderBar() {
    delete ui;
}
(3)功能2实现

在滑动slider按钮时,slider控件会发出一些信号,只要捕获到这些信号就能够实现,在滑动slider的同时修改左侧spinBox中的数值,

在QT的帮组手册中可以查询到关于QSlider滑动时,发出的一些信号相关的signal:

【Qt学习】05:自定义封装界面类,Qt客户端,qt,学习,开发语言

可以发现,当Slider控件被滑动时会触发信号函数,

//信号函数
void valueChanged(int value)
sliderbar.cpp

同样修改 sliderbar.cpp 中的代码,实现当slider移动时spinBox数值可以自动修改的功能,根据QSpinBox控件的槽函数修改其value值:

#include "sliderbar.h"
#include "ui_sliderbar.h"

SliderBar::SliderBar(QWidget *parent):QWidget(parent), ui(new Ui::SliderBar) {
    ui->setupUi(this);
    //QSpinBox数值修改 QSlider自动滑动
    void(QSpinBox::*funcptr)(int) = &QSpinBox::valueChanged;
    connect(ui->spinBox, funcptr, ui->horizontalSlider, &QSlider::setValue);
    //QSlider滑动 QSpinBox数值跟着改变
    connect(ui->horizontalSlider, &QSlider::valueChanged, ui->spinBox, &QSpinBox::setValue);
}

SliderBar::~SliderBar() {
    delete ui;
}

到此自定义控件的全部功能就实现完毕了,

(4)对外预留接口

对外预留接口为可能需要提供的功能留下余地,setValue、getValue函数,文章来源地址https://www.toymoban.com/news/detail-678286.html

sliderbar.h
#ifndef SLIDERBAR_H
#define SLIDERBAR_H

#include <QWidget>

namespace Ui {
class SliderBar;
}

class SliderBar : public QWidget
    Q_OBJECT
public:
    explicit SliderBar(QWidget *parent = nullptr);
    ~SliderBar();
    void setValue(int value);
    int getValue();
private:
    Ui::SliderBar *ui;
};

#endif // SLIDERBAR_H
sliderbar.cpp
#include "sliderbar.h"
#include "ui_sliderbar.h"

SliderBar::SliderBar(QWidget *parent):QWidget(parent), ui(new Ui::SliderBar) {
    ui->setupUi(this);
    //QSpinBox数值修改 QSlider自动滑动
    void(QSpinBox::*funcptr)(int) = &QSpinBox::valueChanged;
    connect(ui->spinBox, funcptr, ui->horizontalSlider, &QSlider::setValue);
    //QSlider滑动 QSpinBox数值跟着改变
    connect(ui->horizontalSlider, &QSlider::valueChanged, ui->spinBox, &QSpinBox::setValue);
}

void SliderBar::setValue(int value) { ui->spinBox->setValue(value); }

int SliderBar::getValue() { return ui->spinBox->value(); }

SliderBar::~SliderBar() {
    delete ui;
}

到了这里,关于【Qt学习】05:自定义封装界面类的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QTday05(TCP的服务端客户端通信)

    pro文件需要导入  network 头文件: widget.cpp ui: 头文件 widget.cpp ui: 运行结果:客户端连接之后可以成功发送信息 今日思维导图: 代码: page2.h: widget.h: main.cpp: page2.cpp: widget.cpp: page2.ui: widget.ui: 运行结果:

    2024年02月07日
    浏览(38)
  • 【libevent】http客户端3:简单封装

    LibEventHttp

    2024年02月15日
    浏览(48)
  • python-kafka客户端封装

    本文对python的kafka包做简单封装,方便kafka初学者使用。包安装: kafka_helper.py kafka_test.py Kafka入门,这一篇就够了(安装,topic,生产者,消费者)

    2024年02月09日
    浏览(38)
  • Windows后台运行并启动Frpc客户端界面

    frp搭建内网穿透可以看我另外一篇 启动frps服务端 3.1.先去下载NSSM服务。 地址:http://www.nssm.cc/download NSSM 是一个服务封装程序,它可以将普通exe程序封装成服务,使之像windows服务一样运行。 我的是win64,找对应的系统 然后把nssm.exe这个文件放到frpc同一个目录上 3.2.启动nssm 先以管

    2024年02月06日
    浏览(43)
  • 在Go项目中二次封装Kafka客户端功能

    在上一章节中,我利用Docker快速搭建了一个Kafka服务,并测试成功Kafka生产者和消费者功能,本章内容尝试在Go项目中对Kafka服务进行封装调用, 实现从Kafka自动接收消息并消费。 在本文中使用了Kafka的一个高性能开源库Sarama, Sarama是一个遵循MIT许可协议的Apache Kafka Go客户端库, 该开源

    2024年02月07日
    浏览(59)
  • 一个基于Kafka客户端封装的工具,Kafka开发效率神器

    GitHub源码https://github.com/zhangchuangiie/SimpleKafka 一个基于Kafka客户端封装的工具,Kafka开发效率神器 封装了常用的Kafka客户端操作,无需维护配置,无需初始化客户端,真正实现了一行代码调用 将连接池的维护封装在工具类里面,多线程使用也无需维护客户端集合 只需要集成1个

    2024年02月05日
    浏览(52)
  • QT TCP客户端实现

    QTcpSocket实例首先是通过connectToHost()尝试连接到服务器,需要指定服务器的IP地址和端口。connectToHost()是异步方式连接服务器,不会阻塞程序运行,连接后发射connected()信号。 如果需要使用阻塞方式连接服务器,则使用waitForConnected()函数阻塞程序运行,直到连接成功或失败。

    2024年02月09日
    浏览(47)
  • QT实现客户端断开连接

    Widget.cpp Widget.h main.cpp

    2024年04月14日
    浏览(56)
  • QT客户端开发的应用场景

    QT 是一跨平台应用程序开发框架,支持多种操作系统,包括 Windows、macOS、Linux、Android、iOS 和嵌入式系统等。这使得 QT 非常适合开发需要在多种平台上运行的应用程序。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作。 QT 提供了一套完整的开发工具和

    2024年04月29日
    浏览(40)
  • Qt 8. UDP客户端通信

    1. 代码 2. 效果 以上代码可以实现UDP收发功能。

    2024年02月13日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包