• HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Text

    显示一段文本的组件。该组件从API Version 7开始支持。用上角标单独标记该内容的起始版本。可以包含Span子组件。

    一、接口

    Text(content?: string | Resource)

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    参数：

    参数：

    参数名

    参数类型

    必填

    参数描述

    content

    string | Resource

    否

    文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。

    默认值：' '

    二、属性

    除支持通用属性外，还支持以下属性：

    名称

    参数类型

    描述

    textAlign

    TextAlign

    设置文本段落在水平方向的对齐方式

    默认值：TextAlign.Start

    说明：

    文本段落宽度占满Text组件宽度。

    可通过align属性控制文本段落在垂直方向上的位置，此组件中不可通过align属性控制文本段落在水平方向上的位置，即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同，控制内容在顶部。Alignment.Start、Alignment.Center、Alignment.End效果相同，控制内容垂直居中。Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同，控制内容在底部。结合TextAlign属性可控制内容在水平方向的位置。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    textOverflow

    {overflow: TextOverflow}

    设置文本超长时的显示方式。

    默认值：{overflow: TextOverflow.Clip}

    说明：

    文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。

    需配合maxLines使用，单独设置不生效。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    maxLines

    number

    设置文本的最大行数。

    默认值：Infinity

    说明：

    默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    lineHeight

    string | number | Resource

    设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    decoration

    {

    type: TextDecorationType,

    color?: ResourceColor

    }

    设置文本装饰线样式及其颜色。

    默认值：{

    type: TextDecorationType.None,

    color：Color.Black

    }

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    baselineOffset

    number | string

    设置文本基线的偏移量，默认值0。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    说明：

    设置该值为百分比时，按默认值显示。

    letterSpacing

    number | string

    设置文本字符间距。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    说明：

    设置该值为百分比时，按默认值显示。

    minFontSize

    number | string | Resource

    设置文本最小显示字号。

    需配合maxFontSize以及maxline或布局大小限制使用，单独设置不生效。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    maxFontSize

    number | string | Resource

    设置文本最大显示字号。

    需配合minFontSize以及maxline或布局大小限制使用，单独设置不生效。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    textCase

    TextCase

    设置文本大小写。

    默认值：TextCase.Normal

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    copyOption9+

    CopyOptions

    组件支持设置文本是否可复制粘贴。

    默认值：CopyOptions.None

    该接口支持在ArkTS卡片中使用。

    说明：

    设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，长按文本，会弹出文本选择菜单，可选中文本并进行复制、全选操作。

    说明：不支持Text内同时存在文本内容和Span子组件。如果同时存在，只显示Span内的内容。

    三、事件

    支持通用事件。

    四、示例

    示例1

    1. textAlign，textOverflow，maxLines，lineHeight使用示例。
    2. // xxx.ets
    3. @Entry
    4. @Component
    5. struct TextExample1 {
    6.   build() {
    7.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
    8.       // 文本水平方向对齐方式设置
    9.       // 单行文本
    10.       Text('textAlign').fontSize(9).fontColor(0xCCCCCC)
    11.       Text('TextAlign set to Center.')
    12.         .textAlign(TextAlign.Center)
    13.         .fontSize(12)
    14.         .border({ width: 1 })
    15.         .padding(10)
    16.         .width('100%')
    17.       Text('TextAlign set to Start.')
    18.         .textAlign(TextAlign.Start)
    19.         .fontSize(12)
    20.         .border({ width: 1 })
    21.         .padding(10)
    22.         .width('100%')
    23.       Text('TextAlign set to End.')
    24.         .textAlign(TextAlign.End)
    25.         .fontSize(12)
    26.         .border({ width: 1 })
    27.         .padding(10)
    28.         .width('100%')
    29.  
    30.       // 多行文本
    31.       Text('This is the text content with textAlign set to Center.')
    32.         .textAlign(TextAlign.Center)
    33.         .fontSize(12)
    34.         .border({ width: 1 })
    35.         .padding(10)
    36.         .width('100%')
    37.       Text('This is the text content with textAlign set to Start.')
    38.         .textAlign(TextAlign.Start)
    39.         .fontSize(12)
    40.         .border({ width: 1 })
    41.         .padding(10)
    42.         .width('100%')
    43.       Text('This is the text content with textAlign set to End.')
    44.         .textAlign(TextAlign.End)
    45.         .fontSize(12)
    46.         .border({ width: 1 })
    47.         .padding(10)
    48.         .width('100%')
    49.  
    50.  
    51.       // 文本超长时显示方式
    52.       Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)
    53.       // 超出maxLines截断内容展示
    54.       Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
    55.         .textOverflow({ overflow: TextOverflow.Clip })
    56.         .maxLines(1)
    57.         .fontSize(12)
    58.         .border({ width: 1 })
    59.         .padding(10)
    60.  
    61.       // 超出maxLines展示省略号
    62.       Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('')
    63.         .join('\u200B'))
    64.         .textOverflow({ overflow: TextOverflow.Ellipsis })
    65.         .maxLines(1)
    66.         .fontSize(12)
    67.         .border({ width: 1 })
    68.         .padding(10)
    69.  
    70.       Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
    71.       Text('This is the text with the line height set. This is the text with the line height set.')
    72.         .fontSize(12).border({ width: 1 }).padding(10)
    73.       Text('This is the text with the line height set. This is the text with the line height set.')
    74.         .fontSize(12).border({ width: 1 }).padding(10)
    75.         .lineHeight(20)
    76.     }.height(600).width(350).padding({ left: 35, right: 35, top: 35 })
    77.   }
    78. }
     

    示例2
     

    1. decoration，baselineOffset，letterSpacing，textCase使用示例：
    2. @Entry
    3. @Component
    4. struct TextExample2 {
    5.   build() {
    6.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
    7.       Text('decoration').fontSize(9).fontColor(0xCCCCCC)
    8.       Text('This is the text content with the decoration set to LineThrough and the color set to Red.')
    9.         .decoration({
    10.           type: TextDecorationType.LineThrough,
    11.           color: Color.Red
    12.         })
    13.         .fontSize(12)
    14.         .border({ width: 1 })
    15.         .padding(10)
    16.         .width('100%')
    17.  
    18.  
    19.       Text('This is the text content with the decoration set to Overline and the color set to Red.')
    20.         .decoration({
    21.           type: TextDecorationType.Overline,
    22.           color: Color.Red
    23.         })
    24.         .fontSize(12)
    25.         .border({ width: 1 })
    26.         .padding(10)
    27.         .width('100%')
    28.  
    29.  
    30.       Text('This is the text content with the decoration set to Underline and the color set to Red.')
    31.         .decoration({
    32.           type: TextDecorationType.Underline,
    33.           color: Color.Red
    34.         })
    35.         .fontSize(12)
    36.         .border({ width: 1 })
    37.         .padding(10)
    38.         .width('100%')
    39.  
    40.       // 文本基线偏移
    41.       Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC)
    42.       Text('This is the text content with baselineOffset 0.')
    43.         .baselineOffset(0)
    44.         .fontSize(12)
    45.         .border({ width: 1 })
    46.         .padding(10)
    47.         .width('100%')
    48.       Text('This is the text content with baselineOffset 30.')
    49.         .baselineOffset(30)
    50.         .fontSize(12)
    51.         .border({ width: 1 })
    52.         .padding(10)
    53.         .width('100%')
    54.       Text('This is the text content with baselineOffset -20.')
    55.         .baselineOffset(-20)
    56.         .fontSize(12)
    57.         .border({ width: 1 })
    58.         .padding(10)
    59.         .width('100%')
    60.  
    61.       // 文本字符间距
    62.       Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
    63.       Text('This is the text content with letterSpacing 0.')
    64.         .letterSpacing(0)
    65.         .fontSize(12)
    66.         .border({ width: 1 })
    67.         .padding(10)
    68.         .width('100%')
    69.       Text('This is the text content with letterSpacing 3.')
    70.         .letterSpacing(3)
    71.         .fontSize(12)
    72.         .border({ width: 1 })
    73.         .padding(10)
    74.         .width('100%')
    75.       Text('This is the text content with letterSpacing -1.')
    76.         .letterSpacing(-1)
    77.         .fontSize(12)
    78.         .border({ width: 1 })
    79.         .padding(10)
    80.         .width('100%')
    81.  
    82.       Text('textCase').fontSize(9).fontColor(0xCCCCCC)
    83.       Text('This is the text content with textCase set to Normal.')
    84.         .textCase(TextCase.Normal)
    85.         .fontSize(12)
    86.         .border({ width: 1 })
    87.         .padding(10)
    88.         .width('100%')
    89.       // 文本全小写展示
    90.       Text('This is the text content with textCase set to LowerCase.')
    91.         .textCase(TextCase.LowerCase)
    92.         .fontSize(12)
    93.         .border({ width: 1 })
    94.         .padding(10)
    95.         .width('100%')
    96.       // 文本全大写展示
    97.       Text('This is the text content with textCase set to UpperCase.')
    98.         .textCase(TextCase.UpperCase)
    99.         .fontSize(12).border({ width: 1 }).padding(10)
    100.  
    101.     }.height(700).width(350).padding({ left: 35, right: 35, top: 35 })
    102.   }
    103. }
     

     

    五、场景
     

    适合做文本特效的各种卡片。
     

     

    本文根据HarmonyOS官方文档整理。
    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
2021年亚太杯APMCM数学建模大赛C题生态保护的建设及其对环境影响的评价求解全过程文档及程序                            
    
计算机专业毕业设计演示视频（论文+系统）_kaic                            
    
2025秋招NLP算法面试真题(四)- 解决老大难问题-如何一行代码带你随心所欲重新初始化bert的某些参数(附Pytorch代码)                            
    
自动化测试与Jenkins持续集成实战                            
    
初学vue，想自己找个中长期小型项目练练手，应该做什么？                            
    
Java发送邮件 启用SSL                            
    
基于驱动框架编写驱动代码                            
    
手把手教你写一个JSON在线解析的前端网站1                            
    
STM32F103ZET6【HAL开发】STM32CUBEMX------3.3测量PWM的频率和占空比                            
    
亚马逊FBA头程物流运输方式有哪些?                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/weixin_69135651/article/details/133927551
                
    •