Back to Qt.io
Contact Us Blog Download Qt
Auf dieser Seite

StylableControls QML Type

Abstrakter Basistyp, der die Steuerelemente enthält, deren Darstellung angepasst werden kann. Mehr...

Import Statement: import Qt.labs.StyleKit
Inherited By:

AbstractStyle, Style, StyleVariation, and Theme

Status: Technology preview

Dieser Typ befindet sich in der Technologievorschau und kann sich noch ändern.

Eigenschaften

Methoden

Ausführliche Beschreibung

„StylableControls“ ist ein abstrakter Basistyp. Er enthält für jeden Steuerelementtyp ein „ ControlStyle “, das über „ Style “, „ Theme “ oder „ StyleVariation “ gestaltet werden kann.

Die Steuerelementtypen bilden eine Hierarchie, in der Eigenschaften, die auf einem Basistyp festgelegt werden, an die spezifischeren Typen weitergegeben werden. Wenn Sie beispielsweise dem „ abstractButton.background.radius “ einen Radius von vier zuweisen, erhalten alle Schaltflächentypen wie „ button “, „ checkBox “ und „ radioButton “ einen Radius von vier.

Die Codeausschnitte auf dieser Seite veranschaulichen einige der wichtigsten Eigenschaften, mit denen sich die einzelnen Steuerelementtypen gestalten lassen, sind jedoch keineswegs vollständig. Es stehen viele weitere Eigenschaften zur Verfügung, wie in der Dokumentation zu ControlStyle und DelegateStyle beschrieben. In der Praxis können einige davon auch weggelassen werden, da die „ fallback style “ bereits sinnvolle Standardwerte bereitstellt. Das bedeutet, dass das Entfernen einer Eigenschaft aus einem der Codeausschnitte möglicherweise keinen Einfluss auf das Erscheinungsbild hat, da stattdessen einfach der Fallback-Stil verwendet wird.

Hinweis: Es kann nicht garantiert werden, dass die Typen in Qt.labs-Modulen in zukünftigen Versionen kompatibel bleiben.

Siehe auch „StyleKit-Eigenschaftsauflösung“.

Eigenschaftsdokumentation

abstractButton : ControlStyle

Gruppierte Eigenschaft zur Gestaltung aller schaltflächenähnlichen Steuerelemente, darunter Button, CheckBox, RadioButton, Switch und RoundButton. Nicht festgelegte Eigenschaften fallen auf control zurück.

abstractButton.background.radius: 4 // all buttons get a radius of 4
checkBox.indicator.radius: 2 // except check boxes, which get a radius of 2

Siehe auch „Steuerelementtypen“.

applicationWindow : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ ApplicationWindow “.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

Verwenden Sie „ applicationWindow “, um die Hintergrundfarbe des Fensters festzulegen:

light: Theme {
    applicationWindow.background.color: "#f0f0f0"
}
dark: Theme {
    applicationWindow.background.color: "#404040"
}

Hinweis: Damit dies wirksam wird, mussdie Anwendung „ ApplicationWindow “ und nicht „Window“ verwenden.

busyIndicator : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ BusyIndicator “.

Nicht festgelegte Eigenschaften greifen auf „ control “ zurück.

busyIndicator {
    background {
        visible: false
        width: 48
        height: 48
    }
    indicator {
        fillWidth: true
        fillHeight: true
        color: "transparent"
        border.width: 0
        foreground {
            radius: 255
            color: palette.accent
        }
    }
}

StyleKit bietet keine speziellen Eigenschaften zur Gestaltung der Animation des Drehsymbols. Um die Form oder Animation des Drehsymbols zu ändern, müssen Sie stattdessen ein benutzerdefiniertes Drehsymbol-Vordergrund- delegate implementieren:

busyIndicator {
    background {
        visible: false
        width: 48
        height: 48
    }
    indicator {
        fillWidth: true
        fillHeight: true
        color: "transparent"
        border.width: 0
        foreground {
            radius: 255
            color: palette.accent
            delegate: Text {
                required property DelegateStyle delegateStyle
                required property QtObject control
                opacity: control.running ? 1 : 0
                Behavior on opacity { NumberAnimation{} }
                text: "↻"
                color: delegateStyle.color
                font.pixelSize: 20
                RotationAnimation on rotation {
                    from: 0
                    to: 360
                    duration: 1000
                    loops: Animation.Infinite
                    running: control.running
                }
            }
        }
    }
}

button : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ Button “.

Nicht festgelegte Eigenschaften fallen auf „ abstractButton “ zurück.

button {
    background {
        width: 120
        height: 40
        shadow {
            opacity: 0.6
            color: "gray"
            verticalOffset: 2
            horizontalOffset: 2
        }
        color: "cornflowerblue"
        gradient: Gradient {
            // The gradient is drawn on top of the 'background.color', so
            // we use semi-transparent stops to give the button some shading
            // while letting the base color show through. This makes it easier
            // to change the color, but keep the shading, in the hovered state below.
            GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
            GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
        }
    }
    text.color: "white"
    hovered.background.color: "royalblue"
    pressed.background.scale: 0.95
}

checkBox : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ CheckBox “.

Nicht festgelegte Eigenschaften fallen auf „ abstractButton “ zurück.

checkBox {
    // Hide the button background; show only the indicator and text
    background.visible: false

    indicator {
        color: "white"
        border.color: "darkslategray"
        foreground {
            color: "transparent"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
            image.color: palette.accent

            // Hide the checkmark when the checkbox is not checked
            visible: false
        }
    }

    // Show the checkmark when the checkbox is checked
    checked.indicator.foreground.visible: true
}

checkDelegate : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ CheckDelegate “.

Nicht festgelegte Eigenschaften fallen auf itemDelegate zurück.

checkDelegate {
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    background {
        radius: 0
        color: "white"
        border.width: 0
    }

    indicator {
        border.color: "darkslategray"
        foreground {
            color: "transparent"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
            image.color: palette.accent

            // Hide the checkmark when the checkbox is not checked
            visible: false
        }
    }

    hovered.background.color: "#f0f0f0"
    // Show the checkmark when the checkbox is checked
    checked.indicator.foreground.visible: true
}

comboBox : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ ComboBox “.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

Hinweis: Gestalten Sie das Popup über „ popup “ und dessen Elemente über „ itemDelegate “.

comboBox {
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    background.topLeftRadius: 4
    background.topRightRadius: 4

    indicator {
        // Show only the dropdown arrow, not the indicator background
        color: "transparent"
        border.width: 0
        foreground {
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/drop-indicator.png"
            image.color: "black"
        }
    }
}

control : ControlStyle

Gruppierte Eigenschaft zur Gestaltung aller Steuerelemente.

control ist der Basistyp in der Steuerelementhierarchie, und die hier festgelegten Eigenschaften dienen als Standardwerte für alle anderen Steuerelementtypen. Wenn Sie beispielsweise „ control.width: 200 “ festlegen, werden alle Steuerelemente 200 Pixel breit, einschließlich Schaltflächen, Bildlaufanzeigen und aller anderen Steuerelemente. Außerdem werden damit alle Werte überschrieben, die von einer höheren Ebene in der Stilhierarchie geerbt wurden (z. B. „ Style “ für „ Theme “ oder „ fallbackStyle “ für „ Style “), einschließlich Hover-Effekten und anderem zustandsabhängigen Verhalten. Verwenden Sie „ control “ sparsam und bevorzugen Sie nach Möglichkeit spezifischere Basistypen wie „ abstractButton “ oder „ pane “.

control {
    padding: 8
    background.radius: 4
}

delayButton : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ DelayButton “.

Bei einer Verzögerungsschaltfläche wird der Fortschritt über den Indikator dargestellt. Standardmäßig ist der Indikator selbst transparent und ohne Rahmen, sodass nur der Vordergrund des Indikators sichtbar ist, während er sich füllt.

Nicht festgelegte Eigenschaften fallen auf „ abstractButton “ zurück.

delayButton {
    padding: 0
    indicator {
        fillWidth: true
        fillHeight: true
        color: "transparent"
        border.width: 0
        foreground.color: palette.accent
    }
    checked.indicator.foreground.color: palette.accent.darker(1.2)
}

dial : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ Dial “.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

dial {
    spacing: 0
    handle.width: 15
    handle.height: 15
    background.visible: false
    indicator {
        width: 60
        height: 60
        radius: 255
        foreground {
            fillWidth: true
            fillHeight: true
            width: 6
            height: 6
            color: palette.accent
        }
    }
}

dialog : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ Dialog “.

Nicht festgelegte Eigenschaften fallen auf „ popup “ zurück.

dialog {
    text {
        padding: 12
        alignment: Qt.AlignHCenter | Qt.AlignVCenter
    }

    background.color: "white"
}

dialogButtonBox : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ DialogButtonBox “.

Nicht festgelegte Eigenschaften fallen auf „ pane “ zurück.

dialogButtonBox {
    background {
        height: 40
        radius: 0
        color: "transparent"
        border.width: 0
    }
}

flatButton : ControlStyle

Gruppierte Eigenschaft zur Gestaltung von flachen Schaltflächen (Schaltflächen ohne sichtbaren Hintergrund im Normalzustand). Die Gestaltung wird für eine „ Button “ wirksam, wenn „ Button.flat “ auf „ true “ gesetzt ist.

Nicht festgelegte Eigenschaften fallen auf „ abstractButton “ zurück.

flatButton {
    // Hide background normally, show on hover
    background.visible: false
    hovered.background.visible: true
}

frame : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ Frame “.

Nicht festgelegte Eigenschaften fallen auf „ pane “ zurück.

frame {
    background {
        color: "#fafafa"
        border.color: "#d0d0d0"
        radius: 4
    }
}

groupBox : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ GroupBox “.

Nicht festgelegte Eigenschaften fallen auf „ frame “ zurück.

groupBox {
    // A group box is a container for other controls, so we give it some
    // padding to avoid the child controls to be too close to the border
    padding: 20

    // Move the label to the right, to match the radius of the background
    text.leftPadding: 6
    text.color: "darkslategray"

    background {
        // Move the frame down, below the text label
        topMargin: 30
        radius: 6
        color: "#f8f8f8"
        border.color: "#d0d0d0"
    }
}

itemDelegate : ControlStyle

Gruppierte Eigenschaft zur Gestaltung von ItemDelegate.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

Hinweis: In „ Qt Quick Controls“ erbt „ ItemDelegate “ von „ AbstractButton “. In StyleKit greift „ itemDelegate “ jedoch auf „ control “ zurück und nicht auf „ abstractButton “, da Delegates in der Regel ganz anders gestaltet sind als Schaltflächen (flach, ohne Rahmen oder Schlagschatten usw.).

itemDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }
    hovered.background.color: "#f0f0f0"
}

label : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ Label “.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

light: Theme {
    // Labels typically have no background, so set background.visible to false.
    // Alternatively, hiding the background for labels can be done once for all
    // themes by setting Style.label.background.visible: false.
    label.background.visible: false
    label.text.color: "black"
}
dark: Theme {
    label.background.visible: false
    label.text.color: "white"
}

Gruppierte Eigenschaft für die Gestaltung von „ Menu “.

Nicht festgelegte Eigenschaften fallen auf „ popup “ zurück.

menu {
    background {
        width: 200
        height: 40
        border.color: "darkslategray"
        radius: 4
    }
}

Gruppierte Eigenschaft für die Gestaltung von „ MenuBar “.

Nicht festgelegte Eigenschaften greifen auf „ control “ zurück.

Hinweis: Die Gestaltung von „ MenuBar “, „ MenuBarItem “ und „ MenuSeparator “ wirkt sich normalerweise nur auf nicht-native Menüleisten aus. Wenn ein „ MenuBar “ als native Menüleiste implementiert ist, werden seine Delegaten nicht für die Darstellung verwendet, sodass StyleKit-Stileigenschaften möglicherweise keine visuelle Wirkung haben. Weitere Informationen finden Sie unter „Native Menüleisten“.

menuBar {
    background {
        radius: 0
        border.width: 0
    }
}

Gruppierte Eigenschaft zur Gestaltung von Menüelementen in einem „ MenuBar “.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

Hinweis: In „ Qt Quick Controls“ erbt ein „ MenuBarItem “ von „ AbstractButton “. In StyleKit ist „ menuBarItem “ jedoch ein separater Steuerelementtyp, der auf „ control “ zurückgreift statt auf „ abstractButton “, da Menüleistenelemente in der Regel ganz anders gestaltet sind als normale Schaltflächen (flach, ohne Rahmen oder Schlagschatten usw.).

menuBarItem {
    text.alignment: Qt.AlignLeft | Qt.AlignVCenter
    background {
        radius: 0
        color: "transparent"
        border.width: 0
    }
    hovered.background.color: "#c0c0c0"
}

Gruppierte Eigenschaft für die Gestaltung von „ MenuItem “.

Nicht festgelegte Eigenschaften greifen auf „ control “ zurück.

Hinweis: In „ Qt Quick Controls“ erbt ein „ MenuItem “ von „ AbstractButton “. In StyleKit greift „ menuItem “ jedoch auf „ control “ statt auf „ abstractButton “ zurück, da Menüelemente in der Regel ganz anders gestaltet sind als normale Schaltflächen (flach, ohne Rahmen oder Schlagschatten usw.).

menuItem {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        width: 200
        border.width: 0
    }
    indicator {
        color: "transparent"
        border.width: 0
        foreground {
            image.color: palette.accent
            alignment: Qt.AlignCenter
        }
        first {
            alignment: Qt.AlignLeft
            foreground.image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
        }
        second {
            alignment: Qt.AlignRight
            foreground.image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
        }
    }
    hovered.background.color: "#c0c0c0"
}

Gruppierte Eigenschaft für die Gestaltung von „ MenuSeparator “.

Nicht festgelegte Eigenschaften fallen auf control zurück.

menuSeparator {
    background.visible: false
    indicator {
        width: 188
        height: 1
        border.width: 0
        color: "#c0c0c0"
        foreground.visible: false
    }
}

page : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ Page “.

Nicht festgelegte Eigenschaften fallen auf „ pane “ zurück.

Beachten Sie, dass die Eigenschaften „ header “ und „ footer “ eines „ Page “ in der Regel von der Anwendung auf „ ToolBar “ oder „ TabBar “ gesetzt werden und diese Steuerelemente separat gestaltet werden. Um einem „ ToolBar “ bei Verwendung innerhalb eines „ Page “ eine alternative Gestaltung zu geben, verwenden Sie „ StyleVariation “:

page {
    background {
        color: "white"
        border.width: 0
    }
    variations: StyleVariation {
        toolBar.background.color: "cornflowerblue"
        toolButton.background.color: "skyblue"
        toolButton.background.border.color: "aliceblue"
    }
}

pageIndicator : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von PageIndicator.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

pageIndicator {
    background.visible: false
    indicator {
        width: 5
        height: 5
        radius: 255
        border.width: 0
        color: "black"
        opacity: 0.45
        foreground.visible: false
    }

    hovered.indicator {
        width: 6
        height: 6
        opacity: 0.7
    }

    pressed.indicator {
        width: 4
        height: 4
    }

    checked.indicator {
        width: 7
        height: 7
    }

    checked.hovered.indicator {
        width: 8
        height: 8
        opacity: 0.7
    }
}

pane : ControlStyle

Gruppierte Eigenschaft für die Gestaltung: Pane.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

pane {
    background {
        width: 200
        height: 200
        color: "white"
    }
}

Gruppierte Eigenschaft für die Gestaltung von „ Popup “.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

popup {
    background {
        color: "white"
        border.width: 1
        border.color: "darkslategray"
        radius: 4
    }
}

progressBar : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ ProgressBar “. Bei einem Fortschrittsbalken wird die Rille über die Anzeige gestaltet, während der Fortschrittsbalken über den Vordergrund der Anzeige gestaltet wird.

Nicht festgelegte Eigenschaften fallen auf ` control` zurück.

progressBar {
    // Hide the background; show only the progress bar
    background.visible: false
    indicator {
        width: 150
        height: 8
        radius: 4
        color: "#e0e0e0"
        foreground {
            // Set margins to add some space between the progress track and the groove
            margins: 2
            color: palette.accent
            radius: 4
        }
    }
}

StyleKit bietet keine spezielle Eigenschaft zur Gestaltung der unbestimmten Animation eines Fortschrittsbalkens. Um die Animation zu ändern, müssen Sie stattdessen einen benutzerdefinierten Indikator-Vordergrund delegate implementieren:

progressBar {
    indicator {
        width: 150
        height: 8
        foreground {
            delegate: StyledItem {
                // Draw a pulsating progress track when in indeterminate mode, and a normal track otherwise
                width: control.indeterminate ? parent.width : parent.width * control.visualPosition
                height: parent.height
                opacity: control.indeterminate ? 0.1 : 1.0
                SequentialAnimation on opacity {
                    running: control.indeterminate
                    loops: Animation.Infinite
                    NumberAnimation { from: 0.1; to: 1.0; duration: 500; easing.type: Easing.InOutQuad }
                    NumberAnimation { from: 1.0; to: 0.1; duration: 500; easing.type: Easing.InOutQuad }
                }
            }
        }
    }
}

radioButton : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ RadioButton “.

Nicht festgelegte Eigenschaften fallen auf „ abstractButton “ zurück.

radioButton {
    // Hide the button background; show only the indicator and text
    background.visible: false

    indicator {
        // Make the indicator circular
        radius: 255
        foreground {
            // The foreground circle is what shows the checked state, so we make
            // it a bit smaller than the outer circle by setting margins
            margins: 4
            radius: 255
            // Hide the foreground circle when the radio button is not checked
            visible: false
        }
    }

    // Show the foreground circle when the radio button is checked
    checked.indicator.foreground.visible: true
}

radioDelegate : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ RadioDelegate “.

Nicht festgelegte Eigenschaften fallen auf „ itemDelegate “ zurück.

radioDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }

    indicator {
        radius: 255
        foreground {
            margins: 4
            visible: false
            radius: 255
            color: palette.accent
        }
    }

    hovered.background.color: "#f0f0f0"
    checked.indicator.foreground.visible: true
}

roundButton : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von RoundButton.

Nicht festgelegte Eigenschaften fallen auf „ abstractButton “ zurück.

roundButton {
    background.radius: 255
    text.alignment: Qt.AlignVCenter | Qt.AlignHCenter
}

scrollBar : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ ScrollBar “. Die Rille wird über „ background “ gestaltet, der Griff über „ indicator “.

Nicht festgelegte Eigenschaften fallen auf control zurück.

scrollBar {
    padding: 0
    background {
        // Set the groove size and color
        width: 10
        height: 10
        color: "white"
    }
    indicator {
        radius: 255
        fillWidth: true
        width: 10
        height: 10
        color: "#c0c0c0"
        // The indicator is so simple that it doesn't need a foreground
        foreground.visible: false
    }
    vertical {
        indicator {
            // In vertical mode, the indicator should stretch vertically
            // to fill the available height rather than the available width.
            fillWidth: false
            fillHeight: true
        }
    }
}

scrollIndicator : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ ScrollIndicator “. Die Rille wird über „ background “ gestaltet, der Griff über „ indicator “.

Nicht festgelegte Eigenschaften fallen auf control zurück.

scrollIndicator {
    // A scroll indicator typically has no groove, just a sliding
    // indicator. So hide the background, since it represents the groove.
    background.visible: false
    indicator {
        fillWidth: true
        width: 5
        height: 5
        border.width: 0
        color: "cornflowerblue"
        // The indicator is so simple that it doesn't need a foreground
        foreground.visible: false
    }
    vertical {
        indicator {
            // In vertical mode, the indicator should stretch vertically
            // to fill the available height rather than the available width.
            fillWidth: false
            fillHeight: true
        }
    }
}

scrollView : ControlStyle

Gruppierte Eigenschaft zur Gestaltung von ScrollView.

ScrollView Das Element selbst verfügt über keine visuellen Delegaten, die gestaltet werden können. Seine Bildlaufleisten können separat über die Eigenschaft „ scrollBar “ gestaltet werden. Mit „ padding “ können Sie jedoch den Abstand zwischen den Bildlaufleisten und dem Inhaltsbereich steuern.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

scrollView {
    // Add some space between the scroll bars and the content area
    padding: 2
    // For the sake of the example, style the scroll bars in a ScrollView
    // differently from the default scroll bars by using a StyleVariation.
    variations: StyleVariation {
        scrollBar.indicator.color: "cornflowerblue"
    }
}

searchField : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ SearchField “.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

searchField {
    // Center the text between the buttons
    text.padding: 5
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    text.color: "black"
    background.width: 200

    indicator {
        color: "transparent"
        border.width: 0

        foreground{
            alignment: Qt.AlignCenter
        }

        // Place the search and clear buttons on the left and right side of the control
        // search button
        first {
            alignment: Qt.AlignLeft
            image.color: "black"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/search-magnifier.png"
        }

        // clear button
        second {
            alignment: Qt.AlignRight
            image.color: "black"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/close_circle.png"
        }
    }
}

slider : ControlStyle

Gruppierte Eigenschaft zur Gestaltung von Slider. Bei einem Schieberegler wird die Rille über den Indikator gestaltet, während die Fortschrittsanzeige über den Vordergrund des Indikators gestaltet wird.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

Bei vertikalen Schiebereglern tauschen Sie die Werte für „ width “ und „ height “ der entsprechenden Delegaten aus, sodass das Steuerelement höher als breit ist, wie im folgenden Codeausschnitt gezeigt.

slider {
    background {
        // The background is hidden, but its implicit size still
        // determines the overall implicit size of the control.
        visible: false
        width: 150
        height: 50
    }

    indicator {
        // The groove of the slider should fill out the entire width of the control
        fillWidth: true
        height: 8
        radius: 255
        color: "#e0e0e0"
        foreground {
            radius: 255
            color: palette.accent
        }
    }

    handle {
        width: 24
        height: 24
        radius: 255
        color: "white"
        border.color: "#c0c0c0"
    }

    vertical {
        // Transpose relevant geometry
        background {
            width: 50
            height: 150
        }

        indicator {
            fillWidth: false
            fillHeight: true
            width: 8
        }
    }
}

spinBox : ControlStyle

Gruppierte Eigenschaft zur Gestaltung von „ SpinBox “.

Nicht festgelegte Eigenschaften greifen auf „ control “ zurück.

spinBox {
    // Center the text between the up/down buttons
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter

    indicator {
        color: "transparent"
        border.width: 0
        foreground {
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
            image.color: "black"
            alignment: Qt.AlignCenter
        }
        // Place the down and up buttons on the left and right side of the control
        // up button
        first {
            alignment: Qt.AlignRight
            foreground.rotation: -90
        }
        // down button
        second {
            alignment: Qt.AlignLeft
            foreground.rotation: 90
        }
    }
}

Hinweis: Derzeitist es nur möglich, die Auf- und Ab-Schaltflächen links oder rechts vom Steuerelement zu positionieren, nicht jedoch übereinander.

swipeDelegate : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ SwipeDelegate “.

Nicht festgelegte Eigenschaften fallen auf „ itemDelegate “ zurück.

swipeDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }
    hovered.background.color: "#f0f0f0"
}

switchControl : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ Switch “.

Nicht festgelegte Eigenschaften greifen auf abstractButton zurück.

switchControl {
    // For a switch control, we typically don't want a background, only an indicator with a handle
    background.visible: false
    indicator {
        radius: 12
        foreground {
            // Add some space between the indicator and the foreground track
            margins: 2
            radius: 12
            // The foreground track should only be visible when the switch is checked
            visible: false
        }
    }
    checked.indicator.foreground.visible: true
    handle {
        // Add some space between the handle and the indicator
        leftMargin: 2
        rightMargin: 2
        width: 20
        height: 20
        radius: 255
        color: "white"
    }
}

switchDelegate : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ SwitchDelegate “.

Nicht festgelegte Eigenschaften fallen auf „ itemDelegate “ zurück.

switchDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }

    indicator {
        radius: 12
        foreground {
            // Add some space between the indicator and the foreground track
            margins: 2
            radius: 12
            // The foreground track should only be visible when the switch is checked
            visible: false
        }
    }

    handle {
        // Add some space between the handle and the indicator
        leftMargin: 2
        rightMargin: 2
        width: 20
        height: 20
        radius: 255
        color: "white"
    }

    hovered.background.color: "#f0f0f0"
    checked.indicator.foreground.visible: true
}

tabBar : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ TabBar “.

Nicht festgelegte Eigenschaften fallen auf „ pane “ zurück.

tabBar {
    padding: 0
    spacing: -1 // let tab buttons overlap slightly
    background {
        color: "white"
        border.width: 0
    }
}

tabButton : ControlStyle

Gruppierte Eigenschaft zur Gestaltung von „ TabButton “.

Nicht festgelegte Eigenschaften greifen auf „ abstractButton “ zurück.

tabButton {
    background {
        radius: 0
        topLeftRadius: 4
        topRightRadius: 4
        color: "#e8e8e8"
    }
    checked.background.color: "white"
}

textArea : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von TextArea.

Nicht festgelegte Eigenschaften fallen auf „ textInput “ zurück.

textArea {
    // Add some space between the text and the border of the text area
    padding: 8
    text.color: "black"
    background {
        color: "white"
        border.color: "#c0c0c0"
    }
    focused.background.border.color: palette.accent
}

textField : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ TextField “.

Nicht festgelegte Eigenschaften fallen auf „ textInput “ zurück.

textField {
    // Add some space between the text and the border of the text field
    padding: 8
    text.alignment: Qt.AlignVCenter
    background {
        width: 150
        color: "white"
        border.color: "#c0c0c0"
    }
    focused.background.border.color: palette.accent
}

textInput : ControlStyle

Gruppierte Eigenschaft zur Formatierung aller Texteingabeelemente, einschließlich „ TextField “ und „ TextArea “.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

textInput {
    // Add some space between the text and the border of the text input
    padding: 8
    text.color: "black"
    background {
        color: "white"
        border.width: 1
        border.color: "#c0c0c0"
    }
}

toolBar : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von ToolBar.

Nicht festgelegte Eigenschaften greifen auf pane zurück.

toolBar {
    spacing: 2
    background {
        radius: 0
        height: 40
        border.width: 1
    }
}

toolButton : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ ToolButton “.

Nicht festgelegte Eigenschaften fallen auf „ abstractButton “ zurück.

toolButton {
    background.radius: 0
}

toolSeparator : ControlStyle

Gruppierte Eigenschaft für die Gestaltung von „ ToolSeparator “.

Nicht festgelegte Eigenschaften fallen auf „ control “ zurück.

Bei vertikalen Trennlinien tauschen Sie die Werte für „ width “ und „ height “ der entsprechenden Delegaten aus, sodass das Steuerelement höher als breit ist, wie im folgenden Codeausschnitt gezeigt.

toolSeparator {
    background {
        // The background is hidden, but its implicit size still
        // determines the overall implicit size of the control.
        visible: false
        width: 10
        height: 10
    }
    indicator {
        width: 30
        height: 1
        border.width: 0
        color: "#c0c0c0"
        alignment: Qt.AlignCenter
        foreground.visible: false
    }
    vertical {
        indicator {
            width: 1
            height: 30
        }
    }
}

Methodendokumentation

ControlStyle getControlStyle(controlType)

Gibt den „ ControlStyle “ für den angegebenen „ controlType “ zurück oder „ null “, falls kein „ ControlStyle “ für den Typ definiert wurde.

controlType kann einer der unter StyleReader.controlType dokumentierten integrierten Typen oder die controlType eines CustomControl sein.

Diese Funktion kann beispielsweise verwendet werden, um zur Laufzeit eine Eigenschaft des Stils eines „ CustomControl “ zu lesen oder zu schreiben:

Style {
    id: myStyle
    property int customButtonType: 0

    CustomControl {
        controlType: myStyle.customButtonType
        background.color: "green"
    }
}
function changeButtonColor() {
    let customControlStyle = myStyle.getControlStyle(style.customButtonType)
    customControlStyle.background.color = "yellowgreen"

    // You can also access the style definition in the theme, if it has one
    // myStyle.theme.getControlStyle(StyleReader.Button).padding = 10
}

Wenn „ controlType “ ein integrierter Typ ist (wie beispielsweise „ StyleReader.Button “), ist die Verwendung von beispielsweise „ myStyle.button “ oder „ myStyle.getControlStyle(StyleReader.Button) “ zum Abrufen von „ ControlStyle “ nahezu gleichwertig. Der Unterschied besteht darin, dass Ersteres bei Bedarf ein „ ControlStyle “ erstellt, falls dieses noch nicht definiert ist, während Letzteres stattdessen „ null “ zurückgibt. Das bedeutet, dass beispielsweise „ myStyle.button.padding = 10 “ immer sicher ist, während „ myStyle.getControlStyle(StyleReader.Button).padding = 10 “ fehlschlägt, wenn „ myStyle.button “ im „ Style “ nicht definiert wurde.

Siehe auch CustomControl und StyleReader.

© 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.