鸿蒙学习笔记 03 文本组件

什么是文本组件

顾名思义, 文本, Text(). 是可以在屏幕上展示文本内容的组件 (这不是废话么)

一开始新建项目看到的Hello World, 就是使用文本组件实现的

Text("Hello World")
    .fontSize(50)
    .fontWeight(FontWeight.Bold)

如何使用文本

你可能会问: 就一个文本, 还要学习怎么使用? 没事, 一开始我也是这么想的, 但是后面发现其实这个东西还有点"东西".

首先我们要明确, Text()中, 不仅可以放入普通的string字符串, 也可以放入resource, 资源内容. 其实和图片读取本地文件是一个原理, 只不过这里读取的是一个字符串而已.

你问这有什么用? 当然是多语言适配咯, 不然你想要实现多语言就变得比较麻烦了.

普通文本使用

普通的使用我就不多说了吧? 直接Text()组件, 小括号里面放东西就可以了, 注意, 必须是字符串. 如果你想要放入变量, 可以使用JSON.stringify(value)函数. (学过前端的绝对不陌生), 或者我推荐你使用一种格式化字符串的方法, 使用两个反引号括住内容即可, 比如下面这样子:

Text(`Hello ${1 + 1}`)
    .fontSize(50)
    .fontWeight(FontWeight.Bold)

使用${}括住变量, 或者TS表达式即可

读取本地字串

这里就是为了实现多语言了, 如果你用不到多语言, 其实是可以不做处理的. 不过, 鸿蒙是为了连接万物, 所以这个功能还是非常重要的!

如果你观察过默认创建的目录, 应该可以看到下图中的两个语言文件夹

这两个语言文件夹, 叫做限定词目录, 是根据语言, 国家等等设备的相关信息决定的. 不过既然要做出决定, 自然就有一定的优先级√ 那么你可以点开下图中的三个文件夹, 应该都是可以找到一个string.json文件的.

对应的文件就是对应的语言下会替换的内容, 优先级是先查找element目录下面的, 没有的话再找对应语言版本下的文件

---

如何使用呢? 其实很简单, 比如说我在element下面的文件中, 添加一个字符串, 长这样:

{
   "name": "myName",
   "value": "Kaede Shimizu"
}

可能会出现报黄, 因为你设置了多语言的话, 一旦有一个语言没有适配, 就会报黄的

随后, 你可以回到程序中, 使用下面这种语法, 来获取这个字符串:

Text($r("app.string.myName"))
    .fontSize(50)
    .fontWeight(FontWeight.Bold)

获取你也发现这个规律了, 如果需要获取资源文件, 就是本地文件, 都会使用到$r这个操作符. 所以还是挺容易记住的√

相关属性

其实属性吧, 就是文本颜色之类的东西, 通用的东西(颜色, 大小)我就不介绍了, 这里主要介绍一下独有的一些属性.

textAlign

就是文本的对其格式, 默认是Start, 也就是默认居左对齐, 可以选择其他的更多选择, 下面是样子以及代码:

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 10 }) {
        Text("test 1")
          .textAlign(TextAlign.Center)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
        Text("test 2")
          .textAlign(TextAlign.Start)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
        Text("test 3")
          .textAlign(TextAlign.End)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
        Text("test 4")
          .textAlign(TextAlign.JUSTIFY)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
      }
      .width("100%")
    }
    .height("100%")
  }
}

textOverflow 和 maxLines

maxLines顾名思义, 就是一个文本控件显示的最大行数, 这里不多说; textOverflow必须要和maxLines配合使用, 否则是不会起作用的! 所以就一块说了: textOverflow其实就是设置对于超出范围的字符, 怎么处理, 还是一样, 给出效果和代码

PS: 最后一个会自动滚动, 相当于滚动弹幕了

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 10 }) {
        Text("test test test test test test")
          .textOverflow({overflow: TextOverflow.None})
          .maxLines(1)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
        Text("test test test test test test")
          .textOverflow({overflow: TextOverflow.Clip})
          .maxLines(1)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
        Text("test test test test test test")
          .textOverflow({overflow: TextOverflow.Ellipsis})
          .maxLines(1)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
        Text("test test test test test test")
          .textOverflow({overflow: TextOverflow.MARQUEE})
          .maxLines(1)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
      }
      .width("100%")
    }
    .height("100%")
  }
}

copyOption

顾名思义, 是否可以长按赋值文本, 下面是选中的效果:

反正还是一样吧, 只要你设置的不是None, 都是可以长按复制的

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 10 }) {
        Text("test test test test test test")
          .copyOption(CopyOptions.InApp)
          .maxLines(1)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
        Text("test test test test test test")
          .copyOption(CopyOptions.LocalDevice)
          .maxLines(1)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("80%")
      }
      .width("100%")
    }
    .height("100%")
  }
}

textCase

当然就是文本的大小写啦, 不多说, 还是一样, 设置属性即可

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 10 }) {
        Text("I Should Be Low")
          .textCase(TextCase.LowerCase)
          .maxLines(1)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("90%")
        Text("I am big")
          .textCase(TextCase.UpperCase)
          .maxLines(1)
          .fontSize(40)
          .border({ width: 2 })
          .padding(5)
          .width("90%")
      }
      .width("100%")
    }
    .height("100%")
  }
}

事件的话…这里就不多说啦, 一般你也不会点击纯文本之类的.

本次内容到此结束~, 感谢阅读, 希望有帮到你