Question

我知道QML不像小部件那样支持CSS样式，我已经阅读了关于样式/主题的替代方法：

这些方法的共同点是，它们要求开发人员通过绑定到“样式化QML文件/单例”中的属性，或者通过使用加载程序加载不同的方式来指定可以设置样式的QML部分基于样式名称的QML组件。我想要的是像CSS中的“id”选择器而不是“类”选择器，因此单个QML文件不必知道它们是否将在以后设置样式。

我目前的方法使所有QML文件看起来与此类似（使用链接2中的方法）：

Main.qml

Rectangle {
    Id: background
    color: g_theme.background.color 
    //g_theme is defined in root context and loaded dynamically
}

我想做的是：

Main.qml

Rectangle {
    Id: background
    color: “green” // default color
}

然后有一个定义（或类似）

的样式文件

Main.qml #background.color: red

目前这是可能的，还是未来Qt版本的管道，或者首选的样式方式是否与上述链接中描述的方法类似？

Answer 1

首选方法是不在默认组件上应用样式，而是从这些组件派生以创建预先设置的自定义组件。

我为我的项目做了什么：

首先，我创建了一个集中的“主题”文件，作为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也可以工作（例如，如果你想从磁盘上的文件加载皮肤属性......）。

Answer 2

查看Qt Quick Controls Styles

也可能会有所帮助

使用“控件样式”时，无需在目标控件中显式指定每个属性。所有属性都可以在单独的[ControlName]Style组件中定义（例如ButtonStyle）然后在目标组件（例如Button）中，您只需在一行代码中引用样式组件。

唯一的缺点是Style组件仅适用于Qt Quick Controls。不适用于任何Qt组件。

样式化QML而无需手动标记要设置样式的每个属性

2 个答案: