HarmonyOS学习ArkUI之Text

没有了遇见
110 阅读5分钟

Text 显示文本的控件,梳理一下文本显示的语法以及特殊需求

效果

  • ... .textOverflow({ overflow: TextOverflow.Ellipsis })
  • 跑马灯 .textOverflow({ overflow: TextOverflow.MARQUEE })
  • Span Span(" SPAN2").fontColor(Color.Blue)
  • 赋值粘贴.copyOption(CopyOptions.InApp)

一、基础文本样式

属性类型说明示例
contentstring  Resource文本内容（可直接在 Text() 构造函数中传入）Text('Hello World')
fontSizenumber  Resource字体大小（单位：vp）.fontSize(20)
fontColorColor  Resource字体颜色（支持 HEX/RGB/颜色常量）.fontColor('#FF0000')
fontWeightFontWeight  number字体粗细（如 FontWeight.Bold）.fontWeight(500)
fontStyleFontStyle字体样式（Normal 或 Italic）.fontStyle(FontStyle.Italic)
fontFamilystring  Resource字体家族（如 'Arial'）.fontFamily('HarmonyOS Sans')

二、布局与尺寸控制

属性类型说明示例
widthLength  Resource组件宽度（如 '100%', 200）.width('80%')
heightLength  Resource组件高度.height(50)
maxLinesnumber最大显示行数（需配合 textOverflow）.maxLines(2)
textOverflow{overflow: TextOverflow}文本溢出处理（Clip/Ellipsis/None）.textOverflow({overflow: TextOverflow.Ellipsis})
lineHeightstring  number  Resource行高（单位：vp 或百分比）.lineHeight('150%')
textAlignTextAlign水平对齐方式（Start/Center/End）.textAlign(TextAlign.Center)
textIndentnumber  string  Resource首行缩进（单位：vp）.textIndent(20)

三、文本装饰与效果

属性类型说明示例
decoration{ type: TextDecorationType, color?: Color }文本装饰线（Underline/Overline/LineThrough/None）.decoration({ type: TextDecorationType.Underline, color: '#000' })
letterSpacingnumber  string  Resource字符间距（单位：vp）.letterSpacing(2)
textCaseTextCase文本大小写转换（Normal/LowerCase/UpperCase）.textCase(TextCase.UpperCase)
baselineOffsetnumber  string  Resource基线偏移（单位：vp）.baselineOffset(10)

四、高级功能

属性类型说明示例
onClick(event: ClickEvent) => void点击事件回调.onClick(() => { ... })
copyOptionCopyOptions文本复制权限（None/Local/Distributed）.copyOption(CopyOptions.Local)
spanSpan 数组富文本（支持混合样式）见下方代码示例

五、富文本示例

typescript

复制

Text()  
  .span('红色文字', { fontSize: 20, fontColor: Color.Red })
  .span(' + 蓝色文字', { fontSize: 16, fontColor: Color.Blue })

六、注意事项

  1. 默认值：

    • maxLines: Infinity（不限制行数）
    • textAlign: 根据语言自动对齐（中文左对齐，阿拉伯语右对齐）

  2. 依赖关系：

    • maxLines 必须与 textOverflow 配合使用才能显示省略号。
    • textIndent 仅在多行文本首行生效。

  3. 性能优化：

    • 避免在长文本中频繁动态修改 span 内容。
    • 使用 textCase 代替手动转换大小写以减少逻辑代码。

  4. 版本兼容性：

    • copyOption 需 HarmonyOS V3.1 或更高版本。

import { common } from "@kit.AbilityKit" import { promptAction } from "@kit.ArkUI" import { ScreenUtil } from "lib_util"

@Builder export function TestPageBuilder() { TestPage() }

/**

  • 线性布局 */ @ComponentV2 struct TestPage {

//控制器 private controller: VideoController = new VideoController() // 占位位图 private previewUris: Resource = $r('app.media.ic_launcher') private scroller: Scroller = new Scroller(); @Local private textContent: string = '这是一个Text组件示例'; build() {

NavDestination() {
  Column(){
    Text(" 此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角")
      .backgroundColor(Color.Gray)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .maxLines(1)
      .copyOption(CopyOptions.InApp)
      .fontColor("#000000") //文字颜色
      .fontSize(22)// 文字大小
      .width(200)
    Text(" 此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角")
      .backgroundColor(Color.Gray)
      .textOverflow({ overflow: TextOverflow.Clip })
      .maxLines(1)
      .fontColor("#000000") //文字颜色
      .fontSize(22)// 文字大小
      .width(200)
    Text(" 此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角")
      .backgroundColor(Color.Gray)
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.MARQUEE })
      .fontColor("#000000") //文字颜色
      .fontSize(22)// 文字大小
      .width(200)

    Stack() {
      Column({ space: 20 }) {
        // 基础文本样式展示
        Text(this.textContent)
          .fontSize(20)
          .fontColor('#0000FF')
          .fontWeight(500)
          .fontStyle(FontStyle.Normal)
          .fontFamily('HarmonyOS Sans')
          .width('80%')

        // 布局与尺寸控制展示
        Text('设置了最大行数和溢出样式的文本')
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .width('80%')
          .lineHeight('150%')
          .textAlign(TextAlign.Center)
          .textIndent(20)

        // 文本装饰与效果展示
        Text('带装饰线和字符间距的文本')
          .decoration({ type: TextDecorationType.Underline, color: '#FF0000' })
          .letterSpacing(2)
          .textCase(TextCase.UpperCase)
          .baselineOffset(5)
          .width('80%')

        // 点击事件和复制权限展示
        Text('可点击和可本地复制的文本')
          .onClick(() => {
            console.log('文本被点击了');
          })
          .copyOption(CopyOptions.InApp)
          .width('80%')

        // 富文本（Span）展示
        Text(){
          Span("SPAN1")
          Span(" SPAN2").fontColor(Color.Blue).backgroundColor(Color.Yellow)
          Span(" SPAN3").fontColor(Color.Red).backgroundColor(Color.Yellow)
          Span(" SPAN4").fontColor(Color.Gray).backgroundColor(Color.Yellow)
        }

          .width('80%')

  }}}
  .padding({top: px2vp(ScreenUtil.getInstance().getTopRectHeight()),bottom: px2vp(ScreenUtil.getInstance().getBottomRectHeight())})


  .width("100%")
  .height("100%")


  // Scroll(this.scroller) {
  //   Column({ space: "35" }) {
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Row() {
  //       Text("水平").width("100").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //       Blank()
  //       Toggle({ type: ToggleType.Checkbox, isOn: true })
  //     }.width("100%")
  //
  //     Row({ space: "35" }) {
  //       Row() {
  //         Text("等分")
  //           .backgroundColor("#333333")
  //           .fontColor("#fff")
  //           .textAlign(TextAlign.Center)
  //           .align(Alignment.Center)
  //           .width("100%")
  //           .height("100")
  //       }.layoutWeight(1).backgroundColor(Color.Blue)
  //
  //       Row() {
  //         Text("等分")
  //           .backgroundColor("#333333")
  //           .fontColor("#fff")
  //           .textAlign(TextAlign.Center)
  //           .align(Alignment.Center)
  //           .width("100%")
  //           .height("100")
  //       }.layoutWeight(1).backgroundColor(Color.Blue)
  //
  //       Row() {
  //         Text("等分")
  //           .backgroundColor("#333333")
  //           .fontColor("#fff")
  //           .textAlign(TextAlign.Center)
  //           .align(Alignment.Center)
  //           .width("100%")
  //           .height("100")
  //       }.layoutWeight(1).backgroundColor(Color.Blue)
  //     }.width("100%")
  //
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //     Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  //
  //   }.margin({right:20})
  // }
  // .backgroundColor(0xDCDCDC)
  // .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
  // .scrollBar(BarState.On) // 滚动条常驻显示
  // .scrollBarColor(Color.Gray) // 滚动条颜色
  // .scrollBarWidth(10) // 滚动条宽度
  // .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  // .width("100%").height("100%")
  // .padding({
  //   top: px2vp(ScreenUtil.getInstance().getTopRectHeight()),
  //   bottom: px2vp(ScreenUtil.getInstance().getBottomRectHeight())
  // })


}

.hideTitleBar(true)
.mode(NavDestinationMode.STANDARD)
// .onBackPressed(() => {
//   (getContext(this) as common.UIAbilityContext)?.terminateSelf();
//   return true
// })

} }

avatar
文章
阅读
粉丝