qml - 如何为 QML 创建动态的全局主题？

Question

这篇文章declare global property in QML for other QML files很好地展示了如何创建全局主题，但是如何创建一个可以由用户轻松切换的主题呢？我想您需要一些全局信号来告诉组件值发生了变化，但它是否已经隐含在对象中？

例如，我想要做的是有一个看起来像这样的样式:

pragma Singleton
import QtQuick 2.2


var boolean darkTheme = true;

function employDarkTheme() {
    darkTheme = true;
}

function employLightTheme() {
    darkTheme = false;
}

QtObject {

    property QtObject font: QtObject {
        property QtObject pointSize: QtObject {
            property int menu: 10
            property int normal: 12
            property int subTitle: 18
            property int title: 24
        }
        property QtObject color: QtObject {
            property color primary: darkTheme ? "black" : "white"
            property color secondary: darkTheme ? "white" : "black"
        }
    }

    property QtObject background: QtObject {
        property QtObject color: QtObject {
            property color primary: darkTheme ? "#333333" : "white"
            property color secondary: darkTheme ? "white" : "#333333"
        }
    }
}

QML 目前的工作方式是否可能实现类似的功能？

Answer 1

经过一番尝试后，我发现这实际上是可能的，而且做起来相当简单。如果您使用以下代码而不是以前的代码:

pragma Singleton
import QtQuick 2.2

QtObject {
    property var darkTheme: true

    property QtObject font: QtObject {
        property QtObject pointSize: QtObject {
            property int menu: 10
            property int normal: 12
            property int subTitle: 18
            property int title: 24
        }
        property QtObject color: QtObject {
            property color primary: darkTheme ? "black" : "white"
            property color secondary: darkTheme ? "white" : "black"
        }
    }

    property QtObject background: QtObject {
        property QtObject color: QtObject {
            property color primary: darkTheme ? "#333333" : "white"
            property color secondary: darkTheme ? "white" : "#333333"
        }
    }
}

并且每当更改darkTheme时，它都会更改对象，激活信号/槽并更改整个应用程序。