StyledItem QML Type

Rendert eine DelegateStyle. Mehr...

Import Statement:	`import Qt.labs.StyleKit`
Inherits:	Item

Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

delegateStyle : DelegateStyle

Ausführliche Beschreibung

StyledItem rendert ein DelegateStyle. Es liest Eigenschaften wie color, border, gradient und image, und erstellt intern die entsprechenden visuellen Elemente.

Wenn delegate auf DelegateStyle auf null eingestellt ist (Standard), wird StyledItem automatisch für das Rendern verwendet.

Ein benutzerdefiniertes delegate kann auf ein beliebiges Element gesetzt werden. In Kombination mit einem StyledItem können Sie jedoch das Standard-Rendering beibehalten und gleichzeitig Overlay-, Underlay- oder Shader-Effekte hinzufügen. Das folgende Snippet zeigt, wie man ein zusätzliches Item über den Standard-Delegaten zeichnet:

Style {
    component Star : Shape {
        id: star
        property color color
        ShapePath {
            fillColor: star.color
            scale: Qt.size(star.width, star.height)
            PathMove { x: 0.50; y: 0.00 }
            PathLine { x: 0.59; y: 0.35 }
            PathLine { x: 0.97; y: 0.35 }
            PathLine { x: 0.66; y: 0.57 }
            PathLine { x: 0.78; y: 0.91 }
            PathLine { x: 0.50; y: 0.70 }
            PathLine { x: 0.22; y: 0.91 }
            PathLine { x: 0.34; y: 0.57 }
            PathLine { x: 0.03; y: 0.35 }
            PathLine { x: 0.41; y: 0.35 }
            PathLine { x: 0.50; y: 0.00 }
        }
    }

    button {
        background.delegate: StyledItem {
            width: parent.width
            height: parent.height
            // Draw a star on top the default rendering
            Star {
                anchors.fill: parent
                color: "gold"
            }
        }
    }
}

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

Weitere Beispiele für Overlays, Underlays und Shader-Effekte finden Sie im StyleKit-Beispiel.

Siehe auch DelegateStyle, delegate, und data.

Dokumentation der Eigenschaften

delegateStyle : DelegateStyle

Die DelegateStyle, die dieser Artikel wiedergibt.

Diese Eigenschaft ist erforderlich. Wenn StyledItem das Stammelement eines delegate ist, wird sie automatisch festgelegt. Wenn sie jedoch als untergeordnetes Element innerhalb eines benutzerdefinierten Delegaten verwendet wird, muss sie explizit festgelegt werden.

Das folgende Snippet verwendet einen benutzerdefinierten Delegaten, der einen Stern unter dem Standard-Schiebereglergriff zeichnet. Da das Stammelement kein StyledItem ist, deklariert es eine erforderliche Eigenschaft delegateStyle (die automatisch zugewiesen wird) und leitet sie an das untergeordnete Element StyledItem weiter:

Style {
    component Star : Shape {
        id: star
        property color color
        ShapePath {
            fillColor: star.color
            scale: Qt.size(star.width, star.height)
            PathMove { x: 0.50; y: 0.00 }
            PathLine { x: 0.59; y: 0.35 }
            PathLine { x: 0.97; y: 0.35 }
            PathLine { x: 0.66; y: 0.57 }
            PathLine { x: 0.78; y: 0.91 }
            PathLine { x: 0.50; y: 0.70 }
            PathLine { x: 0.22; y: 0.91 }
            PathLine { x: 0.34; y: 0.57 }
            PathLine { x: 0.03; y: 0.35 }
            PathLine { x: 0.41; y: 0.35 }
            PathLine { x: 0.50; y: 0.00 }
        }
    }

    slider.handle.delegate: Item {
        required property DelegateStyle delegateStyle

        implicitWidth: delegateStyle.implicitWidth
        implicitHeight: delegateStyle.implicitHeight
        width: parent.width
        height: parent.height
        scale: delegateStyle.scale
        rotation: delegateStyle.rotation
        visible: delegateStyle.visible

        // Draw a star underneath the default handle delegate
        Star {
            width: parent.width * 2
            height: parent.height * 2
            anchors.centerIn: parent
            color: "gold"
        }

        StyledItem {
            delegateStyle: parent.delegateStyle
        }
    }
}

Siehe auch DelegateStyle, delegate, und data.

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