往期鸿蒙全套实战文章必看:
ContainerSpan
Text组件的子组件,用于统一管理多个Span、ImageSpan的背景色及圆角弧度。
说明:
该组件从API Version 11开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
接口
ContainerSpan()
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
属性
仅支持以下属性:
textBackgroundStyle
textBackgroundStyle(style: TextBackgroundStyle)
设置文本背景样式。子组件在不设置该属性时,将继承此属性值。
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
style | TextBackgroundStyle | 是 | 文本背景样式。 默认值: { color: Color.Transparent, radius: 0 } |
TextBackgroundStyle对象说明
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
名称 | 参数类型 | 必填 | 描述 |
---|---|---|---|
color | ResourceColor | 否 | 文本背景色。 |
radius | Dimension | BorderRadiuses | 否 | 文本背景圆角。 |
事件
不支持通用事件。
示例
// xxx.ets
@Component
@Entry
struct Index {
build() {
Column() {
Text() {
ContainerSpan() {
ImageSpan($r('app.media.app_icon'))
.width('40vp')
.height('40vp')
.verticalAlign(ImageSpanAlignment.CENTER)
Span(' Hello World ! ').fontSize('16fp').fontColor(Color.White)
}.textBackgroundStyle({color: "#7F007DFF", radius: "12vp"})
}
}.width('100%').alignItems(HorizontalAlign.Center)
}
}
ts
看完三件事❤️
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注作者,不定期分享原创知识。
- 同时可以期待后续文章ing🚀。