鸿蒙开发(十二):Span 组件（鸿蒙pageslider）

zhezhongyun 2025-06-09 07:20 18 浏览

Span 作为 Text 组件的子组件，用于显示行内文本的组件。

比如：一行文字中，只有某两个字需要大写；只有某几个字需要删除线，都需要使用 Span 将其包裹起来。

构造函数

/**
 * Provide text decoration.
 * @form
 * @since 9
 */
interface SpanInterface {
    /**
     * Called when text is entered in span.
     * @form
     * @since 9
     */
    (value: string | Resource): SpanAttribute;
}

该函数接受一个可选的参数 content，其类型为 string 或 Resource 的联合类型。

string 类型表示内容可以是一个字符串。

Resource 类型表示内容可以是一个资源对象，也就是定义在 resources 目录下的字符值资源。

函数的返回类型为 SpanAttribute，用于描述文本的样式、颜色、字体等属性。

属性

属性	作用
fontColor	字体颜色
fontSize	字号
fontStyle	文本样式（斜体）
fontWeight	字重（粗细）
fontFamily	字体
decoration	上划线、下划线、删除线
letterSpacing	字符的间距
textCase	大小写转换

用法

@Entry
@Component
struct Index {
  @State message: string = 'Hello World ABCDEFG'

  build() {
    Row() {
      Column() {
        Text() {
          Span("我已阅读并同意")
          Span("《隐私协议》")
            .fontColor('#0000ff')
            .fontSize(20)
            .fontStyle(FontStyle.Normal)
            .fontWeight(FontWeight.Bold)
            .decoration({ type: TextDecorationType.Underline, color: '#0000ff' })
            .onClick(() => {
              console.log("跳转协议链接");
            })
        }.fontSize(20)
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行结果：

当然了，这个《隐私协议》是可以点击的。

column-span 属性

上一篇：C# tableLayoutPanel控件使用的简单例子
下一篇：建筑用词汇的表达(一)（建筑常用英语词汇）

鸿蒙开发(十二):Span 组件（鸿蒙pageslider）

构造函数

属性

用法

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）