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