4.qml单例模式

这里写目录标题

js文件单例模式

直接添加一个js文件到qml中

修改内容

TestA.qml

csharp 复制代码
import QtQuick 2.0
import QtQuick.Controls 2.12
import "./MyWork.js" as MW

Item {

    Row{
        TextField {
            onEditingFinished: {
                MW.setA(text)
            }
        }
        Button{
            onClicked: lb.text = MW.getA()
        }
        Label{
            id: lb
        }

    }

}

main.qml

cpp 复制代码
import QtQuick 2.12
import QtQuick.Window 2.12

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

    TestA{
        width: parent.width
        height: 200

    }

    TestA{
        y:200
        width: parent.width
        height: 200
    }

}

很明显使用import引入的js文件数据是不共享的,也就是他们在qml中的体现为都是个实例

但是有的场景我们希望我们的js文件是一个单例,也就是数据是共享的,怎么做呢?

只需要在js文件最顶部加入一行

.pragma library

既可

MyWork.js

cpp 复制代码
.pragma library
var a = ""

function setA(v){
    a = v;
}

function getA() {
    return a;
}

总结:

有缺点,缺点就是定义的变量不会通知qml页面的变更

qml页面数据的刷新绑定的变量其实还是使用了qml的信号与槽的机制,而

js定义的变量没有ValueChanged这种信号, 故刷新不了qml页面

qml文件单例模式

而qml单例模式

需要在qml最上面加入这一行,没有逗号,跟js不一样

pragma Singleton

同时还要添加一个qmldir文件暴露此单例

总结

全局变量的使用,导致多个qml文件同时触发刷新,

哪怕那个页面不可见,大大拉低刷新性能

为此我们要确保管控好这些变量,

尽量不要让他们本身成功绑定值或者所在的方法成为绑定值(有值),

否则一旦此值变动都会触发左值的更新

cpp 复制代码
    Row{
        TextField {
            onEditingFinished: {
                TestB.setName(text)
            }
        }

        Text {
            visible:  false
            text: {
                console.log("11111")
                return TestB.name
            }
        }

        Text {
            text: {
                console.log("22222")
                return TestB.name
            }
        }
    }
相关推荐
小天呐14 小时前
qiankun 微前端接入实战
前端·js·微前端
土了个豆子的16 小时前
02.继承MonoBehaviour的单例模式基类
开发语言·visualstudio·单例模式·c#·里氏替换原则
赶飞机偏偏下雨1 天前
【Java笔记】单例模式
java·笔记·单例模式
DreamLife☼2 天前
Qt 中的 Q_OBJECT 宏详解 —— 从源码到底层机制的全面剖析
qt·信号·qml·q_object··rtti·运行时类型信息
ArabySide2 天前
【C#】 资源共享和实例管理:静态类,Lazy<T>单例模式,IOC容器Singleton我们该如何选
单例模式·c#·.net core
Ophelia(秃头版2 天前
经典设计模式:单例模式、工厂模式
java·开发语言·单例模式
狂奔的sherry3 天前
单例模式(巨通俗易懂)普通单例,懒汉单例的实现和区别,依赖注入......
开发语言·c++·单例模式
晨星05274 天前
软件设计模式之单例模式
单例模式·设计模式
code bean6 天前
【wpf】WPF开发避坑指南:单例模式中依赖注入导致XAML设计器崩溃的解决方案
单例模式·wpf
脑子慢且灵7 天前
【Web前端】JS+DOM来实现乌龟追兔子小游戏
java·开发语言·前端·js·dom