qt5 编程入门笔记（持续更新）

小龙凤团茶

已于 2022-04-29 00:05:23 修改

阅读量873

点赞数

分类专栏： Qt 文章标签： c++

于 2022-03-19 23:17:57 首次发布

本文链接：https://blog.csdn.net/s2765504026/article/details/123604093

版权

Qt 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

安装

在清华镜像安装qt，我装的是5.14版本
https://mirrors.tuna.tsinghua.edu.cn/qt/archive/qt/5.14/5.14.0/
windows用户选择下载这个
在这里插入图片描述

下载好后开始安装，一路下一步后
在这里插入图片描述
最后安装成功
然后添加帮助文档的快捷方式
在该路径下

进入文档修改字体大小

编程

helloworld

首先创建空项目
在这里插入图片描述
main.cpp

main.qml

直接点击左下角三角形即可运行

入门

Qt Quick Controls模块

在这里插入图片描述

布局定位

在窗口中使用xyz坐标进行定位，其坐标系是以其父类的左上角为原点，z轴决定了对象之间的层级关系，z坐标大的会覆盖z小的对象

    Rectangle{
        x:100
        y:100
        width: 200
        height: 200
        color:"blue"

        Button{
            x:0
            y:0
            z:0
            width: 100
            height: 50
            text: "click"

            background: Rectangle{
                color: "green"
            }
        }

        Button{
            x:40
            y:40
            width: 100
            height: 50
            text: "click2"

            background: Rectangle{
                color: "yellow"A
            }
        }
    }

在这里插入图片描述
给对象命名后，可以通过对象的位置和大小计算另一对象的位置大小，从而达到对齐的效果

Button{
            id:btn1
            x:0
            y:0
            z:0
            width: 100
            height: 50
            text: "click"

            background: Rectangle{
                color: "green"
            }
        }

        Button{
            id:btn2
            x:btn1.x+btn1.width+20
            y:btn1.y
            width: 100
            height: 50
            text: "click2"

            background: Rectangle{
                color: "yellow"
            }
        }

在这里插入图片描述

设置窗体

setWindowFlags(Qt::FramelessWindowHint)：设置窗体的标识，此处设置窗体为一个没有面板边框和标题栏的窗体。

界面绘制

重载虚函数void QWidget::paintEvent(QPaintEvent *event)
在重载定义中可使用Qpainter类和Qpixmap绘制界面

void Dialog::paintEvent(QPaintEvent *)
{
   QPainter painter (this);
   QPixmap pix;
   pix.load(":/image/map.png");
   painter.drawPixmap(0,0,pix);
}

使用void QWidget::update()可以重新绘制

QLabel

可以显示文字图片视频的控件

#include<QLabel>
...
QLabel *a = new QLabel(this)//在当前窗口显示标签
a->setGeometry(Qrectf);//设置标签位置和大小
a->setStyleSheet("color : white")//设置样式表
a->setFont(QFont);//设置字体

参考链接

信号与槽的连接——lambda方式

使用lambda方式的优点在于简洁，并且可以不用定义槽函数，直接在连接函数中写要连接的函数内容,除槽函数外其他与普通连接相同

[capture](parameters) mutable ->return-type
{
	statement
}
[函数对象参数](操作符重载函数参数)mutable ->返回值{函数体}

capture：

空。没有使用任何函数对象参数。
=。函数体内可以使用Lambda所在作用范围内所有可见的局部变量（包括Lambda所在类的this），并且是值传递方式（相当于编译器自动为我们按值传递了所有局部变量）。
&。函数体内可以使用Lambda所在作用范围内所有可见的局部变量（包括Lambda所在类的this），并且是引用传递方式（相当于编译器自动为我们按引用传递了所有局部变量）。
this。函数体内可以使用Lambda所在类中的成员变量。
a。将a按值进行传递。按值进行传递时，函数体内不能修改传递进来的a的拷贝，因为默认情况下函数是const的。要修改传递进来的a的拷贝，可以添加mutable修饰符。
&a。将a按引用进行传递。
a, &b。将a按值进行传递，b按引用进行传递。
=，&a, &b。除a和b按引用进行传递外，其他参数都按值进行传递。
&, a, b。除a和b按值进行传递外，其他参数都按引用进行传递。
parameters为形参
mutable可省略，加上mutable修饰符后，可以修改按值传递进来的拷贝（注意是能修改拷贝，而不是值本身）

QgraphicsView具有交互能力的图形界面

设置边界和布局

各种鼠标事件的响应

在view中可以通过监控mouseMoveEvent(QMouseEvent *event)事件来跟踪鼠标
只要当鼠标进入view中，就会触发该事件
可以在该事件的函数体中重写，例如
改变鼠标的样式
发送信号给scene中的item
注意这些鼠标事件的参数都是鼠标在全局的坐标，当要发送信号给scene中时要转换坐标系

mapToScene(event->pos())

同样可以在自定view中重写一系列鼠标事件,这些函数都是斜体

	void mousePressEvent(QMouseEvent* event);
    void mouseReleaseEvent(QMouseEvent* event);
    void mouseMoveEvent(QMouseEvent* event);
    void wheelEvent(QWheelEvent *event);

void QWidget::enterEvent(QEvent *event)
当鼠标进入widget中就会触发该事件
oid QWidget::leaveEvent(QEvent *event)
同理鼠标离开时触发

自定义Item

在QGraphicsItem中，判断鼠标事件返回的坐标是否在Item的Rect中，使用函数

bool contains(const QPointF &point)

若判读鼠标在rect内，则触发相应函数
注意，当我们在给item做一系列的信号与槽连接时，该连接必须是在item被实例后才可以起作用，所以因单独定义一个函数用于进行信号与槽的连接，在实例item时调用该函数即可

在view中将实例好的item添加到scene中

this->scene()->addItem(newItem);

将item移除scene

scene()->removeItem(line2)//在item内部调用scene()

样式表

丝滑的动画衔接

#include <QTimeLine>//时间轴
#include <QEasingCurve>//动画的曲线效果

通过QTimeLine可以设置一个时间轴，表示在多长的时间里我们要发送多少个帧信号来播放每一帧，一般我们实现的动画都是由初始位置到结束位置的一个过度动画，比如大小或者位置的过度，那么在位置或大小改变的过程中，为了实现更好的动态，不能让这种变化成线性，而是成一个曲线的变化，就需要用到QEasingCurve
这里我们实现一个大小变化：

QTimeLine *timeLine = new QTimeLine(300, this);//设置时间轴为300ms
timeLine->setFrameRange(0, 100);//发出100次frameChanged信号，且信号携带参数frame表示帧数
QEasingCurve curve = QEasingCurve::OutBounce;//选择一种曲线
qreal baseRadius = radius;//这是圆的初始半径
qreal difRadius = 1.25 * radius - baseRadius;//要实现圆的半径变为1.25倍
connect(timeLine, &QTimeLine::frameChanged, [=](int frame){//将帧信号与半径变化的事件连接起来，发送一次帧信号，半径变化一次
   	   qreal curProgress = curve.valueForProgress(frame / 100.0);
       qreal curRadius = baseRadius + difRadius * curProgress;
       this->setRect(QRectF(center.x() - curRadius, center.y() - curRadius, curRadius * 2, curRadius * 2));//改变大小，设置QRect
timeline->start();//播放动画

当有一系列连续的动画时
可以用一个队列来存储要播放的时间轴,依次遍历每一个时间轴并播放即可

queue<QTimeline> antList

有时候我们想要做

使用QPropertyAnimation制作widget对象的简单动画

 	QPropertyAnimation *shorter = new QPropertyAnimation(indicator, "geometry", this);
    shorter->setStartValue(indicator->geometry());
    shorter->setEndValue(QRectF(4, 0.4 * this->height(), 6, this->height() * 0.2));
    shorter->setDuration(100);
    shorter->setEasingCurve(QEasingCurve::OutBack);
    shorter->start();

主窗口美化

去除窗口帧，设置圆角边框

	QPainterPath path;    //添加圆角矩形路径
    //rect返回除去窗口帧后的矩形,QRect
    path.addRoundedRect(ui->mainWidget->rect(), cornerRadius, cornerRadius);
    //toFillPolygon返回多边形，点是浮点型存的，因此用toPolygon转换成int型点
    QRegion mask(path.toFillPolygon().toPolygon());
    //设置蒙版,只有矩形之内的东西才可见
    ui->mainWidget->setMask(mask);