欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

QML编程：C++交互实现资料定时刷新的思路

程序员文章站 2022-05-30 23:06:54
...

　　通过C++进行后端开发，完成即时通讯，实现即时资料的定时刷新和前端进行交互开发，是开发过程中必须要考虑和解决的问题。一种方式是，利用QML为我们提供了Timer控件，实现高度定制的控件，定时对资料库进行查询，来实现定时刷新资料的需求，但是这种处理方式，效率是一个很大的问题，导致每个元件都需要绑定一个定时器，在大批量的资源更新时，CPU占比很高，不是很可取。第二种处理方式，是在每个页面去提供Timer定时器,对每个页面的资料去进行一个批量的处理，这样效率相对较高，但*灵活度不够，每个页面都需要导出控件，然后针对不同的控件去申请刷新资料。第三种方式，即提供一个全局的定时器（思路可以扩展到多个不同时间间隔的定时器），然后针对元件进行定制。本文介绍的思路即为第三种实现方式。代码实现如下
　　

//time notifier header file

#define TIMENOTIFIER_H
#include <QObject>
#include <QQmlEngine>
#include <QJSEngine>

class QTimer;
class TimeNotifier:public QObject
{
    Q_OBJECT
public:
    TimeNotifier(QObject* parent=nullptr);
    //提供函数接口
    Q_INVOKABLE void doSomething(){ }
signals:
    //超时通知信号
    void timeNotifier();
public slots:
    //提供信号槽接口
    void onTimeOut();
private:
    QTimer* timer;
};

//提供一个单例模式下的注册函数
static QObject *timenotifier_qobject_singletontype_provider(QQmlEngine *engine, QJSEngine *scriptEngine)
 {
     Q_UNUSED(engine)
     Q_UNUSED(scriptEngine)

     TimeNotifier *timeNotifier = new TimeNotifier();
     return timeNotifier;
 }

#endif // TIMENOTIFIER_H
//time notifier imcomplement file
#include "timenotifier.h"
#include <QTimer>
#include <QDebug>
TimeNotifier::TimeNotifier(QObject* parent):QObject(parent),timer(0)
{
    timer=new QTimer(this);
    timer->setInterval(100);//100ms
    timer->start();
    connect(timer, SIGNAL(timeout()),this, SLOT(onTimeOut()));
}

void TimeNotifier::onTimeOut()
{
    emit timeNotifier();
}

qmlRegisterSingletonType:单例对象注册函数，通过提供uri和类型名称，主版本号，次版本号，注册回调函数完成一个lie
完成上述代码的编辑，就可以通过调用该函数

qmlRegisterSingletonType<TimeNotifier>("Qt.Customer.Singleton", 1, 0, "TimeNotifier",　\
 timenotifier_qobject_singletontype_provider);

完成一个全局定时器的注册任务，这样在我们QML工程中就可以使用TimeNotifier这个全局的对象了。


// CustomSlider.qml
import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
import QtQuick.Controls.Material.impl 2.3
import Qt.Customer.Singleton 1.0

Slider {
    id: control
    property alias slot: slot
    property int handleRadius: 10
    handle: SliderHandle {

        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
        y: control.topPadding
           + (control.horizontal ? (control.availableHeight - height)
                                   / 2 : control.visualPosition
                                   * (control.availableHeight - height))
        value: control.value
        handleHasFocus: control.visualFocus
        handlePressed: control.pressed
        handleHovered: control.hovered
        width:handleRadius
        height:handleRadius

    }

    background: Rectangle {
        id: slot
        x: control.leftPadding
           + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
        y: control.topPadding
           + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
        implicitWidth: control.horizontal ? 200 : 48
        implicitHeight: control.horizontal ? 48 : 200
        width: control.horizontal ? control.availableWidth : 3
        height: control.horizontal ? 3 : control.availableHeight
        color: control.Material.foreground
        scale: control.horizontal && control.mirrored ? -1 : 1

        Rectangle {
            x: control.horizontal ? 0 : (parent.width - width) / 2
            y: control.horizontal ? (parent.height - height)
                                    / 2 : control.visualPosition * parent.height
            width: control.horizontal ? control.position * parent.width : parent.width+2
            height: control.horizontal ? parent.height+2 : control.position * parent.height

            color: control.Material.accentColor
        }
    }

    Connections{
        target: TimeNotifier
        onTimeNotifier:{
            console.log("height:" ,control.availableHeight)
            control.value=Math.random()*150;//此处仅进行测试用，可以替换为其他处理方式
        }
    }
}

Connections:信号连接处理，target:信号触发来源，onTimeNotifier:信号处理函数, enabled:使能接受信号源触发，ignoreUnknownSignals：未知信号是否报错

//PageForm.ui.qml
import QtQuick 2.4
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.0

CategoryPageBackGround {
        GridLayout {
        anchors.fill: parent
        rows: 8
        columns: 4

        CustomSlider {
            id: customerSlider
            Layout.fillHeight: true
            Layout.fillWidth: true
            font.pixelSize: 8
            font.family: "Verdana"
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider4
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider16
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider20
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider1
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider5
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider17
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider21
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider2
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider6
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider18
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider22
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider3
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider7
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider19
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider23
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider8
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider12
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider24
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider28
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider9
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider13
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider25
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider29
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
            to: 150
        }

        CustomSlider {
            id: customerSlider10
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider14
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider26
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider30
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider11
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider15
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider27
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider31
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredHeight: 11
            Layout.preferredWidth: 78
        }

        CustomSlider {
            id: customerSlider32
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider33
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider34
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider35
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider36
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider37
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider38
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider39
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider40
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider41
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider42
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider43
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider44
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider45
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider46
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider47
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider48
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider49
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider50
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider51
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider52
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider53
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider54
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider55
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider56
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider57
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider58
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider59
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider60
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider61
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider62
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }

        CustomSlider {
            id: customerSlider63
            Layout.fillHeight: true
            Layout.fillWidth: true
            to: 150
            Layout.preferredWidth: 78
            Layout.preferredHeight: 11
        }
    }
}

效果图
QML编程：C++交互实现资料定时刷新的思路

相关标签： QML

上一篇： Material Design（二）—— Toolbar的使用

下一篇： Android的materialDesign风格的主题样式

推荐阅读