Kit de estilo de Qt Labs

StyleKit es un sistema de estilo declarativo para Qt Quick Controlsconstruido sobre Qt Quick Templates. Le permite definir un estilo visual completo para todos sus controles desde un único objeto Style, incluyendo soporte para themes, state-based styling, y transitions. StyleKit maneja la implementación de la plantilla subyacente automáticamente, permitiéndole centrarse puramente en aspectos visuales como colors, dimensions, borders, y shadows.

Uno de los puntos fuertes de StyleKit es su sistema jerárquico de propiedades: si se establece una propiedad una vez en un tipo base como abstractButton, se aplica automáticamente a todos los controles tipo botón. Puede anularla cuando sea necesario para controles o estados específicos. Los cambios en el estilo se reflejan al instante en todos los controles, lo que garantiza la coherencia y permite una personalización detallada.

Para los controles que necesitan un comportamiento personalizado más allá de lo que proporciona StyleKit, puede implementar plantillas personalizadas e integrarlas sin problemas junto con los controles de estilo StyleKit.

Características principales

Estilización declarativa: una API QML fácil de usar que le permite centrarse en el diseño en lugar de en la implementación.
Fallbacks jerárquicos: todas las propiedades se propagan. Defínalas una vez y anúlelas cuando sea necesario
Estilización basada en estados: diseñe apariencias separadas para los elementos sobrevolados, pulsados, enfocados, etc.
Transiciones animadas: defina animaciones suaves entre estados.
Soporte de temas - Diseñe temas claros y oscuros, y cualquier número de temas personalizados.
Variaciones - Diseñe múltiples variaciones de los mismos controles
Integración de paletas y fuentes - Configure paletas de controles y fuentes utilizando QML

El siguiente ejemplo muestra un ejemplo mínimo de un Estilo:

// 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)
        }
    }
}

Así es como se configura el estilo en su aplicación:

// Main.qml

import QtQuick
import Qt.labs.StyleKit

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

    // Assign the style to be used
    StyleKit.style: PlainStyle {}

    // Controls are used as normal
    Column {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        Button {
            text: "Button"
        }

        Slider {
            width: 200
        }
    }
}

Uso del Módulo en su Proyecto

Los tipos QML del módulo están disponibles a través de la importación QtQuick.labs.StyleKit. Para utilizar los tipos, añada la siguiente sentencia import a su archivo .qml:

import Qt.labs.StyleKit

Artículos y Guías

Ejemplos

Ejemplo StyleKit - Muestra cómo aplicar estilo Qt Quick Controls utilizando StyleKit.

Tipos QML

AbstractStylableControls	Tipo base abstracto que contiene los tipos de control que pueden ser estilizados
AbstractStyle	Tipo base abstracto con propiedades comunes a Style y Theme
BorderStyle	Define el estilo de borde para un delegado
ControlStateStyle	Describe el estilo de un control en un estado determinado
ControlStyle	Define el estilo de un control en estado normal
ControlStyleProperties	Define las propiedades estilizables de un control
CustomControl	Define el estilo de un control personalizado (no incorporado)
CustomTheme	Definición de un tema personalizado
DelegateStyle	Define la apariencia visual de un elemento dentro de un control
HandleStyle	Define el estilo de control para controles como Switch, Slider y RangeSlider
ImageStyle	Define el estilo de la imagen de un delegado
IndicatorStyle	Define el estilo del indicador de un control
ShadowStyle	Define el estilo de la sombra paralela de un delegado
Style	Tipo raíz para una definición de estilo
StyleAnimation	Anima los cambios de propiedades de estilo durante las transiciones de estado
StyleKit	Un singleton para establecer y acceder al estilo actual
StyleKitDebug	Rastrea cómo se resuelven las propiedades de estilo de un control
StyleReader	Lee las propiedades del estilo activo para un control específico
StyleVariation	Define estilos alternativos para controles específicos
StyledItem	Renderiza un DelegateStyle
SubIndicatorStyle	Define el estilo para un subindicador delegado
TextStyle	Define el estilo de texto para la etiqueta de un control
Theme	Define anulaciones de color y estilo para un esquema de color

Licencias

Qt Labs StyleKit está disponible bajo licencia comercial de The Qt Company. Además, está disponible bajo la Licencia Pública General Reducida de GNU, versión 3, o la Licencia Pública General de GNU, versión 2. Vea Licencias Qt para más detalles.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.