Style QML Type

Le type racine d'une définition de style. Plus d'informations...

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

Propriétés

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

Description détaillée

Style est le type racine de StyleKit qui permet de définir un style visuel complet pour les contrôlesQt Quick . Un style vous permet de personnaliser l'apparence de every control type - backgrounds, indicators, handles, text, padding, et d'autres - ainsi que la façon dont les contrôles réagissent à des états tels que hovered, pressed, et disabled, y compris l'animation transitions entre eux.

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

L'exemple suivant montre un style minimal qui définit quelques propriétés structurelles partagées par tous les thèmes, avec des thèmes clairs et foncés distincts pour les couleurs :

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

Pour un exemple plus complet, voir l'exemple StyleKit.

Voir aussi Theme, CustomTheme, StyleVariation, ControlStyle, DelegateStyle, CustomControl, et Property Resolution.

Documentation sur les propriétés

Stretch : int [read-only]

Valeur sentinelle qui, lorsqu'elle est affectée à l'axe implicitWidth ou implicitHeight d'un délégué, permet à ce dernier de remplir l'espace disponible le long de cet axe. L'espace disponible sera limité par les propriétés de mise en page, telles que margins et padding.

Par exemple, pour remplir la largeur disponible d'une rainure de curseur :

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

Voir également DelegateStyle::implicitWidth et DelegateStyle::implicitHeight.

customThemeNames : list<string> [read-only]

Les noms de tous les custom themes définis dans le style. Cela n'inclut pas les built-in themes.

Voir aussi themeNames, themeName, et CustomTheme.

dark : Component

Le composant du thème sombre. Il est instancié et appliqué lorsque le système est en mode sombre et que themeName est "System", ou lorsque themeName est explicitement défini comme "Dark".

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

Voir également light, themeName, et Theme.

fallbackStyle : Style

Style de remplacement utilisé pour résoudre les propriétés qui ne sont pas explicitement définies dans ce style. Lorsqu'une propriété n'est pas trouvée dans le style ou dans son thème actif, StyleKit la recherche dans le style de remplacement.

Par défaut, le style de repli est défini sur un style interne qui fournit une apparence de base similaire au 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 la valeur null signifie que vous devez repartir de zéro, ce qui vous oblige à définir beaucoup plus de propriétés qu'il n'en faudrait. Une référence d'implémentation d'un style de repli peut être trouvée ici.

Voir aussi Résolution des propriétés.

light : Component

Le composant du thème de la lumière. Il est instancié et appliqué lorsque le système est en mode léger et que themeName est "System", ou lorsque themeName est explicitement défini sur "Light".

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

Voir également dark, themeName, et Theme.

palette : palette [read-only]

La palette du contrôle à styliser.

Cette palette permet de lier les couleurs du style à l'adresse palette du contrôle à styliser. Si l'application attribue une palette différente à un contrôle, le style s'adaptera et le contrôle sera repeint.

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

Voir également StyleReader::palette.

theme : Theme [read-only]

L'instance de thème actuellement active. Il est instancié à partir de light theme component, de dark theme component, ou de l'un des thèmes custom themes, en fonction de themeName.

Lors de la résolution d'une propriété de style, StyleKit la recherche d'abord dans ce thème (StyleVariations à part). Si la propriété n'est pas trouvée, il retourne la chercher dans le thème Style.

Voir aussi themeName, light, et dark.

themeName : string

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

Valeurs prises en charge :

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

Voir également themeNames et theme.

themeNames : list<string> [read-only]

Les noms de tous les thèmes disponibles, y compris "System", "Light", "Dark", et tout autre thème. custom themes.

Voir également themeName et customThemeNames.