Qt学习之Qt基础入门(下)

已于 2022-01-25 15:17:23 修改
阅读量2.5k 收藏 33
点赞数 9
分类专栏： Qt 文章标签： qt
于 2021-10-09 12:27:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RongLin02/article/details/120668605
版权
本文详细介绍了如何在Qt中创建自定义控件，包括将一个Label和进度条结合，实现开关按钮功能，并展示了如何在主UI中应用自定义控件。此外，还讲解了Qt中的事件处理，如鼠标事件、事件分发和事件过滤器，并提供了定时器的两种使用方法。最后，简单介绍了文件操作和QPainter绘图。通过这些内容，读者可以深入理解Qt的交互设计和事件机制。
摘要由CSDN通过智能技术生成

1. 前言

前两篇博客简单的阐述了一下Qt的入门用法，这篇博客继续跟着视频学习。

Qt入门系列：
Qt学习之C++基础
Qt学习之Qt安装
Qt学习之Qt基础入门(上)
Qt学习之Qt基础入门(中)
Qt学习之Qt基础入门(下)

本文原创，创作不易，转载请注明！！！
本文链接
个人博客: https://ronglin.fun/archives/222
PDF链接：见博客网站
CSDN: https://blog.csdn.net/RongLin02/article/details/120668605

2. 自定义控件封装

有时候，我们希望一个控件是我们自己的设计的，比如将一个Label和进度条结合起来作为一个整体来使用
我们将一个Widget面板中加入自己设计好的控件，然后将面板作为 一个整体插入总ui中。
一个自定义功能：
设计两个按钮，为 开启–关闭 互补 状态，当点击开始按钮时，关闭按钮可用，开始按钮不可点击，当点击关闭按钮时，开启按钮可用，关闭按钮不可点击

2.1. 创建一个ui

在这里插入图片描述
然后就是选择基类，因为我们是在Widget面板上进行自定义，所以就选择Widget
然后就是自定义的类，取名叫做SwitchButtonWidget
在这里插入图片描述
然后下一步，完成就行了
之后会生成三个文件，一个是ui文件，然后就是类的.h .cpp文件。
我们先在ui界面设计控件，我这里就是两个按键，然后用了垂直布局，同时调整Widget面板大小
在这里插入图片描述
然后就在类中设计其逻辑功能，当点击开始按钮时，关闭按钮变成可用，开始按钮变得不可点击，当点击关闭按钮时，状态相反。
在文件switchbuttonwidget.cpp中

#include "switchbuttonwidget.h"
#include "ui_switchbuttonwidget.h"

SwitchButtonWidget::SwitchButtonWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::SwitchButtonWidget)
{
    ui->setupUi(this);
    ui->pushButton_2->setEnabled(false); //关闭按钮默认不可用
    //当点击开始按钮的时候
    connect(ui->pushButton,&QPushButton::clicked,[=](){
       ui->pushButton->setEnabled(false);   //关闭按钮设置可用
       ui->pushButton_2->setEnabled(true);  //开始按钮设置不可用
    });
    //当点击关闭按钮的时候
    connect(ui->pushButton_2,&QPushButton::clicked,[=](){
       ui->pushButton->setEnabled(true);   //关闭按钮设置不可用
       ui->pushButton_2->setEnabled(false);  //开始按钮设置可用
    });
}

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

到此，自定义的控件设计完毕

2.2. 运用自定义控件

设计完毕，就要在主ui中应用控件
因为我们的自定义控件的基类是Widget，所以我们在主ui中，拖入一个Widget面板，作为我们自定义框架的区域
然后 右键 -> 提升为
在这里插入图片描述
然后我们将这个普通的widget提升为我们自己自定义的控件面板，所以说提升的类名称就是刚才定义好的SwitchButtonWidget类，这里注意大小写，.h文件全是小写的，而类名是大小写都有的，然后全局包含，全局包含勾选的话就是以后用到这个自定义控件的时候可以直接使用，因为我们这里只用一次，就不勾选了
在这里插入图片描述
然后，点击 添加 ，然后点击 提升
之后虽然在ui中看不出来，但是在右侧，widget类已经变成SwitchButtonWidget类了，这就说明已经提升成功，运行查看结果
在这里插入图片描述
效果和预期一样，应用成功，只有一点不太方便的是，当提升之后，主ui中只是显示一个框框，不显示自定义控件的内容

3. Qt中的事件

事件和Java中类似，当用户对程序互交的时候，就会产生很多事件，例如点击鼠标，键盘输入，改变窗口大小等等

3.1. 鼠标事件

鼠标进入事件 enterEvent
鼠标离开事件 leaveEvent
鼠标按下 mousePressEvent ( QMouseEvent event)
鼠标释放 mouseReleaseEvent
鼠标移动 mouseMoveEvent
设置鼠标追踪方法：setMouseTracking(true);
同时在事件中封装了事件的状态，比如获取鼠标移动的坐标

event->x();    //x坐标
event->y();     //y坐标

而且也可以判断左右键，比如

if(event->button() == Qt::LeftButton)
{
    qDebug() << "点击了鼠标左键";
}
else if(event->button() == Qt::RightButton)
{
    qDebug() << "点击了鼠标右键";
}

同时，还有一个buttons方法可以同时判断多个，用法稍有不同

if(event->buttons() & Qt::LeftButton )
{
    qDebug() << "点击了鼠标左键";
}

可以用event->buttons()判断组合按键 判断move时候的左右键，要结合 & 操作符

小tips：
格式化字符串用法：QString( "%1 %2 ").arg( 111 ).arg(222);

3.2. event事件

在一些常用事件的上边还有一个层event事件，实现事件分发，返回值是bool，如果返回是true就代表用户要处理这个事件，不在向下分发。
函数原型是

bool event( QEvent * ev);

主要用于事件的分发，也可以做拦截操作，但是不建议，用法如下：

bool MyWidget::event(QEvent *e)
{
    //如果是鼠标按下 ，在event事件分发中做拦截操作
    if(e->type() == QEvent::MouseButtonPress)
    {
        QMouseEvent * ev  = static_cast<QMouseEvent *>(e);
        QString str = QString( "Event函数中：：鼠标按下了 x = %1   y = %2  globalX = %3 globalY = %4 " ).arg(ev->x()).arg(ev->y()).arg(ev->globalX()).arg(ev->globalY());
        qDebug() << str;
        
        return true; //true代表用户自己处理这个事件，不向下分发
    }
    //其他事件 交给父类处理  默认处理
    return QLabel::event(e);
}

事件过滤器
同时在event之上还有一个事件过滤器，也可以做拦截，要重写eventfilter函数
在程序将时间分发到事件分发器前，可以利用过滤器做拦截
步骤
1、给控件安装事件过滤器

ui->label->installEventFilter(this);

2、重写 eventFilter函数 （obj ， ev）

bool MyWidget::eventFilter(QObject * obj , QEvent * e)
{
    if(obj == ui->label)
    {
        if(e->type() == QEvent::MouseButtonPress)
        {
            QMouseEvent * ev  = static_cast<QMouseEvent *>(e);
            QString str = QString( "事件过滤器中：：鼠标按下了 x = %1   y = %2  globalX = %3 globalY = %4 " ).arg(ev->x()).arg(ev->y()).arg(ev->globalX()).arg(ev->globalY());
            qDebug() << str;
            return true; //true代表用户自己处理这个事件，不向下分发
        }
    }

    //其他默认处理
    return QWidget::eventFilter(obj,e);
}

关系如下图：
在这里插入图片描述

4. 定时器

定时器是一个很常用的用法，比如3s后关闭窗口等等
定时器有两种用法

4.1. 时间事件

3.1 利用事件 void timerEvent ( QTimerEvent * ev)
3.2 启动定时器 startTimer( 1000) 毫秒单位
3.3 timerEvent 的返回值是定时器的唯一标示 可以和ev->timerId 做比较

用法如下：
在.h文件的public下，先定义要重写定时器的事件，然后如果要有多个定时器，也要指定标识，例如这里有两个

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

    //重写定时器的事件
    void timerEvent(QTimerEvent *);

    int id1; //定时器1的唯一标示
    int id2; //定时器2的唯一标示

然后在.cpp文件中，先初始化定时器标识，比如是要1s还是2s，然后在timerEvent中判断即可

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    //启动定时器
    id1 = startTimer(1000); //参数1  间隔  单位 毫秒
    id2 = startTimer(2000);
}

void Widget::timerEvent(QTimerEvent * ev)
{
    if(ev->timerId() == id1)
    {
        static int num = 1;
        //label2 每隔1秒+1
        ui->label_2->setText(  QString::number(num++));
    }

    if(ev->timerId() == id2)
    {
        //label3  每隔2秒 +1
        static int num2 = 1;
        ui->label_3->setText(  QString::number(num2++));
    }
}

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

4.2. QTimer

只在一个事件中写多个定时器实在不方便，所以Qt提供了一个QTimer定时器类
利用定时器类 QTimer
创建定时器对象 QTimer * timer = new QTimer(this)
启动定时器 timer->start(毫秒)
每隔一定毫秒，发送信号 timeout ,进行监听
暂停 timer->stop
用法如下，用connect函数，当定时器到时间时要执行的操作

    //定时器第二种方式
    QTimer * timer = new QTimer(this);
    //启动定时器
    timer->start(500);

    connect(timer,&QTimer::timeout,[=](){
        static int num = 1;
        //label4 每隔0.5秒+1
        ui->label_4->setText(QString::number(num++));
    });
    //点击暂停按钮 实现停止定时器
    connect(ui->btn,&QPushButton::clicked,[=](){
        timer->stop();
    });

5. 画图

5.1. QPainter 绘图

绘图事件 void paintEvent()
声明一个画家对象 QPainter painter(this) this指定绘图设备
可以画线、画圆、画矩形、画文字
设置画笔 QPen 设置画笔宽度 、风格，设置画刷 QBrush 设置画刷 风格
直接看代码用法，需要注意的时，如果需要重画的时候，调用update();即可，就能重画paintEvent内的内容
有关具体 用法可查询API

void Widget::paintEvent(QPaintEvent *)
{
    //实例化画家对象  this指定的是绘图设备
    QPainter painter(this);

    //设置画笔
    QPen pen(QColor(255,0,0));
    //设置画笔宽度
    pen.setWidth(3);
    //设置画笔风格
    pen.setStyle(Qt::DotLine);
    //让画家 使用这个笔
    painter.setPen(pen);


    //设置画刷
    QBrush brush(Qt::cyan);
    //设置画刷风格
    brush.setStyle(Qt::Dense7Pattern);
    //让画家使用画刷
    painter.setBrush(brush);

    painter.drawLine(QPoint(0,0) , QPoint(100,100));    //画线
    painter.drawEllipse( QPoint(100,100) , 50,50);    //画圆 椭圆
    painter.drawRect(QRect(20,20,50,50));    //画矩形
    painter.drawText(QRect(10,200,150,50) , "好好学习，天天向上");    //画文字

}

5.2. QPainter高级设置

抗锯齿 效率低

painter.setRenderHint(QPainter::Antialiasing);

对画家进行移动
painter.translate(100,0);
保存状态 save
还原状态 restore
如果想手动调用绘图事件 利用update
利用画家画图片 painter.drawPixmap( x，y，QPixmap( 路飞) )
用法见下，不再仔细说明

void Widget::paintEvent(QPaintEvent *)
{
    //高级设置 ///

    QPainter painter(this);
    painter.drawEllipse(QPoint(100,50) , 50,50);
    //设置 抗锯齿能力  效率较低
    painter.setRenderHint(QPainter::Antialiasing);
    painter.drawEllipse(QPoint(200,50) , 50,50);

    画矩形
    painter.drawRect(QRect(20,20,50,50));

    //移动画家
    painter.translate(100,0);

    //保存画家状态
    painter.save();

    painter.drawRect(QRect(20,20,50,50));

    painter.translate(100,0);

    //还原画家保存状态
    painter.restore();

    painter.drawRect(QRect(20,20,50,50));


    /利用画家 画资源图片 ///
//     QPainter painter(this);
//     QPixmap pix = QPixmap(":/Image/Luffy.png");
//    //如果超出屏幕 从0开始
//     if(posX >= this->width())
//     {
//         posX = -pix.width();
//     }
//     painter.drawPixmap(posX,0,pix);

}

5.3. QPaintDevice绘图设备

QPixmap QImage QBitmap(黑白色) QPicture QWidget
有关绘图设备这里不过多说明，API中有详细的说明

5.3.1. QPixmap

QPixmap 对不同平台做了显示的优化
QPixmap pix( 300,300) pix.fill( 填充颜色 )
利用画家 往pix上画画 QPainter painter( & pix)
保存 pix.save( “路径”)

5.3.2. Qimage

Qimage 可以对像素进行访问
使用和QPixmap差不多 QImage img(300,300,QImage::Format_RGB32);
其他流程和QPixmap一样
可以对像素进行修改 img.setPixel(i,j,value);

5.3.3. QPicture

QPicture 记录和重现 绘图指令
QPicture pic
painter.begin(&pic);
保存 pic.save( 任意后缀名 )
重现 利用画家可以重现painter.drawPicture(0,0,pic);

6. 文件操作

文件操作十分常见了，Qt的文件操作和C++的类似，十分简便，不像Java文件操作复杂

6.1. QFile

对文件进行读写操作
QFile进行读写操作
QFile file( path 文件路径)

6.1.1. 读

file.open(打开方式) QIODevice::readOnly
全部读取 file.readAll() 按行读 file.readLine() atend()判断是否读到文件尾
认支持编码格式 utf-8
利用编码格式类 指定格式 QTextCodeC
QTextCodec * codec = QTextCodec::codecForName(“gbk”);
//ui->textEdit->setText( codec->toUnicode(array) );
文件对象关闭 close

6.1.2. 写

file.open( QIODevice::writeOnly / Append)
file.write(内容)
file.close 关闭

6.2. QFileInfo

读取文件信息
QFileInfo info(路径)
qDebug() << “大小：” << info.size() << " 后缀名：" << info.suffix() << " 文件名称："<<info.fileName() << " 文件路径："<< info.filePath();
qDebug() << “创建日期：” << info.created().toString(“yyyy/MM/dd hh:mm:ss”);
qDebug() << “最后修改日期：”<<info.lastModified().toString(“yyyy-MM-dd hh:mm:ss”);

用法

#include "widget.h"
#include "ui_widget.h"
#include <QFileDialog>
#include <QFile>
#include <QTextCodec>
#include <QFileInfo>
#include <QDebug>
#include <QDateTime>
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    //点击选取文件按钮，弹出文件对话框

    connect(ui->pushButton,&QPushButton::clicked,[=](){
        QString path = QFileDialog::getOpenFileName(this,"打开文件","C:\\Users\\Desktop");
        //将路径放入到lineEdit中
        ui->lineEdit->setText(path);

        //编码格式类
        //QTextCodec * codec = QTextCodec::codecForName("gbk");

        //读取内容 放入到 textEdit中
        // QFile默认支持的格式是 utf-8
        QFile file(path); //参数就是读取文件的路径
        //设置打开方式
        file.open(QIODevice::ReadOnly);

        //QByteArray array = file.readAll();

        QByteArray array;
        while( !file.atEnd())
        {
            array += file.readLine(); //按行读
        }

        //将读取到的数据 放入textEdit中
        ui->textEdit->setText(array);
        //ui->textEdit->setText( codec->toUnicode(array)  );

        //对文件对象进行关闭
        file.close();


        //进行写文件
//        file.open(QIODevice::Append); //用追加方式进行写
//        file.write("啊啊啊啊啊");
//        file.close();



        //QFileInfo 文件信息类
        QFileInfo info(path);

        qDebug() << "大小：" << info.size() << " 后缀名：" << info.suffix() << " 文件名称："<<info.fileName() << " 文件路径："<< info.filePath();
        qDebug() << "创建日期：" << info.created().toString("yyyy/MM/dd hh:mm:ss");
        qDebug() << "最后修改日期："<<info.lastModified().toString("yyyy-MM-dd hh:mm:ss");
    });

}

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

7. 总结

至此，Qt基础入门结束，跟着视频学也挺好的，=w=

榕林子
关注
  • 9
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt入门教程100篇（已完结）
小鱼酱的博客
06-09 13万+
Qt5入门教程，Qt6入门教程。包含了： Qt环境搭建篇、Qt数据类型篇、Qt中STL篇、Qt核心篇、Qt核心对象QObject篇、Qt基础控件篇、Qt对话框篇、Qt高级控件篇、Qt数据模型篇、QSS篇、Qt文件篇 、Qt硬件编程、Qt的一些demo、Qt项目开发篇。......
QT基础入门
coloursong的博客
02-17 497
QT具有模块化设计和控件或元素的可重用性的特点（例：产生的一个按钮，也就是一个模块内的语句会用即可，无需仔细考虑细节）QT提供信号（signal）和槽（slot）QT是C++图形用户界面应用程序开发框架。实现计算器，需要用到栈，即STL里的容器。QT易拓展，且允许真正地组件编程。可开发GUI程序/非GUI程序。先进入D盘，然后回车，输入cd。如何实现响应:通过信号与槽实现。QT-Creater开发工具。QT是面向对象的框架。2.控件间的相互通信。可自己创建想要的控件。写QT代码的开发工具。
QT学习总结
m0_65739284的博客
09-23 160
自己理解核心: QT主要是绑定信号和槽,利用按键触发的事件或信号调用函数解决问题的东西 按键不多,但是按键的一些方法复杂繁多,反正我记住的基本为零.
Qt的基本使用技巧
Brynn_long的博客
09-23 614
1、clicked()--点击（按下）信号；released()--释放（松开）按钮信号；textChanged()--文本改变信号；3、statChanged(int sel)--复选按钮选中信号（选中为2，否则为0）。4、选择按钮：QRadioButton--单选按钮，QCheckBox--复选按钮；3、输入框：QlineEdit--单行输入，QTextEdit--多行输入；
从新手小白入门Qt编程(Windows 10)
07-11
Qt是由Qt Company开发的主流跨平台C++图形用户界面应用程序开发框架。Qt是面向对象的框架、容易扩展，并且允许真正地组件编程，既可以开发GUI程序，也可用于控制台工具和服务器。其跨平台集成开发环境Qt Creator 全面支持Windows ，mac、Linux、iOS、Android、WP等。本课程主要帮助学员熟练掌握Qt 5.9框架下的C++开发，通过核心类的详细讲解与源码分析，以及所有UI控件的讲解演示，迅速帮助学员达到企业级Qt开发工程师的能力！
Qt学习基础
qq_47812908的博客
02-03 1291
了解QT
Qt基础入门
weixin_44954230的博客
10-05 147
本文章主要是介绍Qt框架的一些基本特性, 主要内容包括: Qt的特点, Qt中的模块划分, Qt项目文件介绍, Qt中的窗口类, Qt窗口的坐标体系, Qt框架的内存回收机制。
《Qt学习之路2》源码
12-11
**Qt入门** 首先，对于初学者来说，理解Qt的基本概念是至关重要的。Qt库提供了许多类和对象，如QWidget、QMainWindow和QGraphicsView等，它们是构建用户界面的基础。学习如何创建窗口、添加控件（如按钮、文本框等）...
Qt之C++开发框架基础入门-Markdown文档.zip
最新发布
05-21
Qt之C++开发框架基础入门：探索编程的新世界 亲爱的编程爱好者，你是否渴望在C++的海洋中乘风破浪，却又苦于找不到合适的航标？今天，我们为你带来了一份独特的宝藏——Qt之C++开发框架基础入门Markdown文档。 这...
QT 学习资料 入门级
11-14
### QT 学习资料入门级知识点详解 #### 一、QT 概述 **1.1 什么是 Qt** Qt 是一款强大的跨平台 C++ 图形用户界面（GUI）应用程序开发框架，它为开发者提供了创建高质量图形用户界面所需的所有工具与功能。作为...
QT入门之qt软件安装指南
08-02
QT入门之Qt软件安装指南，对于初学者而言，掌握正确的安装步骤是至关重要的。Qt是一款强大的跨平台应用程序开发框架，广泛应用于桌面、移动和嵌入式系统。在本指南中，我们将详细介绍如何在Windows 10操作系统上安装...
QT学习-知识整理（入门篇）
05-16
在"study"这个压缩包中，可能包含了一些学习资料，如教程、代码示例、笔记等，这些都是你开始QT学习之旅的宝贵资源。通过阅读和实践，你将能够逐步掌握QT开发的技能。记住，学习编程尤其是QT这样的框架，理论与实践...
QT入门看这一篇就够（详解含qt源码）
啊渊的专栏
10-16 5万+
qt教程，qt项目，qt下载，qt项目实战，qt多线程，包括Qt环境搭建、Qt数据类型、Qt核心、Qt基础空间、Qt对话框、Qt数据模型、Qt文件处理、Qt高级控件、Qt项目开发，Qt核心对象Object、Qt的demo含源码等
Qt教程一
CSDN全栈领域优秀博主，阿里云博客专家，工信部权威认证物联网技术开发工程师，曾30分钟高分通过C语言二级，两天手撸代码完成EasyX飞机大战，靠接软件私活一个月换苹果电脑
03-05 2万+
Qt
QT_快速入门
Three的笔记
01-10 7448
*信号与槽（Signal & Slot）**是QT⾃⾏定义的⼀种通信机制，也是 Qt 编程的基础。通过信号与槽的编程机制，使得 Qt 中处理界⾯各个组件的交互操作时变得更加直观和简单。它独⽴于标准的C/C++语⾔，因此要正确的处理信号和槽，必须借助⼀个称为moc（Meta Object Compiler）的QT⼯具，该⼯具是⼀个C++预处理程序，它为⾼层次的事件处理⾃动⽣成所需要的附加代码。信号(signal)：就是特定情况下被发射的事件，⼀般由对象或空间发射出去的消息。
QT入门看这一篇就够了——超详细讲解（40000多字详细讲解，涵盖qt大量知识）
热门推荐
m0_65635427的博客
05-22 19万+
QT入门看这一篇就够了——超详细讲解（40000多字详细讲解，涵盖qt大量知识），不会私信我，给你解答
QT 知识点
dianzishi123的博客
01-12 483
一.QStringList //定义 QStringList list; //添加字符串 list &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
QT/C++从新手到老手系列之QT基础篇
01-21
本系列课程励志于带领你学习QT5/C++，从开发环境（QTCreator和VS2013两种）搭建到实际项目实战，从入门到精通。每一个部分均有理论知识介绍、接口讲解、实例代码讲解，讲解过程中不断穿插老师在开发过程中遇到的问题及解决方法。本阶段主要学习Qt开发环境搭建(QTCreator及VS)、程序的发布、GUI控件的属性、方法、布局管理、容器类、QT事件处理等，学完本阶段后可以开发小型的应用程序。
Qt学习之旅：从入门到精通
在Qt学习之旅中，首先会接触到的是【Qt基础】，包括学习环境的搭建和第一个Qt程序——【Hello, World!】的编写，这是所有编程学习的起点。通过这个简单的例子，初学者可以快速了解Qt工程的构建和运行流程。 接下来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值