鸿蒙组件学习_Text组件

说明

Text组件从API Version 7开始支持。

子组件

可以包含Span子组件

代码测试

复制代码
Text(){
    Span('hello World')
      .decoration({
        type: TextDecorationType.Underline,
        color: Color.Black
      })
      .letterSpacing(5)
      .textCase(TextCase.Normal)
}

span属性:
decoration
    type:   字体
        TextDecorationType.Underline    下划线    
        TextDecorationType.LineThrough  贯穿线
        TextDecorationType.Overline     上划线
    color:  颜色
letterSpacing:  string | number
textCase:   设置文本大小写
    TextCase.Normal     文本正常显示
    TextCase.LowerCase  小写
    TextCase.UpperCase  大写

Text参数
    content     文本内容。包含子组件Span时不生效,显示Span内容,并且此时text组件的样式不生效。
Text属性
    textAlign   设置文本段落在水平方向的对齐方式
    textOverflow    设置文本超长时的显示方式
    maxLines    设置文本的最大行数
    lineHeight  设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,Length为number类型时的单位为fp
    decoration  设置文本装饰线样式及其颜色
    letterSpacing   设置文本字符间距
    baselineOffset  设置文本基线的偏移量,默认值0
    minFontSize 设置文本最小显示字号
    maxFontSize 设置文本最大显示字号
    textCase    设置文本大小写
    copyOption  组件支持设置文本是否可复制粘贴
相关推荐
Fate_I_C30 分钟前
Flutter鸿蒙0-1开发-flutter create <prjn>
flutter·华为·harmonyos·鸿蒙
kirk_wang42 分钟前
Flutter animations 库在 OpenHarmony 平台的适配与性能优化实践
flutter·移动开发·跨平台·arkts·鸿蒙
江澎涌3 天前
鸿蒙 SDK 发布实战:JWorker 上架 ohpm 全流程
typescript·harmonyos·arkts
kirk_wang3 天前
Flutter GPUImage 库在鸿蒙平台的 GPU 图像滤镜适配实战
flutter·移动开发·跨平台·arkts·鸿蒙
柒儿吖3 天前
命令行critic.sh在开源鸿蒙PC平台的实现解析
鸿蒙·命令行
kirk_wang3 天前
Flutter `flutter_statusbarcolor_ns` 在 OpenHarmony 平台的状态栏颜色适配实践
flutter·移动开发·跨平台·arkts·鸿蒙
kirk_wang3 天前
Flutter 三方库在 OHOS 平台的适配实践:以 flutter_test_lib 为例
flutter·移动开发·跨平台·arkts·鸿蒙
kirk_wang3 天前
Flutter 三方库在 OHOS 平台的适配实践
flutter·移动开发·跨平台·arkts·鸿蒙
m0_637146933 天前
鸿蒙技术实测:ArkTS 语言深度解读
鸿蒙·鸿蒙系统
大土豆的bug记录6 天前
鸿蒙实现自定义类似活体检测功能
数码相机·华为·harmonyos·鸿蒙