在MouseClick上在运行时动态更改QML主题

Question

我有Theme1.js,它具有与Theme 1样式相关的属性变量,类似于我有主题2,Theme2.js现在在main.qml中,如果我点击MouseArea,主题应该在Theme1和Theme2之间切换.我发现QML中不存在条件导入语句.还有其他办法吗？

Theme1.js

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

Theme2.js

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
    }
}

Answer 1

首先，不建议使用js-library 来存储值，稍后会绑定。这是因为不建议绑定到var-types。您应该考虑将您的库转换为QtObject-singleton。

仅将库用作函数库。

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

pragma Singleton
import QtQuick 2.0

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

与Theme.qml是这样的：

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

然后是Theme1.qml

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

和Theme2.qml是：

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

然后你将你的属性绑定到 color: Style.current.colorX

要更改样式，请将另一个主题分配给 Style.current

编辑： 这可能是一种优化，使用中间变量来缩短值的路径。它增加了不需要使用Style.current.color0但Style.color0至少可以使用的便利。

你可以用它来代替你的Style.qml

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')
}