ArkUI Text文本组件用法详解（附带实例）

Text 是文本组件，通常用于展示用户视图，如显示文章的内容。

Text 可通过 string 字符串和引用 Resource（资源）两种方式来创建。
1) 使用 string 字符串创建文本的示例代码如下：

@Entry
@Component
struct TextSample {
    build() {
        Row() {
            Text('我是一段文本')
        }.width('100%').justifyContent(FlexAlign.SpaceEvenly)
    }
}

显示效果如下图所示：


2) 引用 Resource 创建文本的示例代码如下：

@Entry
@Component
struct TextSample {
    build() {
        Row() {
            // 通过资源引用设置显示的文本
            Text($r('app.string.module_desc'))
                // 设置基线偏移量为0
                .baselineOffset(0)
                // 设置字号
                .fontSize(30)
                // 设置边框
                .border({ width: 1 })
                // 设置内边距
                .padding(10)
                // 设置宽度
                .width(300)
        }.width('100%').justifyContent(FlexAlign.SpaceEvenly)
    }
}

资源引用类型可以通过 $r 创建 Resource 类型对象，文件位置为 /resources/base/element/string.json。

显示效果如下图所示：

ArkUI Text添加子组件Span

Span 只能作为 Text 和 RichEditor 组件的子组件来显示文本内容。可以在一个 Text 内添加多个 Span 来显示一段信息，例如产品说明书、承诺书等。

1) 创建 Span。Span 组件必须写在 Text 组件内，单独使用 Span 组件不会显示信息。如果 Text 与 Span 同时配置文本内容，Span 内容将覆盖 Text 内容。示例代码如下：

@Entry
@Component
struct TextSample {
    build() {
        Row() {
            Text('我是Text') {
                Span('我是Span')
            }.padding(10).borderWidth(1)
        }.width('100%').justifyContent(FlexAlign.SpaceEvenly)
    }
}

显示效果如下图所示：


2) 设置文本装饰线及颜色。通过 decoration 设置文本装饰线及颜色，示例代码如下：

@Entry
@Component
struct TextSample {
    build() {
        Row() {
            Text() {
                Span('我是 Span1，').fontSize(16).fontColor(Color.Grey)
                // 设置贯穿装饰线，线条颜色为红色
                .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
                // 设置文本颜色为蓝色，字号为16
                Span('我是 Span2').fontColor(Color.Blue).fontSize(16)
                // 设置斜体字
                .fontStyle(FontStyle.Italic)
                // 设置下画线，线条颜色为黑色
                .decoration({ type: TextDecorationType.Underline, color: Color.Black })
                // 设置文本颜色为灰色
                Span('，我是 Span3').fontSize(16).fontColor(Color.Grey)
                // 设置上画线，颜色为绿色
                .decoration({ type: TextDecorationType.Overline, color: Color.Green })
            }.borderWidth(1).padding(10)
        }.width('100%').justifyContent(FlexAlign.SpaceEvenly)
    }
}

显示效果如下图所示：


3) 通过 textCase 设置字母保持大写或小写，示例代码如下：

@Entry
@Component
struct TextSample {
    build() {
        Row() {
            Text() {
                Span('I am Upper-span').fontSize(12)
                    // 将文本中的英文字母转换为大写字母
                    .textCase(TextCase.UpperCase)
            }.borderWidth(1).padding(10)
        }.width('100%').justifyContent(FlexAlign.SpaceEvenly)
    }
}

显示效果如下图所示：


4) 添加事件。Span 组件无尺寸信息，仅支持添加 onClick 事件。示例代码如下；

Text() {
    Span('I am Upper-span').fontSize(12)
        .textCase(TextCase.UpperCase)
        .onClick(()=>{
        console.info('我是Span——onClick')
    })
}

显示效果如下图所示：


当点击文本时，控制台输出信息如下图所示：

ArkUI Text添加事件

Text 组件可以添加通用事件，可以绑定 onClick、onTouch 等事件来响应操作。例如：

Text('点我')
    .onClick(()=>{
    console.info('我是Text的点击响应事件');
})

ArkUI Text场景示例

Text 组件的应用场景示例代码如下：

@Entry
@Component
struct TextExample {
    build() {
        Column() {
            Row() {
                Text("1").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
                Text("我是热搜词条 1")
                    .fontSize(12)
                    .fontColor(Color.Blue)
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .fontWeight(300)
                Text("爆")
                    .margin({ left: 6 })
                    .textAlign(TextAlign.Center)
                    .fontSize(10)
                    .fontColor(Color.White)
                    .fontWeight(600)
                    .backgroundColor(0x770100)
                    .borderRadius(5)
                    .width(15)
                    .height(14)
            }.width('100%').margin(5)

            Row() {
                Text("2").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 })
                Text("我是热搜词条 2 我是热搜词条 2 我是热搜词条 2 我是热搜词条 2")
                    .fontSize(12)
                    .fontColor(Color.Blue)
                    .fontWeight(300)
                    .constraintSize({ maxWidth: 200 })
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                Text("热")
                    .margin({ left: 6 })
                    .textAlign(TextAlign.Center)
                    .fontSize(10)
                    .fontColor(Color.White)
                    .fontWeight(600)
                    .backgroundColor(0xCC5500)
                    .borderRadius(5)
                    .width(15)
                    .height(14)
            }.width('100%').margin(5)

            Row() {
                Text("3").fontSize(14).fontColor(Color.Orange).margin({ left: 10, right: 10 })
                Text("我是热搜词条 3")
                    .fontSize(12)
                    .fontColor(Color.Blue)
                    .fontWeight(300)
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                Text("热")
                    .margin({ left: 6 })
                    .textAlign(TextAlign.Center)
                    .fontSize(10)
                    .fontColor(Color.White)
                    .fontWeight(600)
                    .backgroundColor(0xCC5500)
                    .borderRadius(5)
                    .width(15)
                    .height(14)
            }.width('100%').margin(5)

            Row() {
                Text("4").fontSize(14).fontColor(Color.Grey).margin({ left: 10, right: 10 })
                Text("我是热搜词条 4 我是热搜词条 4 我是热搜词条 4 我是热搜词条 4")
                    .fontSize(12)
                    .fontColor(Color.Blue)
                    .fontWeight(300)
                    .constraintSize({ maxWidth: 200 })
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                Text("热")
            }.width('100%')
        }
    }
}

显示效果如下图所示：