鸿蒙组件学习_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  组件支持设置文本是否可复制粘贴
相关推荐
熊猫钓鱼>_>2 小时前
【开源鸿蒙跨平台开发先锋训练营】React Native 工程化实践:Hooks 封装与跨端 API 归一化
react native·react.js·华为·开源·harmonyos·鸿蒙·openharmony
熊猫钓鱼>_>11 小时前
【开源鸿蒙跨平台开发先锋训练营】React Native 性能巅峰:HarmonyOS极致优化实战手册
react native·react.js·华为·开源·harmonyos·鸿蒙·openharmony
ITUnicorn1 天前
【HarmonyOS 6】HarmonyOS 自定义时间选择器实现
华为·harmonyos·arkts·鸿蒙·harmonyos6
俩毛豆1 天前
获得2025年度鸿蒙开发者社区贡献榜单(问答产出榜、文章产出榜)
华为·harmonyos·鸿蒙
熊猫钓鱼>_>1 天前
【开源鸿蒙跨平台开发先锋训练营】Day20 React Native 鸿蒙开发全阶段大复盘:从零到一的跨越
react native·开源·react·harmonyos·鸿蒙·openharmony·native
熊猫钓鱼>_>1 天前
【开源鸿蒙跨平台开发先锋训练营】Day 12:全场景适配与异常防护——构建高可靠的鸿蒙跨端体验
react native·ui·华为·开源·app·harmonyos·鸿蒙
加农炮手Jinx1 天前
Flutter for OpenHarmony 实战:network_info_plus 网络扫描与隐私合规深度适配
网络·flutter·华为·harmonyos·鸿蒙
●VON1 天前
HarmonyOS应用开发实战(基础篇)Day04-《泛型与空值安全》
安全·华为·harmonyos·鸿蒙·von
加农炮手Jinx1 天前
Flutter for OpenHarmony 实战:Injectable — 自动化依赖注入大师
网络·flutter·华为·harmonyos·鸿蒙
熊猫钓鱼>_>1 天前
【开源鸿蒙跨平台开发先锋训练营】Day 13:React Native 开发轻量级页面快速响应实践
人工智能·react native·华为·开源·harmonyos·鸿蒙·移动端