Style QML Type

El tipo raíz de una definición de estilo. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• Stretch : int
• customThemeNames : list<string>
• dark : Component
• fallbackStyle : Style
• light : Component
• palette : palette
• theme : Theme
• themeName : string
• themeNames : list<string>

Descripción detallada

Style es el tipo raíz en StyleKit para definir un estilo visual completo para Qt Quick Controls. Un estilo le permite personalizar la apariencia de every control type - backgrounds, indicators, handles, text, padding, y más - así como la forma en que los controles responden a estados como hovered, pressed, y disabled, incluyendo la animación transitions entre ellos.

Los estilos son compatibles con los esquemas de color light y dark a través de themes, y también puede añadir cualquier número de custom themes. Style variations le permiten definir estilos alternativos que pueden aplicarse a instancias de control específicas o a tipos de control completos. También puede definir custom controls para ampliar el estilo más allá del conjunto de controles incorporado.

El siguiente ejemplo muestra un estilo mínimo que define algunas propiedades estructurales compartidas por todos los temas, con temas claros y oscuros separados para los colores:

// PlainStyle.qml

import QtQuick
import Qt.labs.StyleKit

Style {
    control {
        padding: 6
        background {
            radius: 4
            implicitWidth: 100
            implicitHeight: 36
        }
        indicator {
            implicitWidth: 20
            implicitHeight: 20
            border.width: 1
        }
        handle {
            implicitWidth: 20
            implicitHeight: 20
            radius: 10
        }
    }

    button {
        background {
            implicitWidth: 120
            shadow.opacity: 0.6
            shadow.verticalOffset: 2
            shadow.horizontalOffset: 2
            gradient: Gradient {
                GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
                GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
            }
        }
        pressed.background.scale: 0.95
    }

    slider {
        indicator.implicitWidth: Style.Stretch
        indicator.implicitHeight: 6
        indicator.radius: 3
    }

    light: Theme {
        applicationWindow {
            background.color: "whitesmoke"
        }
        control {
            text.color: "black"
            background.color: "#e8e8e8"
            background.border.color: "#c0c0c0"
            hovered.background.color: "#d0d0d0"
        }
        button {
            text.color: "white"
            background.color: "cornflowerblue"
            background.shadow.color: "gray"
            hovered.background.color: "royalblue"
        }
    }

    dark: Theme {
        applicationWindow {
            background.color: Qt.darker("gray", 2.0)
        }
        control {
            text.color: "white"
            background.color: "#3a3a3a"
            background.border.color: "#555555"
            hovered.background.color: "#4a4a4a"
        }
        button {
            background.color: "sandybrown"
            background.shadow.color: "black"
            hovered.background.color: Qt.darker("sandybrown", 1.2)
        }
    }
}

Para un ejemplo más completo, vea el Ejemplo StyleKit.

Véase también Theme, CustomTheme, StyleVariation, ControlStyle, DelegateStyle, CustomControl, y Resolución de propiedades.

Documentación de propiedades

Stretch : int [read-only]

Un valor centinela que, cuando se asigna a implicitWidth o implicitHeight de un delegado, hace que el delegado llene el espacio disponible a lo largo de ese eje. El espacio disponible estará limitado por las propiedades de diseño, como margins y padding.

Por ejemplo, para hacer que una ranura deslizante llene el ancho disponible:

slider {
    indicator.implicitWidth: Style.Stretch
    indicator.implicitHeight: 6
}

Véase también DelegateStyle::implicitWidth y DelegateStyle::implicitHeight.

customThemeNames : list<string> [read-only]

Los nombres de todos los custom themes definidos en el estilo. Esto no incluye los built-in themes.

Véase también themeNames, themeName y CustomTheme.

dark : Component

El componente de tema oscuro. Se instancia y se aplica cuando el sistema está en modo oscuro y themeName es "System", o cuando themeName se establece explícitamente en "Dark".

dark: Theme {
    control.background.color: "#404040"
    button.hovered.background.color: "#6ab0f9"
}

Véase también light, themeName, y Tema.

fallbackStyle : Style

El estilo alternativo utilizado para resolver las propiedades que no están explícitamente establecidas en este estilo. Cuando una propiedad no se encuentra en el estilo o en su tema activo, StyleKit la busca en el estilo alternativo.

Por defecto, el estilo alternativo se establece en un estilo interno que proporciona una apariencia básica similar al estilo Básico.

Puede establecerlo en un estilo personalizado o en null para desactivar por completo la resolución alternativa. Tenga en cuenta que establecerlo en null significa empezar desde cero, lo que requiere que establezca muchas más propiedades de las necesarias. Puede encontrar una implementación de referencia de un estilo alternativo aquí.

Véase también Resolución de propiedades.

light : Component

El componente de tema ligero. Se instancia y se aplica cuando el sistema está en modo luz y themeName es "System", o cuando themeName se establece explícitamente en "Light".

light: Theme {
    control.background.color: "#f0f0f0"
    button.hovered.background.color: "#4a90d9"
}

Véase también dark, themeName, y Tema.

palette : palette [read-only]

La paleta del control al que se aplica el estilo.

Utilice esta paleta para vincular los colores del estilo a la dirección palette del control al que se aplica el estilo. Si la aplicación asigna una paleta diferente a un control, el estilo se adaptará y el control volverá a pintarse.

button.background.color: palette.accent
button.text.color: palette.buttonText

Véase también StyleReader::palette.

theme : Theme [read-only]

El tema activo en ese momento. Es instanciado desde light theme component, dark theme component, o uno de custom themes, dependiendo de themeName.

Al resolver una propiedad de estilo, StyleKit la busca primero en este tema (StyleVariations aparte). Si no encuentra la propiedad, vuelve a buscarla en Style.

Véase también themeName, light, y dark.

themeName : string

El nombre del tema activo en ese momento. El valor por defecto es "System", que automáticamente elige entre light o dark dependiendo del esquema de color informado por QStyleHints::colorScheme.

Puede establecer esta propiedad para cambiar el tema actual de este estilo.

// Main.qml

StyleKit.style: YourStyleKitStyle {
    // Set a theme different from "System" at start-up
    themeName: "Dark"
}

ComboBox {
    // Let the user select a different theme at run-time
    model: StyleKit.style.themeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

Valores admitidos:

• "System" - sigue QStyleHints::colorScheme (por defecto)
• "Light" - fuerza el tema light
• "Dark" - fuerza el tema dark
• Any custom theme name

Véase también themeNames y theme.

themeNames : list<string> [read-only]

Los nombres de todos los temas disponibles, incluidos "System", "Light", "Dark", y cualquier custom themes.

Véase también themeName y customThemeNames.