【鸿蒙开发】系统组件Text，Span_鸿蒙 span

作者：喵喵爱编程 | 2024-08-13 12:09:20

踩

鸿蒙 span

Text组件

Text显示一段文本

接口：

Text(content?: string | Resource)

参数：

参数名	参数类型	必填	参数描述
content	string \| Resource	否	文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。默认值：' '

参数名

参数类型

必填

参数描述

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	设置文本的最大行数。说明：默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 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，长按文本，会弹出文本选择菜单，可选中文本并进行复制、全选操作。

字符串参数


@Entry
@Component
struct APage {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .width(200)
          .height(200)
          .backgroundColor(Color.Orange)
          .fontSize(16)
          .textAlign(TextAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Resource参数


@Entry
@Component
struct APage {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text($r("app.string.module_desc"))
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .width(200)
          .height(200)
          .backgroundColor(Color.Orange)
          .textAlign(TextAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

文本超出隐藏

textOverflow需要配合maxLines属性使用


@Entry
@Component
struct APage {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text("哈哈哈，今天天气真是不错呀！超级开心的")
          .width(200)
          .height(100)
          .backgroundColor(Color.Orange)
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(1)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Span子组件


@Entry
@Component
struct APage {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text() {
          Span("￥")
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .fontColor("#f00")
          Span("200")
            .fontSize(40)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.Blue)
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】