Javascript 在运行时通过鼠标单击动态更改QML主题

我有Theme1.js，它有与主题1样式相关的属性变量，与主题2的Theme2.js类似 现在在main.qml中，如果我单击鼠标ea，主题应该在1到2之间切换。我发现QML中不存在条件导入语句。还有别的办法吗

Theme1.js

var color="red";
var textString="This is Theme1"

var color="green";
var textString="This is Theme2"

Theme2.js

var color="red";
var textString="This is Theme1"

var color="green";
var textString="This is Theme2"

main.qml

import QtQuick 2.3
import QtQuick.Window 2.2
import "Theme1.js" as Theme //default Theme 

Window {
    visible: true
    color:Theme.color

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //Change Theme 1 to Theme 2. Basically Toggle Theme here

        }
    }

    Text {
        text: Theme.textString
        anchors.centerIn: parent
    }
}

import QtQuick 2.0
Theme {
    color0: 'green'
    color1: 'blue'
    colorX: 'red'
}

pragma Singleton
import QtQuick 2.0

Theme { // Use Theme instead of QtObject
    property Theme current: theme1
    property Theme theme1: Theme1 { }
    property Theme theme2: Theme2 { }

    // Bind the `Theme`s properties as intermediate variables to the current Theme.
    color0: (current && current.color0 ? current.color0 : 'defaultColor0')
    color1: (current && current.color1 ? current.color1 : 'defaultColor1')
    colorX: (current && current.colorX ? current.colorX : 'defaultColorX')
}

---

首先，不建议使用

js

-库来存储值，稍后将绑定到。你应该考虑把你的库转换成<代码> QToToStudioSuntLon。< /P> 仅将库用作函数的库

要更改主题，您可能需要一个单例

样式

pragma Singleton
import QtQuick 2.0

QtObject {
    property Theme current: theme1
    property Theme theme1: Theme1 { }
    property Theme theme2: Theme2 { }
}

具有主题.qml类似于：

import QtQuick 2.0
QtObject {
    property color color0
    property color color1
    property color colorX
}

然后主题1.qml

import QtQuick 2.3
import QtQuick.Window 2.2
import "Theme1.js" as Theme //default Theme 

Window {
    visible: true
    color:Theme.color

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //Change Theme 1 to Theme 2. Basically Toggle Theme here

        }
    }

    Text {
        text: Theme.textString
        anchors.centerIn: parent
    }
}

import QtQuick 2.0
Theme {
    color0: 'green'
    color1: 'blue'
    colorX: 'red'
}

pragma Singleton
import QtQuick 2.0

Theme { // Use Theme instead of QtObject
    property Theme current: theme1
    property Theme theme1: Theme1 { }
    property Theme theme2: Theme2 { }

    // Bind the `Theme`s properties as intermediate variables to the current Theme.
    color0: (current && current.color0 ? current.color0 : 'defaultColor0')
    color1: (current && current.color1 ? current.color1 : 'defaultColor1')
    colorX: (current && current.colorX ? current.colorX : 'defaultColorX')
}

和主题2.qml为：

import QtQuick 2.0
Theme {
    color0: 'red'
    color1: 'pruple'
    colorX: 'yellow'
}

然后将属性绑定到

color:Style.current.colorX

要更改样式，请将另一个主题指定给

style.current

---

编辑：使用中间变量将路径缩短到该值可能是一种优化。它增加了不需要使用

Style.current.color0

而是至少使用

Style.color0

的便利性

您可以将其用于样式。qml

import QtQuick 2.3
import QtQuick.Window 2.2
import "Theme1.js" as Theme //default Theme 

Window {
    visible: true
    color:Theme.color

    MouseArea {
        anchors.fill: parent
        onClicked: {
            //Change Theme 1 to Theme 2. Basically Toggle Theme here

        }
    }

    Text {
        text: Theme.textString
        anchors.centerIn: parent
    }
}

import QtQuick 2.0
Theme {
    color0: 'green'
    color1: 'blue'
    colorX: 'red'
}

pragma Singleton
import QtQuick 2.0

Theme { // Use Theme instead of QtObject
    property Theme current: theme1
    property Theme theme1: Theme1 { }
    property Theme theme2: Theme2 { }

    // Bind the `Theme`s properties as intermediate variables to the current Theme.
    color0: (current && current.color0 ? current.color0 : 'defaultColor0')
    color1: (current && current.color1 ? current.color1 : 'defaultColor1')
    colorX: (current && current.colorX ? current.colorX : 'defaultColorX')
}

---

这是一个有用的资源。你能再解释一下你的观点吗？ofc。您可以在

样式中内联
Them1/2
-声明，也可以使用动态实例化来减少内存消耗。但是为了减少隐式类的数量，我认为有一个公共类
Theme
是有益的，您可以从中继承具体的
Theme
s。此外，使用这个公共基类可以确保您的所有样式都具有相同的属性，您不太容易出现拼写错误，您可以为QtCreator等启用代码补全功能。唯一的不便是您的绑定现在变长了，即您始终必须键入
.current.
。您是对的。我补充了一个建议，关于如何消除这种不便。它甚至可以提高性能。我没有这方面的数据。至少它允许我们删除应用程序本身中的任何
null
-检查。（当前可能在启动时未初始化，并且可能引发错误）