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

Question

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

Theme1.js

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

Theme2.js

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

ma​​in.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 来存储值，稍后会绑定。 This is as it is not advised to bind to var-types。您应该考虑将您的库转换为 QtObject-singletons。

仅将库用作函数库。

要更改主题，您可能需要一个单例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')
}