在qt样式表中使用变量

Question

在 .qss 文件中是否有可能为十六进制/RGB 数值指定变量名称？例如：

myColor = #FFCC08
QPushButton { background-color: myColor;}

这样我就可以在样式表顶部定义变量，并在需要的地方使用变量名称，而不是使用十六进制代码。此外，如果我需要更改颜色，那么只需更改一个位置即可反映到整个文件中。

我还搜索了Sass，但不知道如何在qt中使用。

谢谢 :)

- SAM

Answer 1

你可以很容易地构建自己的小型Sass：

1. 创建一个文本文件，其中包含变量的定义。使用类似这样的简单格式：

@myColor  = #FFDDEE
@myColor2 = #112233 
@myWidth  = 20px

2. 在 qss 文件中使用变量名：

QPushButton { 
    background-color: @myColor; 
    min-width: @myWidth;
}

3.打开两个文件，对于定义文件中的每个变量，在qss文件中将其出现替换为来自定义文件的值（字符串）。这是一个简单的字符串替换操作。

4.在应用程序中应用预处理后的qss文件。

这是最简单的解决方案。您可以在应用程序之外更改定义文件和qss文件，并在不重新编译代码的情况下应用它。

- Pucor

---

感谢您的时间。我使用相同的逻辑创建了自己的解析器，它将在.qss文件中定义的每个自定义变量颜色替换为实际颜色。 - SAM

Answer 2

您想要实现的目标纯Qt样式表是无法实现的。

您可以通过在C++代码中修改和重新加载样式表来实现类似的效果，例如：

QString myColor = "#FFCC08";
QString styleSheet = "QPushButton { background-color: %1;}";
...
myWidget->setStyleSheet( styleSheet.arg(myColor) );

不幸的是，这种方法有一些缺点（无法在设计器中预览，需要修改代码而不是样式表），但这已经是你用Qt能实现的最接近的效果了。

- Chris

---

是的，我明白，但上述方法的问题在于我们正在为每个组件在C++代码中指定样式表属性，而不是从.qss文件中读取。感谢您的时间。 - SAM

Answer 3

另一种实现这个的方法是使用动态属性。这将使您能够轻松地为对象或对象组分配多个属性，有点像将CSS类分配给对象。

例如，在您的UI文件中，您可以添加一个名为“colorStyle”的字符串动态属性，并将其值设置为“myStyle1”。https://wiki.qt.io/Dynamic_Properties_and_Stylesheets

你的样式表应该长这个样子：

QPushButton[colorStyle='myStyle1'] {
    background-color: #FFCC08;
    ... any other style changes...
}

如果您在全局设置样式表，那么分配“myStyle1”样式的任何QPushButton都会遵循该样式表。

- DaveK

Answer 4

这里提供了一种使用sass的解决方案。首先，安装Python绑定：

pip install sass

然后，使用它：

import sys
import sass
app = QApplication(sys.argv)

# Create your sass style sheet (you can also write this in a file and load the file)
style = '''
$bg-dark: #292929;

QPushButton {
color: red;
background-color: $bg-dark;
}
'''.encode('utf-8')

# Compile Sass to CSS
style = sass.compile_string(style).decode()

# And set it to your app
app.setStyleSheet(style)

- Overdrivr

---

如果您已经在使用Python，为什么不使用内置的字符串格式化与kwargs，而不是sass呢？例如：'... background-color: {bg_dark}; ...'.format(..., bg_dark='#292929', ...)。 - djvg

好的观点，对于这个特定的答案也可以。但是Sass不仅可以替换变量，还可以使用mixin、导入、嵌套规则等功能。最终，您可以更轻松、更优雅地为复杂的应用程序添加样式。 - Overdrivr

Answer 5

在Python中，您可以使用字符串连接。它很容易实现。

self.setStyleSheet("""QPushButton { %s;}""" % (myColor))

- tCot

Answer 6

我有类似但不同的问题。在我的情况下，我想将窗口大小连接到QCheckBoxIndicator。由于css已经使用了{}，所以下面的代码无法工作。

        self.checkBoxYes.setStyleSheet('''
        QCheckBox::indicator {
        width: {sz} px;
        height: {sz} px;
        }
        '''.format(sz=rel_sz))

然而，可以通过使用以下旧格式化字符串来实现解决方法：

def resizeEvent(self, a0) -> None:
    rel_wdth = self.width() // 20
    rel_hgh = self.height() // 10
    rel_sz = str(min(rel_hgh, rel_wdth))
    self.checkBoxYes.setStyleSheet('''
        QCheckBox::indicator {
        width: %s px;
        height: %s px;
        }
        ''' %(rel_sz, rel_sz))
    return super().resizeEvent(a0)

- Edi Sugiarto