qml css js,css – 对QML进行样式化,而无需手动标记要设置样式的每个属性

首选方式是不将样式应用于默认组件,而是从这些组件派生以创建预先定制的自定义组件.

我为我的项目做什么

首先,我创建一个集中的“主题”文件,作为JavaScript共享模块：

// MyTheme.js

.pragma library;

var bgColor = "steelblue";

var fgColor = "darkred";

var lineSize = 2;

var roundness = 6;

接下来,我创建依赖它的自定义组件：

// MyRoundedRect.qml

import QtQuick 2.0;

import "MyTheme.js" as Theme;

Rectangle {

color: Theme.bgColor;

border {

width: Theme.lineSize;

color: Theme.fgColor;

}

radius: Theme.roundness;

}

然后,我可以使用单行代码使用我的预先设定的组件：

MyRoundedRect { }

这种方法有一个很大的优势：它真的是面向对象,而不是简单的剥皮.

如果您希望您甚至可以在自定义组件中添加嵌套对象,例如文本,图像,阴影等…甚至一些UI逻辑,如鼠标悬停上的颜色更改.

PS：是的,可以使用QML单例而不是JS模块,但是它需要额外的qmldir文件,并且仅从Qt 5.2支持,这可能是限制.显然,上下文属性中的C QObject也可以工作(例如,如果要从磁盘上的文件加载皮肤属性…).