1# ContainerSpan 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @xiangyuan6--> 5<!--Designer: @pssea--> 6<!--Tester: @jiaoaozihao--> 7<!--Adviser: @HelloCrease--> 8 9[Text](ts-basic-components-text.md)组件的子组件，用于统一管理多个[Span](ts-basic-components-span.md)、[ImageSpan](ts-basic-components-imagespan.md)的背景色及圆角弧度。 10 11> **说明：** 12> 13> 该组件从API version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 子组件 16 17可以包含[Span](ts-basic-components-span.md)、[ImageSpan](ts-basic-components-imagespan.md) 子组件。 18 19## 接口 20 21ContainerSpan() 22 23**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27## 属性 28 29仅支持以下属性： 30 31### textBackgroundStyle 32 33textBackgroundStyle(style: TextBackgroundStyle) 34 35设置文本背景样式。子组件在不设置该属性时，将继承此属性值。 36 37**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41**参数：** 42 43| 参数名 | 类型 | 必填 | 说明 | 44| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 45| style | [TextBackgroundStyle](ts-basic-components-span.md#textbackgroundstyle11对象说明) | 是 | 文本背景样式。<br />默认值：<br />{<br /> color: Color.Transparent,<br /> radius: 0<br />} | 46 47### attributeModifier<sup>12+</sup> 48 49attributeModifier(modifier: AttributeModifier\<ContainerSpanAttribute>) 50 51设置组件的动态属性。 52 53**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57**参数：** 58 59| 参数名 | 类型 | 必填 | 说明 | 60| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 61| modifier | [AttributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifiert)\<ContainerSpanAttribute> | 是 | 动态设置组件的属性。 | 62 63## 事件 64 65不支持[通用事件](ts-component-general-events.md)。 66 67## 示例 68### 示例1（设置背景样式） 69 70从API version 11开始，该示例通过[textBackgroundStyle](#textbackgroundstyle)属性展示了文本设置背景样式的效果。 71 72```ts 73// xxx.ets 74@Component 75@Entry 76struct Index { 77 build() { 78 Column() { 79 Text() { 80 ContainerSpan() { 81 // $r('app.media.app_icon')需要替换为开发者所需的图像资源文件。 82 ImageSpan($r('app.media.app_icon')) 83 .width('40vp') 84 .height('40vp') 85 .verticalAlign(ImageSpanAlignment.CENTER) 86 Span(' Hello World ! ').fontSize('16fp').fontColor(Color.White) 87 }.textBackgroundStyle({ color: "#7F007DFF", radius: "12vp" }) 88 } 89 }.width('100%').alignItems(HorizontalAlign.Center) 90 } 91} 92``` 93 94 95 96### 示例2（通过attributeModifier设置背景样式） 97 98从API version 12开始，该示例通过[attributeModifier](#attributemodifier12)属性展示了文本设置背景样式的效果。 99 100```ts 101import { ContainerSpanModifier } from '@ohos.arkui.modifier'; 102 103class MyContainerSpanModifier extends ContainerSpanModifier { 104 applyNormalAttribute(instance: ContainerSpanAttribute): void { 105 super.applyNormalAttribute?.(instance); 106 this.textBackgroundStyle({ color: "#7F007DFF", radius: "12vp" }); 107 } 108} 109 110@Entry 111@Component 112struct ContainerSpanModifierExample { 113 @State containerSpanModifier: ContainerSpanModifier = new MyContainerSpanModifier(); 114 115 build() { 116 Column() { 117 Text() { 118 ContainerSpan() { 119 // $r('app.media.app_icon')需要替换为开发者所需的图像资源文件。 120 ImageSpan($r('app.media.app_icon')) 121 .width('40vp') 122 .height('40vp') 123 .verticalAlign(ImageSpanAlignment.CENTER) 124 Span(' I\'m ContainerSpan attributeModifier ').fontSize('16fp').fontColor(Color.White) 125 }.attributeModifier(this.containerSpanModifier as MyContainerSpanModifier) 126 } 127 }.width('100%').alignItems(HorizontalAlign.Center) 128 } 129} 130``` 131 132
