鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Text文本组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Text文本组件

一、操作环境

操作系统: Windows 10 专业版

IDE:DevEco Studio 3.1

SDK:HarmonyOS 3.1

二、文本组件

Text 是显示文本的基础组件之一,它可以包含子组件 Span ,当包含 Span 时不生效,只显示 Span 的内容。

Text('我是Text') {
  Span('我是Span')
}
.padding(10)
.borderWidth(1)

0

T ext括号直接书写内容即可,下面是代码和示意图:

Text("Hello, 亚丁号")

        Text('Hello, 亚丁号')
          .width('100%')
          .textAlign(TextAlign.Center)

        Text('Hello, 亚丁号, Hello, 亚丁号, Hello, 亚丁号, Hello, 亚丁号')
          .maxLines(1)
          .textOverflow({overflow: TextOverflow.Ellipsis})

运行的示意图:

Text控件主要是继承了组件的公共属性和事件,这里不一一赘述。

控件的部分公共属性和事件:

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)控件的部分公共属性和事件-CSDN博客

Text还有一 些非公共的属性:

textAlign :设置文本的对其方式,对齐参考系是 Text 组件本身,只有 Text 组件本身的宽度大于文本内容长度, textAlign 属性才起作用, TextAlign 定义了以下 3 种类型:

  • Start(默认值):根据文字书写相同的方向对齐,比如中文从左往右排版,那么文本则靠左对齐。

  • Center:文本居中对齐。

  • End:根据文字书写相反的方向对齐,比如中文从左往右排版,那么文本则靠右对齐。

    简单样例如下所示:

    Text("Hello, OpenHarmony")
    .backgroundColor('#aabbcc')
    .textAlign(TextAlign.Center) // 宽度等于文本内容长度,textAlign不起作用

    Text('Hello, OpenHarmony')
    .backgroundColor('#ccaabb')
    .margin({top: 2})
    .width(200) // 宽度大于文本内容长度,textAlign起作用
    .textAlign(TextAlign.End)

    Text('Hello, OpenHarmony')
    .backgroundColor('#bbccaa')
    .margin({top: 2})
    .width('100%') // 宽度大于文本内容长度,textAlign起作用
    .textAlign(TextAlign.Center)

maxLinestextOverflow :设置文本显示的最大行数和截取方式,默认折行显示不截取,如果设置了此参数,则文本最多显示到指定的行,如果有多余的文本,可以通过 textOverflow 来指定截取方式,本样例的截断方式是 Ellipsis ,它将截断后的文本用 "..." 表示。

Text('Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony')
Text('Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony')
  .margin({top: 5})
  .maxLines(1)
  .textOverflow({overflow: TextOverflow.Ellipsis})

fontSizefontColorfontStylefontWeight:分别表示设置文字的大小,颜色,样式以及粗细,我们可以组合起来设置文本的富样式,先看一个样例:

Text('Hello, OpenHarmony')

Text('Hello, OpenHarmony')
  .fontSize(20)
  .fontColor('#ff0000')
  .fontWeight(FontWeight.Bold)
  .fontStyle(FontStyle.Italic)
  .decoration({type: TextDecorationType.Underline, color: Color.Black})

好了就写到这吧!

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,

大军纵横驰奔,

谁敢横刀立马?

惟有点赞加关注大军。

相关推荐
MarkHD5 小时前
第十八天 WebView深度优化指南
华为·harmonyos
塞尔维亚大汉6 小时前
OpenHarmony(鸿蒙南向)——平台驱动开发【MIPI CSI】
harmonyos·领域驱动设计
别说我什么都不会6 小时前
鸿蒙轻内核M核源码分析系列十五 CPU使用率CPUP
操作系统·harmonyos
塞尔维亚大汉8 小时前
OpenHarmony(鸿蒙南向)——平台驱动开发【I3C】
harmonyos·领域驱动设计
今阳10 小时前
鸿蒙开发笔记-6-装饰器之@Require装饰器,@Reusable装饰器
android·app·harmonyos
余多多_zZ10 小时前
鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图(@ohos.arkui.componentSnapshot (组件截图) )
学习·华为·harmonyos·鸿蒙·鸿蒙系统
一个处女座的程序猿O(∩_∩)O13 小时前
鸿蒙开发技术指南:从入门到精通
华为·harmonyos
陈无左耳、14 小时前
HarmonyOS学习第4天: DevEco Studio初体验
学习·华为·harmonyos
月未央16 小时前
HarmonyOS Next 开发系列:Local 状态管理实践
harmonyos
openinstall全渠道统计1 天前
免填邀请码工具:赋能六大核心场景,重构App增长新模型
android·ios·harmonyos