Style QML Type

Le type racine d'une définition de style. En savoir plus...

Ce type est en préversion technique et est susceptible d'être modifié.

• Liste de tous les membres, y compris les membres hérités

Propriétés

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

Description détaillée

Style Il s'agit du type racine de StyleKit permettant de définir un style visuel complet pour Qt Quick Controls. Un style vous permet de personnaliser l’apparence de every control type — backgrounds, indicators, handles, text, padding, et bien d’autres — ainsi que la manière dont les contrôles réagissent à des états tels que hovered, pressed, et disabled, y compris les transitions animées transitions entre ces états.

Les styles prennent en charge les schémas de couleurs light et dark via themes, et vous pouvez également ajouter autant de custom themes que vous le souhaitez. Les Style variations vous permettent de définir des styles alternatifs pouvant être appliqués à des instances de contrôle spécifiques ou à des types de contrôle entiers. Vous pouvez également définir des custom controls pour étendre le style au-delà de l’ensemble de contrôles intégré.

L'exemple suivant présente un style minimal qui définit certaines propriétés structurelles communes à tous les thèmes, avec des thèmes clairs et sombres distincts pour les couleurs :

// PlainStyle.qml

import QtQuick
import Qt.labs.StyleKit

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

    button {
        background {
            width: 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.fillWidth: true
        indicator.height: 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)
        }
    }
}

Pour un exemple plus complet, consultez l’exemple « StyleKit Quick Controls ».

Voir également Theme, CustomTheme, StyleVariation, ControlStyle, DelegateStyle, CustomControl et Résolution des propriétés StyleKit.

Documentation sur les propriétés

availableThemeNames : list<string> [read-only]

Les noms de tous les thèmes disponibles, notamment "System", "Light", "Dark", ainsi que tous les autres custom themes.

Voir également themeName et customThemeNames.

customThemeNames : list<string> [read-only]

Les noms de toutes les custom themes définies dans le style. Cela n'inclut pas la balise built-in themes.

Voir également availableThemeNames, themeName et CustomTheme.

dark : Component

Le composant « thème sombre ». Il est instancié et appliqué lorsque le système est en mode sombre et que la propriété ` themeName ` a la valeur ` "System"`, ou lorsque la propriété ` themeName ` est explicitement définie sur ` "Dark"`.

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

Voir également light et themeName.

fallbackStyle : Style

Le style de secours sert à définir les propriétés qui ne sont pas explicitement définies dans ce style. Lorsqu'une propriété n'est pas présente dans le style ou dans son thème actif, StyleKit la recherche dans le style de secours.

Par défaut, le style de secours est défini sur un style interne qui offre une apparence de base similaire à celle du style « Basic ».

Vous pouvez le définir sur un style personnalisé, ou sur null pour désactiver complètement la résolution de secours. Notez que le définir sur null revient à repartir de zéro, ce qui vous oblige à définir beaucoup plus de propriétés que nécessaire. Vous trouverez ici une implémentation de référence d’un style de secours .

light : Component

Le composant « thème clair ». Il est instancié et appliqué lorsque le système est en mode clair et que la propriété « themeName » a la valeur « "System" », ou lorsque la propriété « themeName » est explicitement définie sur « "Light" ».

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

Voir également dark et themeName.

palette : palette [read-only]

La palette du contrôle dont le style est défini.

Utilisez cette palette pour associer les couleurs du style aux palette s du contrôle dont le style est en cours de définition. Si l'application attribue une palette différente à un contrôle, le style s'adaptera et le contrôle sera rafraîchi.

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

Voir également « StyleReader::palette ».

theme : Theme [read-only]

L'instance du thème actuellement active. Elle est instanciée à partir soit de light theme component, soit de dark theme component, soit de l'un des fichiers custom themes, en fonction de la valeur de themeName.

Lorsqu’il s’agit de résoudre une propriété de style, StyleKit la recherche d’abord dans ce thème (à l’exception deStyleVariations ). Si la propriété n’est pas trouvée, il se rabat alors sur Style pour la rechercher.

Voir également themeName, light et dark.

themeName : string

Nom du thème actuellement actif. La valeur par défaut est « "System" », qui choisit automatiquement entre light ou dark en fonction de la palette de couleurs indiquée par QStyleHints::colorScheme.

Vous pouvez définir cette propriété pour modifier le thème actuel de ce style.

// 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.availableThemeNames
    onCurrentTextChanged: StyleKit.style.themeName = currentText
}

Valeurs prises en charge :

• "System" — suit QStyleHints::colorScheme (par défaut)
• "Light" — impose le thème light
• "Dark" — impose le thème de dark
• Any custom theme name

Voir également « availableThemeNames » et « theme ».