当前位置：首页 > article >正文

鸿蒙开发-ArkTS的ContainerSpan组件

article 2024/12/25 6:11:52

在鸿蒙应用开发中，ArkTS的ContainerSpan是一个重要的组件，它主要用于统一管理多个Span、ImageSpan的背景色及圆角弧度。以下是对ArkTS ContainerSpan的详细解析：

一、基本概述

组件类型：ContainerSpan是Text组件的子组件。
功能：用于统一管理多个Span、ImageSpan的背景色及圆角弧度。
支持版本：从API Version 11开始支持。

二、属性与参数

textBackgroundStyle：设置文本背景样式。子组件在不设置该属性时，将继承此属性值。
attributeModifier（API Version 12+）：设置组件的动态属性。

三、使用场景与示例

以下是一个简单的示例，展示了如何在ArkTS中使用ContainerSpan：

import { Component, Entry, Text, Span, ImageSpan, ContainerSpan, Color } from '@ohos.arkui.ts';
 
@Component
@Entry
struct MyComponent {
  build() {
    Text() {
      ContainerSpan()
        .textBackgroundStyle({
          color: Color.Blue, // 设置背景色为蓝色
          radius: 10, // 设置圆角半径为10（单位通常是vp，但这里为了简洁省略了单位）
        })
        .add(
          ImageSpan($r('app.media.icon')) // 添加一个图片片段
            .width(40)
            .height(40)
        )
        .add(
          Span('Hello, ArkTS!') // 添加一个文本片段
            .fontSize(18)
            .fontColor(Color.White) // 设置文本颜色为白色
        );
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center) // 居中对齐内容
    .alignItems(HorizontalAlign.Center); // 水平居中对齐
  }
}

ContainerSpan通常与Span和ImageSpan一起使用，以创建具有复杂文本和图像布局的UI元素。以下是一个简单的示例，展示了如何在ArkTS中使用ContainerSpan：

@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)
    }
  }
}

在这个示例中，我们创建了一个Column布局，并在其中放置了一个Text组件。Text组件内部包含了一个ContainerSpan，该ContainerSpan包含了一个ImageSpan和一个Span。ImageSpan用于显示一个图标，而Span用于显示文本。ContainerSpan通过textBackgroundStyle属性为这些子组件设置了统一的背景色和圆角弧度。