在运行时动态更改 QML 主题

Posted

技术标签:

【中文标题】在运行时动态更改 QML 主题【英文标题】:Dynamically change QML theme at runtime 【发布时间】:2016-03-31 13:53:57 【问题描述】:

我实际上正在使用此处提供的解决方案:https://***.com/a/25864815/2425044

我想去掉import "MyTheme.js" as Theme; 语句,以便在运行时动态加载特定主题(通常由用户选择)。

我目前正在做的是将我的每个 Themes.js 文件加载到 qrc 文件中:

redTheme.qrc 包含 Theme.js blueTheme.qrc 包含 Theme.js

这些qrc文件被编译成外部二进制资源(rcc)并从二进制目录加载,使用

registerResource(const QString &rccFileName, const QString &mapRoot = QString())

到目前为止,一切正常。唯一的问题是我在QML 文件中遇到了import 语句:

import "qrc:/redTheme/Theme.js" as Theme

因此,尽管将blueTheme.rcc 注册为资源,但它永远不会被使用。

【问题讨论】:

【参考方案1】:

感谢其他线程,我能够让它工作。

首先,像这个用户一样创建您的主题,它继承自 AbstractStyle,从而提供更大的灵活性。

https://***.com/a/25866188/2425044

然后我们的property 将由JS 函数返回的值定义:

import "qrc:/graphics/componentCreation.js" as Theme

Item

    id: homeViewItem
    anchors.centerIn: parent

    // Load default theme at startup
    property AbstractTheme currentTheme: Theme.createThemeObject(homeViewItem, "qrc:/redTheme/redTheme.qml");

    Rectangle 
    
        color: currentTheme.textColorStandard;
    

componentCreation.js

// Create themes components and load them in the apps' QML files

var component;
var sprite;

function createThemeObject(item, themePath)

    component = Qt.createComponent(themePath);
    sprite = component.createObject(item);

    if (sprite === null)
        console.log("componentCreation.js: error creating " + themePath + " object");
    else
        return sprite;

假设您想在用户点击 Button 时更改主题:

Button

    id: themeButton
    text: "Change to blue theme"
    onClicked:
    
        // Remove content of redTheme.rcc, register blueTheme.rcc
        cpp_class.changeTheme("redTheme", "blueTheme")
        // blueTheme's content is now available, let's fill its content into a QML object
        currentTheme = Theme.createThemeObject(homeViewItem, "qrc:/blueTheme/blueTheme.qml")
    

请记住,redTheme.qmlblueTheme.qml 包含在 qrc 文件中,这些文件本身会编译成 rcc 文件。

这是changeTheme(const QString&, const QString&)的定义,它取消注册旧主题并注册新主题:

void cpp_class::changeTheme(const QString &oldTheme, const QString &newTheme)

    bool un = QResource::unregisterResource(QCoreApplication::applicationDirPath() + "/data/themes/" + app + "/" + oldTheme + ".rcc");
    if (!un)
        std::cerr << oldTheme.toStdString() << "could not be unregistered" << std::endl;
    bool in = QResource::registerResource(QCoreApplication::applicationDirPath() + "/data/themes/" + app + "/" + newTheme + ".rcc");
    if (!in)
        std::cerr << newTheme.toStdString() << "could not be registered as an external binary resource" << std::endl;

其他对我有帮助的主题:

https://wiki.qt.io/Qml_Styling

http://www.slideshare.net/BurkhardStubert/practical-qml-key-navigation(从第 34 张幻灯片开始)

【讨论】:

以上是关于在运行时动态更改 QML 主题的主要内容,如果未能解决你的问题,请参考以下文章

运行时更改Connections的target

在运行时更改 Material UI 反应主题的最佳方式

PyQt5 动态更改应用程序主题/调色板

springaop动态加载不同类

QT QML 自定义按钮 - 动态改变文本和图像的相对位置

动态更改SwiftMailer中的smtp设置