输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
API参考
高级筛选
API version全部版本
设备全部
元服务API集不筛选

ContainerSpan

更新时间: 2026-06-13 03:51
本文导读
展开章节

Text组件的子组件，用于统一管理多个Span、ImageSpan的背景色及圆角弧度。

说明

  • 该组件从API version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

  • 本模块接口仅可在Stage模型下使用。

子组件

PhonePC/2in1TabletTVWearable

可以包含Span、ImageSpan 子组件。

接口

PhonePC/2in1TabletTVWearable

ContainerSpan()

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

PhonePC/2in1TabletTVWearable

仅支持以下属性：

textBackgroundStyle

PhonePC/2in1TabletTVWearable

textBackgroundStyle(style: TextBackgroundStyle)

设置文本背景样式。子组件在不设置该属性时，将继承此属性值。

说明

从API version 12开始，该接口支持在attributeModifier中调用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
style TextBackgroundStyle 是

文本背景样式。

默认值：

{

color: Color.Transparent,

radius: 0

}

attributeModifier12+

PhonePC/2in1TabletTVWearable

attributeModifier(modifier: AttributeModifier<ContainerSpanAttribute>)

设置组件的动态属性。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
modifier AttributeModifier<ContainerSpanAttribute> 是 动态设置组件的属性。

事件

PhonePC/2in1TabletTVWearable

不支持通用事件。

示例

PhonePC/2in1TabletTVWearable

示例1（设置背景样式）

从API version 11开始，该示例通过textBackgroundStyle属性展示了文本设置背景样式的效果。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Component
  3. @Entry
  4. struct Index {
  5.   build() {
  6.     Column() {
  7.       Text() {
  8.         ContainerSpan() {
  9.           // $r('app.media.app_icon')需要替换为开发者所需的图像资源文件。
  10.           ImageSpan($r('app.media.app_icon'))
  11.             .width('40vp')
  12.             .height('40vp')
  13.             .verticalAlign(ImageSpanAlignment.CENTER)
  14.           Span('   Hello World !   ').fontSize('16fp').fontColor(Color.White)
  15.         }
  16.         .textBackgroundStyle({
  17.           color: "#7F007DFF",
  18.           radius: {
  19.             topLeft: 12,
  20.             topRight: 12,
  21.             bottomLeft: 12,
  22.             bottomRight: 12
  23.           }
  24.         })
  25.       }
  26.     }.width('100%').alignItems(HorizontalAlign.Center)
  27.   }
  28. }

示例2（通过attributeModifier设置背景样式）

从API version 12开始，该示例通过attributeModifier属性展示了文本设置背景样式的效果。

收起
自动换行
深色代码主题
复制
  1. import { ContainerSpanModifier } from '@kit.ArkUI';
  2. 

  3. class MyContainerSpanModifier extends ContainerSpanModifier {
  4.   applyNormalAttribute(instance: ContainerSpanAttribute): void {
  5.     super.applyNormalAttribute?.(instance);
  6.     this.textBackgroundStyle({ color: "#7F007DFF", radius: "12vp" });
  7.   }
  8. }
  9. 

  10. @Entry
  11. @Component
  12. struct ContainerSpanModifierExample {
  13.   @State containerSpanModifier: ContainerSpanModifier = new MyContainerSpanModifier();
  14. 

  15.   build() {
  16.     Column() {
  17.       Text() {
  18.         ContainerSpan() {
  19.           // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。
  20.           ImageSpan($r('app.media.startIcon'))
  21.             .width('40vp')
  22.             .height('40vp')
  23.             .verticalAlign(ImageSpanAlignment.CENTER)
  24.           Span(' I\'m ContainerSpan attributeModifier ').fontSize('16fp').fontColor(Color.White)
  25.         }.attributeModifier(this.containerSpanModifier as MyContainerSpanModifier)
  26.       }
  27.     }.width('100%').alignItems(HorizontalAlign.Center)
  28.   }
  29. }

相关推荐
文档ImageSpan
文档Span
文档SymbolSpan
文档Text
文档span
文档canvas组件
文档背景设置
文档文本组件公共接口
文档text
文档组件内容模糊
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词