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

Question

我有Theme1.js，它具有与主题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

首先，它不建议d要使用js库来存储值，您将绑定到更高版本。 This is as it is not advised to bind to var-types。你应该考虑把你的库变成QtObject-单一。

仅将函数库用作函数库。

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