鸿蒙组件学习_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  组件支持设置文本是否可复制粘贴
相关推荐
Lee_xiaoming15 小时前
ArkTS基础语法 | (1)基本知识
arkts
●VON1 天前
HarmonyOS应用开发实战(基础篇)Day01-《ArkTS基本知识》
学习·华为·harmonyos·鸿蒙·von
全栈探索者2 天前
列表渲染不用 map,用 ForEach!—— React 开发者的鸿蒙入门指南(第 4 期)
react.js·harmonyos·arkts·foreach·列表渲染
仓颉编程语言2 天前
鸿蒙仓颉编程语言挑战赛二等奖作品:TaskGenie 打造基于仓颉语言的智能办公“任务中枢”
华为·鸿蒙·仓颉编程语言
_waylau3 天前
鸿蒙架构师修炼之道-架构师的职责是什么?
开发语言·华为·harmonyos·鸿蒙
坚果派·白晓明3 天前
在鸿蒙设备上快速验证由lycium工具快速交叉编译的C/C++三方库
c语言·c++·harmonyos·鸿蒙·编程语言·openharmony·三方库
熊猫钓鱼>_>3 天前
移动端开发技术选型报告:三足鼎立时代的开发者指南(2026年2月)
android·人工智能·ios·app·鸿蒙·cpu·移动端
ITUnicorn3 天前
【HarmonyOS6】ArkTS 自定义组件封装实战:动画水杯组件
华为·harmonyos·arkts·鸿蒙·harmonyos6
晚霞的不甘3 天前
Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析
flutter·ui·前端框架·交互·鸿蒙
全栈探索者3 天前
@Component + struct = 你的新函数组件——React 开发者的鸿蒙入门指南(第 2 期)
react·harmonyos·arkts·前端开发·deveco studio·鸿蒙next·函数组件