StyledItem QML Type
| Import Statement: | import Qt.labs.StyleKit |
| Inherits: | |
| Status: | Technology preview |
此类型处于技术预览阶段，可能会有变动。
属性
- delegateStyle : DelegateStyle
详细说明
StyledItem 会渲染一个DelegateStyle 。它会读取诸如color 、border 、gradient 和image 等属性，并在内部创建相应的视觉元素。
如果设置在DelegateStyle 上的delegate 为null （默认值），则会自动使用 StyledItem 进行渲染。
任何 Item 都可以设置自定义的delegate 。但与 StyledItem 结合使用时，您可以在保留默认渲染效果的同时，添加叠加层、底层或着色器效果。以下代码片段演示了如何在默认委托之上绘制一个额外的 Item：
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"
}
}
}
}注意： Qt.labs 模块中的类型在未来版本中不保证保持兼容。
有关叠加层、底层和着色器效果的更多示例，请参阅StyleKit 快速控件示例。
另请参阅 DelegateStyle 、delegate 以及data 。
属性文档
delegateStyle : DelegateStyle
该项渲染的DelegateStyle 。
此属性为必填项。当StyledItem 是delegate 的根项时，该属性会自动设置。但当其作为子项用于自定义委托中时，必须显式设置。
以下代码片段使用了一个自定义委托，该委托会在默认滑块控件下方绘制一颗星。由于根项不是StyledItem ，因此它声明了一个必需属性delegateStyle （该属性会自动赋值），并将其转发给子项StyledItem ：
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 {
// Since the root item is not a StyledItem, the following
// required properties must be defined explicitly:
required property DelegateStyle delegateStyle
required property QtObject control
implicitWidth: delegateStyle.width
implicitHeight: delegateStyle.height
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 {
// Forward delegateStyle into StyledItem. StyledItem doesn't
// use 'control' for anything, so it can be omitted.
delegateStyle: parent.delegateStyle
}
}
}另请参阅 DelegateStyle 、delegate 和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.
