【QT】C++和QML使用多线程优化界面切换卡顿的方法

最新推荐文章于 2024-08-24 22:04:46 发布
最新推荐文章于 2024-08-24 22:04:46 发布
阅读量482 收藏 7
点赞数 4
分类专栏： QT 学习笔记 文章标签： qt c++ java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35662333/article/details/141069564
版权

qt提供了一种声明式语言qml，可以使用一些可视组件以及这些组件之间的交互来描述用户界面，而c++可以只负责后台逻辑的处理，将界面和后台分离开来，由qml来做UI界面，c++负责后端处理，对我个人来说，这样的方式大大的方便了对界面和逻辑的修改和维护；

由于UI界面是工作在主线程中的，大多数时候在后端处理一些耗时操作，会导致界面卡顿甚至卡死的情况,这个时候就需要将一些耗时处理放在子线程中来进行操作，减少主线程的阻塞；
在QT使用多线程的方法有多种，这里使用其中一种方法moveToThread，就是直接将当前的一个对象，移到另外一个线程上，该对象的数据接收等处理的操作都在该线程上实现，不会阻塞到主线程中导致卡顿；
这里先来看一个例子：使用qml构建两个界面，这两个界面可以根据界面上的按钮切换，每次点击按钮添加一个耗时操作(这里使用的是在c++成员函数添加for循环来代替耗时操作)，所以每次点击按钮两个界面之间的切换会有5秒左右的延时，就是界面之间卡顿现象，具体代码如下：
c++代码:
main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "worker.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    qmlRegisterType<Worker>("Tool", 1, 0, "Worker");

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

worker.h

#ifndef WORKER_H
#define WORKER_H

#include <QObject>
#include <QThread>

class Worker : public QObject
{
    Q_OBJECT
public:
    explicit Worker(QObject *parent = nullptr);

    Q_INVOKABLE void workRun();

signals:

public slots:
};

#endif // WORKER_H

worker.cpp

#include "worker.h"
#include <QDebug>

Worker::Worker(QObject *parent) : QObject(parent)
{

}

void Worker::workRun()
{
    int count = 0, count_one = 0;
    long long product = 1;

    for(int i = 0; i < 99999; i++)
    {
        count = i;
        count_one = count + 1;

        product = count * count_one ;

        qDebug() << "i = " << i;
        qDebug() << __func__ << __LINE__ << "current product:" << product;
    }
}

qml代码：
main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import Tool 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Worker {
        id:worker;
    }

    Rectangle {
        anchors.fill:parent;
        color: "lightblue";

        Text {
            id: ttt
            text: qsTr("text")
            font.pixelSize: 30;
            anchors.centerIn: parent;
        }

        Button {
            id:btn;
            text:"update";

            onClicked: {
                console.log("update data...");
                worker.workRun();
                pageChange.source = "qrc:/homePage.qml";
            }
        }

        Loader {
            id:pageChange;
            anchors.fill: parent;
            source: "";
        }
    }
}

homePage.qml

import QtQuick 2.9
import QtQuick.Controls 2.2

Item {
    anchors.fill: parent;

    Rectangle {
        anchors.fill: parent;
        color: "grey";

        Text {
            id: txt
            text: qsTr("welcome to homePage!!!");
            anchors.centerIn: parent;
            font.pixelSize: 40;
        }
        Button {
            id:closeBtn;
            text:"closeBtn";
            font.pixelSize:40;
            onClicked:{
                worker.workRun();
                pageChange.source = "";
            }
        }
    }
}

如以上代码所示，添加的耗时操作阻塞在主线程中导致UI卡顿，演示信息如下：

每次切换之后都需要等一段时间才能切换，在实际使用过程中这种卡顿是非常影响使用的，这里试着用多线程的方法来修改，将这个耗时操作放在子线程中去进行处理，避免主线程阻塞；
下面是改过之后的代码，使用信号和槽来连接主线程和子线程之间的通信，主线程发送点击信号，触发槽函数在子线程运行，这样耗时操作就在子线程中处理，界面不会再卡顿；
worker.h

#ifndef WORKER_H
#define WORKER_H

#include <QObject>
#include <QThread>

class Worker : public QObject
{
    Q_OBJECT
public:
    explicit Worker(QObject *parent = nullptr);

    Q_INVOKABLE void workRun();
    Q_INVOKABLE void initThread();
    Q_INVOKABLE void btnClick();

    QThread *m_thread;
    Worker *m_worker;

signals:
    void btnClicked();

public slots:
};

#endif // WORKER_H

worker.cpp

#include "worker.h"
#include <QDebug>

Worker::Worker(QObject *parent) : QObject(parent)
{

}

void Worker::workRun()
{
    int count = 0, count_one = 0;
    long long product = 1;

    qDebug() << "workRun thread id:" << QThread::currentThreadId();

    for(int i = 0; i < 99999; i++)
    {
        count = i;
        count_one = count + 1;

        product = count * count_one ;

        for(int j = 0; j < 10000; j++)
        {

        }
        qDebug() << "i = " << i;
        qDebug() << __func__ << __LINE__ << "current product:" << product;
    }
    qDebug() << __func__ << __LINE__ << "current product:" << product;
}


void Worker::initThread()
{
    m_worker = new Worker();
    m_thread = new QThread();

    m_worker->moveToThread(m_thread);

    connect(this, &Worker::btnClicked, m_worker, &Worker::workRun);

    m_thread->start();
}

void Worker::btnClick()
{
    emit btnClicked();
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import Tool 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Worker {
        id:worker;
    }

    Component.onCompleted: {
        worker.initThread();
    }

    Rectangle {
        anchors.fill:parent;
        color: "lightblue";

        Text {
            id: ttt
            text: qsTr("text")
            font.pixelSize: 30;
            anchors.centerIn: parent;
        }

        Button {
            id:btn;
            text:"update";

            onClicked: {
                console.log("update data...");
                worker.btnClick();
                //worker.workRun();
                pageChange.source = "qrc:/homePage.qml";
            }
        }

        Loader {
            id:pageChange;
            anchors.fill: parent;
            source: "";
        }
    }
}

homePage.qml

import QtQuick 2.9
import QtQuick.Controls 2.2

Item {
    anchors.fill: parent;

    Rectangle {
        anchors.fill: parent;
        color: "grey";

        Text {
            id: txt
            text: qsTr("welcome to homePage!!!");
            anchors.centerIn: parent;
            font.pixelSize: 40;
        }
        Button {
            id:closeBtn;
            text:"closeBtn";
            font.pixelSize:40;
            onClicked:{
                worker.btnClick();//不直接操作workRun,触发信号由子线程中处理
                //worker.workRun();
                pageChange.source = "";
            }
        }
    }
}

下面是引入多线程后的效果图，界面卡顿明显消失了：

但是还是有问题的存在，就是有的耗时操作再子线程中一直运行，一直在跑，但是界面就一直在切换，如果是需要获取在耗时操作后的结果显示在界面的话，这种方法显然是不行的，未完待续。

去往火星
关注
专栏目录
qt qml卡顿问题如何解决
xcksj888的博客
09-07 1613
2. 异步处理：对于耗时的操作，例如网络请求或复杂的计算，可以考虑将其放在后台线程或异步任务中处理，以避免阻塞主线程。可以使用Qt提供的异步功能，如QtConcurrent或QThread，或者使用JavaScript中的async/await或Promise等机制。尽量避免使用过多的嵌套组件、大量的重复计算或频繁的属性绑定，以减少QML的计算负担。3. 图像优化：如果应用中使用了大量的图像资源，可以考虑对图像进行优化，如降低分辨率、压缩图像质量等，以减少加载和绘制的开销。
5. QT环境下使用OPenCV(基于TCP实现摄像头图像数据的多线程传输)
山间点烟雨
06-25 1873
在QT的多线程开发当中，有两种方式可以创建子线程，一种是继承QThread这个类，然后重新其run()函数，需要在子线程中执行的代码放置在run()函数内部，在启动线程时只需要调用其start()方法即可，但这种方式在结合tcp通信一起使用时容易出现错误，会报错说socket通信不在同一个线程内。另一种创建子线程的方式是将自定义的类继承自QObject，然后使用moveToThread()函数将其移动到创建的子线程管理器中，转移之后，此自定义类中的所有功能代码在运行时都会在子线程中进行。
QT多线程—主界面卡死解决方案
05-31
由于耗时的操作会独占系统cpu资源 ，让界面卡死在那里，这时需要考虑多线程方案，将耗时的操作放在主线程之外的线程中执行。该demo通过多线程为主界面卡死提供一种解决方案。
QML 界面切换
比卡丘不皮的博客
07-20 2308
有关qml部分基础部分就写到这里了，非常的简单，后面不在记录基础的qml程序了，后期根据项目，在给大家讲解一些例子。 首先是最简单的方式，静态界面，就是加载全部数据，只是不显示，然后按键显示。 效果图如下： 点击按钮： LoginPage import QtQuick 2.0 import QtQuick.Controls 2.3 Rectangle { width: 400 height: 300 color: "#051f58" ...
qml实现界面的切换
海涛高软
06-18 345
FR:徐海涛（hunkxu）
QML 界面切换的方法
最新发布
u013798595的博客
08-24 568
StackView：适用于复杂的界面堆叠和导航场景。Loader：适合动态加载和切换不同的 QML 组件。Repeater 和 StackLayout：用于动态生成和管理多个类似界面。States 和 Transitions：适用于状态驱动的视图切换和动画效果。
基于Qt和C++的医院信息管理系统（课程设计）.zip
09-01
5. **图形用户界面（GUI）设计**：在Qt中，开发者使用QWidgets或QML来创建和设计GUI。这包括窗口、按钮、文本框、表格视图等元素，通过布局管理器如QGridLayout、QVBoxLayout、QHBoxLayout等实现界面布局。 6. **多...
解决Qt5程序运行时界面假死及线程运行导致卡顿解决办法
草莓蛋糕人
08-07 1万+
在Qt5的GUI程序中，主线程也叫GUI线程，因为它是唯一被允许执行GUI相关操作的线程。对于一些计算量比较大的非常耗时的操作，如果放在主线程中，就是出现界面无法响应的问题。这种问题的解决一种方式是，把这些耗时操作放到次线程中，还有一种比较简单的方法：在处理耗时操作中加入一个延时，并调用QCoreApplication::processEvents()。这个函数告诉Qt去处理那些还没...
Qt：通过QML Profiler分析程序性能问题
Jason’s home
03-15 9101
对于一个程序的开发，性能优化是开发中的一个重要步骤。我们肯定不希望开发出来的程序表现出卡顿，最好是处处流畅，丝滑般的体验。
Qt + qml 多线程 实现文件复制 进度条显示复制进度
12-14
Qt 负责文件的读写 qml负责显示进度，文件读写在子线程中进行。代码可以直接运行。
QT实现网络摄像头（qml）音频（C++）的实时传输（多线程）
01-09
qml无法实现音频的实时传输（只有播音没有录音API），所以在QT中另开了一条线程利用C++实现了音频的实时传输，同时里面包含了之前采用qml实现的播放网络流的代码（整合在一起了），我是 从板子上传输到PC上，如果是PC传PC或者是其他只需要改变QT编译版本（嵌入式版本和桌面版本）（压缩格式是zip，博客下另一个是tar（二者代码相同，压缩格式不同），如果在window使用下这个）
Qml页面切换效果预览.rar
09-18
Qml页面切换效果预览，13个GIF文件，各个文件显示其名称的效果
vs2019+QT开发的传感器界面
07-23
7. **多线程**：考虑到实时性要求，可能需要在后台线程中处理传感器数据的获取和计算，以避免阻塞主线程导致界面卡顿。 8. **异常处理**：为了保证程序的健壮性，需要对可能出现的错误进行处理，如通信失败、数据...
QT quick基础：qml界面切换
zhuowalun8427的博客
01-05 1854
再测试过程中发现，程序开始运行时，所有界面的功能逻辑都在运行，这可能导致程序开始运行时浪费性能。因此，学习找到一种方式，当前显示的界面相关功能运行，否则停止运行。因此，写这篇文章记录一下。实例中，写了两个界面，登录界面和主界面。程序运行默认显示登录界面，点击“登录页面-登录按钮”按钮，界面切换到主界面。通过运行效果可以看出，在登录界面和主界面，两个界面的功能逻辑都在运行。既程序运行后，两个界面同时加载，只是通过，界面显示和隐藏逻辑，确定哪个界面输出。打开主界面后及返回登录界面，两个界面都在运行。
QML中的多线程处理
夏天的狂风的专栏
03-31 533
Qt提供了一整套用于处理多线程的类，如QThreadQRunnable和等。这些类为开发者提供了跨平台的多线程支持，使得在不同平台上处理并发任务变得更加轻松。在QML中直接使用这些类并不方便。但是，我们可以通过将相关功能封装在一个自定义的C++对象中，并将其暴露给QML上下文，从而实现QML中的多线程处理。
qt， connect参数，Qt::DirectConnection，Qt::QueuedConnection
热门推荐
life_is_too_hard的博客
08-01 4万+
connect用于连接qt的信号和槽，在qt编程过程中不可或缺。它其实有第五个参数，只是一般使用默认值，在满足某些特殊需求的时候可能需要手动设置。 Qt::AutoConnection： 默认值，使用这个值则连接类型会在信号发送时决定。如果接收者和发送者在同一个线程，则自动使用Qt::DirectConnection类型。如果接收者和发送者不在一个线程，则自动使用Qt::QueuedConnec
【QML】qml多线程
-凌凌漆-的博客
12-19 750
QThread。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值