StyleKit 属性解析

一个样式属性（例如background.color ）可能会根据控件的state 、当前Theme 以及有效style variations 而具有多种不同的值。例如，它在pressed 和hovered 状态之间，或者在light 和dark 主题之间可能有所不同。本文详细说明了StyleKit 如何确定该属性在用于为特定Control 设置样式时所获得的值。

控件状态

控件的外观会根据交互情况而变化——例如hovered 、pressed 、checked 、focused 、disabled 等。在解析属性时，StyleKit 会先遍历所有特定于状态的值，然后才检查正常状态。

例如，如果Button 的值为hovered ，则会先检查hovered.button.background.color ，再检查button.background.color 。如果该属性还设置了pressed ，则会先检查pressed.button.background.color ，再检查前两者。各状态之间的优先级顺序在ControlStateStyle documentation 中有详细说明。

状态也可以嵌套。例如，pressed.hovered.button.background.color 这样的组合比pressed.button.background.color 或hovered.button.background.color 单独使用更具体，并且优先级高于这两者。

备用属性

某些样式属性可以通过多种方式设置。例如，背景的左上角圆角既可以直接使用 `background.topLeftRadius` 设置，也可以间接使用 `background.radius ` 设置（后者将所有角都设置为相同的圆角半径）。 对于此类属性，StyleKit 会先检查具体属性，再检查备选属性，并在当前状态下将两者均处理完毕后，才会转至更不具体的状态。例如，当鼠标悬停在控件上时，button.hovered.background.radius 的优先级高于button.background.topLeftRadius 。当然，button.hovered.background.topLeftRadius 的优先级高于这两者。

控件类型层次结构

The controls 构成一个层次结构。button 会回退到abstractButton ，后者又会回退到control 。groupBox 会回退到frame ，后者又会回退到pane ，再回退到control ，以此类推。control 是该层次结构中的根类型，与 Qt Quick Controls。请参阅各控件类型的《documentation 》，以了解其直接回退类型。

当特定控件类型的所有状态和回退属性均已用尽时，StyleKit 会向上遍历层次结构，检查该属性是否在基类型中已设置。例如，如果button.background.color 未设置，StyleKit 将转而检查abstractButton.background.color ，以此类推。 这促使设计者将多个控件共有的属性值归纳到一个通用的基类中，以最大限度地提高复用率并减少重复。例如，你可以将按钮、复选框和单选按钮共有的所有属性值放在abstractButton 中，并在具体的子类中仅设置不同的属性。

请注意，更具体类型中的任何状态（包括正常状态）都优先于基类中的任何状态。例如，button.background.color 的优先级高于hovered.abstractButton.background.color ，即使控件处于悬停状态也是如此。当然，hovered.button.background.color 的优先级高于上述两者。

样式与主题

控件类型层次结构在Style 和Theme 内部均会重复出现。在解析属性时，StyleKit 会首先遍历活动Theme 中的控件类型层次结构，然后遍历活动Style 中的控件类型层次结构。这意味着在活动主题中设置的属性优先于在样式中设置的属性。因此，主题中的基类也会覆盖样式中更具体的类型。 例如，theme.control.background.color 的优先级高于style.button.background.color 。

样式变体

控件类型层次结构在StyleVariation 中被重复。样式变体既可以在样式中定义，也可以在主题中定义，且主题中的样式变体优先于主题本身。由于主题优先于样式，因此当前主题中的样式属性也将优先于样式中的样式变体。 例如，theme.button.background.color 的优先级高于style.variation.button.background.color 。

备用样式

每个Style 都拥有一个fallback style ——这是一种完整的样式，当无法在活动样式中解析某项属性时，它将作为最后手段发挥作用。如果完整的解析过程（涵盖控件类型、状态、活动主题以及任何样式变体）未能找到相应值，StyleKit 将使用fallback style重新执行整个过程。 默认的回退样式与“基本样式”相似，因此即使是一个空样式，仍能生成具有完整样式的控件。

回退样式本身也可以拥有回退样式，StyleKit 会递归地沿着这条链进行遍历，直到找到值或遍历完整个链。如果未找到值，则使用默认值。

综合应用

StyleKit 举个例子，假设StyleKit 需要为hovered 中的Button 解析background.color 。该样式有一个主题，且样式和主题都有一个活动变体。此时， 会按顺序检查以下位置，并采用找到的第一个值：

• theme.variation.hovered.button.background.color
• theme.variation.button.background.color
• theme.variation.hovered.abstractButton.background.color
• theme.variation.abstractButton.background.color
• theme.variation.hovered.control.background.color
• theme.variation.control.background.color
• theme.hovered.button.background.color
• theme.button.background.color
• theme.hovered.abstractButton.background.color
• theme.abstractButton.background.color
• theme.hovered.control.background.color
• theme.control.background.color
• style.variation.hovered.button.background.color
• style.variation.button.background.color
• style.variation.hovered.abstractButton.background.color
• style.variation.abstractButton.background.color
• style.variation.hovered.control.background.color
• style.variation.control.background.color
• style.hovered.button.background.color
• style.button.background.color
• style.hovered.abstractButton.background.color
• style.abstractButton.background.color
• style.hovered.control.background.color
• style.control.background.color

如果遍历所有这些位置后仍未找到值，则在备用样式中重复相同的流程（如果备用样式也有备用样式，则递归进行）。如果仍然找不到，则使用默认值。

属性解析的调试

由于有多种控件类型、主题、变体和备用样式共同决定了属性的最终值，有时很难确定某个控件为何最终呈现出特定的外观。StyleKitDebug 是一款诊断性应用内工具，它会将读取的每个样式属性记录到调试输出中，精确显示该属性是从哪个层级和控件类型解析而来的。

要开始跟踪，请将您想要检查的控件赋值给StyleKit.debug.control 属性：

ApplicationWindow {
    id: app
    width: 1024
    height: 800
    visible: true

    StyleKit.debug.control: someButton
    StyleKit.debug.filter: "background.color"

    StyleKit.style: Style {
        button {
            background.color: "gray"
            hovered.background.color: "dimgray"
        }
        dark: Theme {
            button {
                background.color: "skyblue"
                hovered.background.color: "lightblue"
            }
        }
    }

    Column {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        Button {
            id: someButton
            text: "A Button"
        }
    }
}

每个解析出的属性都会以单行形式打印出来，例如：

[read] StyleReader[Hovered].button.background.color -> Style.Theme(Dark).button[Hovered] = #add8e6

输出中的StyleReader 指的是Button 内部用于读取其样式属性值的StyleReader 。

使用 `filter ` 属性可将输出范围限制为感兴趣的属性。