# 4.12：Span组件

Span 组件用来显示一段文本，它只能作为 Text 组件的子组件使用，目前只支持文本的通用属性 (opens new window)，比如设置文本的颜色、大小、样式、粗细、字体、行高和装饰线等。

# 4.12.1：Span定义介绍

interface SpanInterface {
    (value: string | Resource): SpanAttribute;
}

1
2
3

Span 的构造方法接收一个 string 或者 Resource 类型的参数用来显示一个段文本，简单样例如下所示：

样例运行结果如下图所示：

# 4.12.2：Span属性介绍

declare class SpanAttribute extends CommonMethod<SpanAttribute> {
    fontColor(value: ResourceColor): SpanAttribute;
    fontSize(value: number | string | Resource): SpanAttribute;
    fontStyle(value: FontStyle): SpanAttribute;
    fontWeight(value: number | FontWeight | string): SpanAttribute;
    fontFamily(value: string | Resource): SpanAttribute;
    decoration(value: {
        type: TextDecorationType;
        color?: ResourceColor;
    }): SpanAttribute;
    letterSpacing(value: number | string): SpanAttribute;
    textCase(value: TextCase): SpanAttribute;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

Span 支持的属性是 Text 组件支持属性的子集，它的显示效果和 Text 是一样的，笔者不在逐一介绍了，简单样例如下所示：

样例运行结果如下图所示：

📢：由上述示例可知：Text 组件可以包含多个 Span 组件按照行排列的形式进行展示，超过一行默认进行换行显示。

# 4.12.3：Span属性继承

Span 组件允许从父组件 Text 继承属性，当 Span 未设置属性而父组件 Text 设置了相关属性时，则 Span 默认继承 Text 组件设置的属性，目前支持继承的属性包括：fontColor、fontSize、fontStyle、fontWeight、decoration、letterSpacing、textCase、fontfamily。

简单样例如下所示：

样例运行结果如下图所示：

📢：由运行效果可知，当 Span 未设置相关属性而父组件 Text 设置了相关属性时，则 Span 继承父组件的熟悉，若 Span 设置了相关属性则以自身属性为准。

# 4.12.4：Span事件介绍

Span 目前只支持点击事件：

export declare class CommonMethod<T> {
  onClick(event: (event?: ClickEvent) => void): T;
}

1
2
3

简单样例如下所示：

样例运行结果如下图所示：

← 4.11：评分条组件 4.13：ImageSpan组件 →

请作者喝杯咖啡

欢迎加入鸿蒙技术交流群：695438501

津公网安备 12011402001367号

津ICP备2020008934号-2

中央网信办互联网违法和不良信息举报中心

天津市互联网违法和不良信息举报中心