StyleVariation QML Type

Define estilos alternativos para controles específicos. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• name : string

Propiedades anexas

• controlType : int
• variations : list<string>

Descripción detallada

Una StyleVariation te permite definir estilos alternativos que pueden ser aplicados a controles específicos en la aplicación(variaciones de instancia), o a todos los descendientes de un tipo de control padre en particular(variaciones de tipo). Por ejemplo, puede dar a los controles de una barra lateral un aspecto compacto, o hacer que los botones dentro de todos los toolbars tengan un aspecto diferente al de los botones de cualquier otro lugar.

Variaciones de instancia

Las variaciones de instancia se activan estableciendo la propiedad adjunta variations en cualquier elemento de la aplicación - todos los controles StyleKit que sean hijos o descendientes de ese elemento recibirán el estilo alternativo. Las variaciones también pueden establecerse en múltiples niveles de la jerarquía simultáneamente; cuando entran en conflicto, la variación más cercana al control tiene preferencia.

Las variaciones de instancia se definen en Style o Theme a las que afectan:

Style {
    StyleVariation {
        name: "mini"
        control {
            padding: 2
            background.implicitHeight: 15
            indicator.implicitWidth: 15
            indicator.implicitHeight: 15
            handle.implicitWidth: 15
            handle.implicitHeight: 15
        }
    }

    StyleVariation {
        name: "alert"
        abstractButton.background.color: "red"
    }
}

Y se aplican desde la aplicación utilizando la propiedad adjunta variations:

GroupBox {
    title: "Mini controls"
    StyleVariation.variations: ["mini"]

    Row {
        spacing: 10
        Button { text: "Save" }
        CheckBox { text: "Option" }
        // This button also has the "alert" variation, in addition to "mini"
        Button {
            text: "Delete"
            StyleVariation.variations: ["alert"]
        }
    }
}

Los nombres de variaciones a los que se hace referencia desde la aplicación y que no están definidos en el estilo (o tema) activo se ignoran silenciosamente - actúan como pistas que el autor del estilo puede elegir implementar o dejar sin tratar.

Variaciones de tipo

Las variaciones de tipo se asignan a la propiedad variations de un ControlStyle específico, sin requerir un name. A diferencia de las variaciones de instancia - que requieren que la aplicación opte explícitamente por ellas - las variaciones de tipo se aplican automáticamente a todos los controles de un tipo dado siempre que sean descendientes del tipo de control padre especificado.

El siguiente fragmento muestra cómo hacer que todos los Buttons dentro de un Frame parezcan distintos de los botones de cualquier otro lugar:

Style {
    frame {
        variations: StyleVariation {
            button {
                text.color: "ghostwhite"
                background.border.width: 0
                background.color: "slategrey"
            }
        }
    }

    groupBox {
        // groupBox falls back to frame. Therefore, if the varations set on a
        // frame is not wanted on a groupBox, just override it and set it back to [].
        variations: []
    }
}

Dado que groupBox desciende hasta frame en la jerarquía de estilos, las variaciones de tipo establecidas en frame también son heredadas automáticamente por groupBox. Para no hacerlo, restablezca las variaciones para el subtipo.

Orden de propagación

Una StyleVariation es local a Style o Theme donde está definida. Un Tema no puede hacer sombra a una StyleVariation entera definida en el Estilo - sólo propiedades individuales dentro de ella pueden ser anuladas, como cualquier otra propiedad de estilo.

Por ejemplo, si tanto el Style como el Theme activo definen frame.variations, ambas matrices de variación de tipo tienen efecto para un Frame. El orden de resolución para las propiedades individuales es: las propiedades de variación del Tema tienen precedencia sobre las propiedades directas del Tema, que tienen precedencia sobre las propiedades de variación del Estilo, que tienen precedencia sobre las propiedades directas del Estilo.

Lo mismo se aplica a las variaciones de instancia. Una StyleVariation definida en Theme tiene preferencia sobre las propiedades directas del Tema. Si una StyleVariation con el mismo name también está definida en el Style, ambas tienen efecto, siguiendo el mismo orden de resolución descrito anteriormente.

En el siguiente fragmento, un botón con StyleVariation.variations: ["alert"] será rojo en el tema claro y cian en el tema oscuro, con un borde de 4 píxeles en ambos. Como el tema oscuro anula button.background.radius para que sea 6, esa propiedad tiene prioridad sobre la background.radius establecida en la variación del Estilo. Como resultado, el radio del botón termina siendo 6 en el tema oscuro, pero 0 en el tema claro:

Style {
    button.background.radius: 2
    StyleVariation {
        name: "alert"
        button.background.border.width: 4
        button.background.radius: 0
    }

    light: Theme {
        StyleVariation {
            name: "alert"
            button.background.color: "red"
        }
    }

    dark: Theme {
        button.background.radius: 6
        StyleVariation {
            name: "alert"
            button.background.color: "cyan"
        }
    }
}

Véase también Style, Theme, ControlStyle.variations, y StyleVariation.variations.

Documentación de propiedades

name : string

El nombre de esta variación.

El nombre identifica esta variación cuando se utiliza como instance variation.

Véase también variations y Instance Variations.

Documentación de propiedades adjuntas

StyleVariation.controlType : int

Esta propiedad identifica el control type del elemento al que se adjunta.

StyleKit la utiliza para resolver type variations para los controles descendientes - si el controlType de un elemento padre coincide con un tipo de control que tiene variations definido en el Style, esas variaciones se aplican a todos los controles descendientes.

Los controles incorporados establecen esta propiedad automáticamente. Los controles personalizados deben establecerla explícitamente para participar en la resolución de variaciones de tipo.

Véase también ControlStyle.variations y StyleReader.controlType.

StyleVariation.variations : list<string>

Esta propiedad contiene la lista de instance variations a activar para un Control, y sus controles descendientes.

Si varias variaciones de la lista establecen la misma propiedad, tiene preferencia la primera de la lista.

Si se establecen variaciones tanto en un elemento padre como en un control descendiente, se aplican ambos conjuntos, teniendo preferencia las variaciones propias del control sobre las heredadas del padre.

GroupBox {
    title: "Mini controls"
    StyleVariation.variations: ["mini"]

    Row {
        spacing: 10
        Button { text: "Save" }
        CheckBox { text: "Option" }
        // This button also has the "alert" variation, in addition to "mini"
        Button {
            text: "Delete"
            StyleVariation.variations: ["alert"]
        }
    }
}

Véase también name.