ArkUI组件----Text

Text：文本显示组件

作用：把我们要展示的文字显示在页面上

1、使用前要声明Text组件并设置文本内容

Text(content?: string|Resource)

content?：就是要展示的文本内容

string|Resource：文本的数据类型

• string格式，直接填写文本内容                                                                                                                                                                                                                                                              Text('图片宽度')
• Resource格式，读取本地资源文件                                                                                                    Text($r('app.string.width_label'))

2、添加文本属性

Text('注册账号')
  .lineHeight(32)  // 行高
  .fontSize(20)  // 字体大小
  .fontColor('#ff1876f8')  // 字体颜色
  .fontWeight(FontWeight.Medium)  // 字体粗细

3、练习

string格式

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Image($r('app.media.icon'))
          .width(250)
          .interpolation(ImageInterpolation.High)

        Text('图片宽度：')
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果

 

string格式下，文本内容是写死的

但是我们希望是可以国家化的，根据中文和英文环境切换，需要使用Resource格式

Resource格式

找限定词目录

需要找到resource目录下的en_US和zh_CN目录中的string.json文件

需要在string.json文件中添加如下键值对

en_US目录中的string.json

{
   "name": "width_label",
   "value": "Image Width"
}

zh_CN目录中的string.json

{
   "name": "width_label",
   "value": "图片宽度"
}

这时候发现还有错误

这是因为限定词目录中写了，但是base目录没有写

base目录下的string.json文件中也需要写这么一个键值对

这时可以选择zh-CN或者en_US来展示不同的文字效果

通过fontsize和fontweight属性调整文字字体大小和粗细