QML中使用qss文件

8 篇文章 1 订阅
本文介绍了在QML中通过JavaScript文件(testtheme.js)加载和管理不同QSS样式的技巧,以及如何使用JSON数据结构实现多套风格的动态切换。
摘要由CSDN通过智能技术生成

QML中如何使用QSS?尝试了诸多方法,比如:Qt.styleSheet.load("qss.qss"),后来发现可以借助.js文件来实现多套qss的切换,具体方法如下:

1、编写main.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import "testtheme.js" as Theme

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Working Log Tool")

    //use qss by Theme
    Button{
        text: Theme.text
        palette.buttonText: Theme.fgColor
        anchors.centerIn: parent
        background: Rectangle{
            color: Theme.bgColor
        }
    }
}

2、右键项目并选择"添加新文件",然后在"Qt"一列中选择"JS文件",然后下面是testtheme.js的具体实现:

.pragma library;
var bgColor = "#ff0";
var fgColor = "#f00";
var text = "This is a test";

3、编译运行,ok。上面是一套qss的风格,要是想实现多套风格的,怎么做?在js中模拟实现json的数据结构,这样通过不同的key(qss kind name)来获取具体的Object,然后通过Object来取具体的数值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值