QT入门知识回顾

1 QT简介

1.1 Qt模块:

• Qt Core模块: 是QT类库的核心，所有其他模块都依赖这个模块

• Qt Gui模块: 提供GUI程序的基本功能

• Qt Network模块:提供跨平台的网络功能

• Qt Widgets模块:提供创建用户界面的功能

1.2Qt的signal/slot机制

任何一个类只要类体前部书写 Q_OBJECT即可使用Qt的信号/槽机制。

信号和槽的本质是函数

当一个Qt对象的内部状态发生变化的时候，就会发出一个信号，信号起始也是一个函数 当Qt对象收到信号以后，自动去执行对应的函数，这个自动执行的函数就是槽函数

信号与槽之间需要建立连接，才能够将信号与槽函数关联起来 对于信号与槽之间的连接，需要明确以下信息： 是哪个对象发出信号 发出了哪个信号 由谁来接收这个信号 接收到信号以后怎么处理

信号与槽是通过 connect 函数来建立连接的 所以，connect函数的常规参数如下： connect(sender,SIGNAL(信号函数的函数名(参数类型)),receiver,SLOT(槽函数的函数名(参数类型)));

1.2.1 写法一

private slots:
    void button_clicked_slot();
    
void Widget::button_clicked_slot()
{
    qDebug()<<"按键被点击";
}
​
QPushButton *button=new QPushButton(this);
button->setText("OK");
connect(button,&QPushButton::clicked,this,&Widget::button_clicked_slot);

    // 传统Qt是连接方式
    // 传统Qt4连接方式为 信号发送者，信号，信号接受者，处理函数
    QObject::connect(ui->pushButton,SIGNAL(clicked(bool)),this,SLOT(qT4_slot()));

    //Qt5连接方式
    //其实这么写的方式和Qt4没有啥却别，只是在Qt4 中引用了信号槽，在简单的使用时没有问题，但是在庞大的工程中，信号和曹 仅仅是宏替换，在编译的时候没有安全监测
    //Qt5的新方法，在编译的时候就会有监测，如果我们手误操作失误，就会出现问题
    QObject::connect(ui->pushButton_2,&QPushButton::clicked,this,&Widget::qT5_slot);

1.2.2 写法二

直接在ui设计里面生成一个按钮，然后转到对应的槽，写入要操作的内容，即可

1.2.3 写法三

//Qt5 Lambda表达式
    //这里需要注意 Lambda表达式是C++ 11 的内容，所以，需要再Pro项目文件中加入 CONFIG += C++ 11
    QObject::connect(ui->pushButton_3,&QPushButton::clicked,[=](){qDebug()<<"lambda 表达式";});

1.3 自定义信号和槽函数

signals:
    void windowClose(QString);//声明一个自定义信号
    
private slots:
    void m_on_windowClose(QString);//自定义槽函数，alt+enter 可以快速生成函数定义
    
    
//手动连接信号与槽
connect(this,SIGNAL(windowClose(QString)),this,SLOT(m_on_windowClose(QString)));
    
//槽函数
void m_on_windowClose(QString)
{
    this->close();//关闭主页面
}
​
//发送信号
QString str{"你好"};
emit windowClose(str);
    

声明槽函数注意点：

1. 如果是自己的定义的槽函数，建议不要以 on_ 开头，因为以 "on_" 开头，Qt会认为这个是它自动生成的槽函数，在它自己声明的参函数列表中又找不到这个声明，那么就会报警告！

2. 槽函数一旦声明了，就一定要实现！！！否则就会报错！

信号与槽的连接方式： 信号与槽有两种连接方式：自动连接、手动接连

信号与槽的连接方式： 信号与槽有两种连接方式：自动连接、手动连接

自动连接：在UI设计器中，右键选择对象，选择转到槽，然后选择对应的信号， 那么就会在类中自动添加一个槽函数的声明以及在源文件(.cpp)文件中自动添加一个槽函数的定义，这个槽函数会自动和对应的信号连接

手动连接：手动调用connect函数来完成对应的信号与槽函数的连接

1.4 QT图片类型

QT图片的类型有4种，QPixmap,QImage,QBitmap,QPicture

QPixmap:

1. 在加载图片的时候，是将图片加载到显存里面，如果图片太大可能会加载失败

2. 在显示图片的时候，可以在不修改图片数据的前提下对图片进行缩放或者放大显示

3. 在不同的系统下，显示图片的效果可能会不相同

4. label->setPixmap(QPixmap(filename));

QImage：

1. 在加载图片的时候，是将图片加载到内存中

2. 在显示图片的时候，以原图显示

3. 在不同的系统下，显示图片的效果是相同的

    显示图片：
        //直接使用文件的路径
        ui->label->setPixmap(QPixmap("../showpic/image/caixukun.png"));
        ui->label->setScaledContents(true); //让图片自动适应控件大小
        //使用资源文件中的文件
        QPixmap pix{":/image/caixukun.png"};
        ui->label->setPixmap(pix);
        ui->label->setScaledContents(true); //让图片自动适应控件大小
​
    显示动图或者视频：
        QMovie *mov = new QMovie{":/image/caixukun.gif"};
        ui->label->setMovie(mov);
        ui->label->setScaledContents(true); //让图片自动适应控件大小
        mov->start();    显示图片：
        //直接使用文件的路径
        ui->label->setPixmap(QPixmap("../showpic/image/caixukun.png"));
        ui->label->setScaledContents(true); //让图片自动适应控件大小
        //使用资源文件中的文件
        QPixmap pix{":/image/caixukun.png"};
        ui->label->setPixmap(pix);
        ui->label->setScaledContents(true); //让图片自动适应控件大小
​
    显示动图或者视频：
        QMovie *mov = new QMovie{":/image/caixukun.gif"};
        ui->label->setMovie(mov);
        ui->label->setScaledContents(true); //让图片自动适应控件大小
        mov->start();

1.5 setStyleSheet()

样式-英文	参数	样式-中文
color:	white rgb(110,110,110) #eb7350	前景颜色，字体颜色
background:	transparent	背景为透明
background-color:	white rgb(110,110,110) #eb7350	背景颜色
background-position:	left right center top bottom	设定图片的位置
background-image:url()	./img/back.jpg	背景图片 ，不缩放图片大小
border-image:url()	./img/back.jpg	背景图片，会对图片进行拉伸，平铺
border-style:	outset inset	边框样式，按下是inset
border-width:	px	边框大小
border-radius:	px	边框弧度
border:3px solid red	px color	边框宽度以及颜色
border-color: rgba(255, 225, 255, 30);	color	边框颜色
font-family	微软雅黑	设定字体所属家族
font: bold 14px	bold px	字体大小并加粗
font-size:	px	字体大小
font-style:	inset	字体样式
font-weight:	px	字体深浅
selection-color:	color	设定选中时候的颜色

eg: ui->pushButton->setStyleSheet("border-image: url(:/images/Coin0001.png);");

1.6 QT样式表ui设计

1.6.1 方法一：

样式表常见设置

//加上#对象，则里面属性设置只针对于该对象
QWidget#centralWidget
{
    background-image: url(:/bg2.jpg);//直接设置背景图片，但是图片大小不会自适应
    //border-image: url(:/bg2.jpg);图片大小会自适应centralWidget大小
}
QPushButton#btn_test2
{
    border-image: url(:/caixukun.png);  
}
​
QPushButton#btn_test:hover//当鼠标落在按钮上面时设置一种颜色
{
    background-color: rgb(87, 174, 201);
}
​
QPushButton#btn_test:pressed//当鼠标点击按钮上面时设置一种颜色
{
    background-color: rgb(87, 174, 201);
}
​
QPushButton#btn_test:!hover//当鼠标离开按钮时
{
    background-color: rgb(137, 194, 227);   
}
​
QPushButton#btn_test
{
    border-width:2px;
    b