鸿蒙应用开发从入门到实战（十一）：ArkUI组件Text&TextInput

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！

ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文主要讲解文本组件Text和TextInput的使用。

一、文本Text

1.1 概述

Text为文本组件，用于显示文字内容。

1.2 参数

Text组件的参数类型为string | Resource，下面分别对两个参数类型进行介绍：

• string类型

Text('我是一段文本')

• Resource 类型

Resource类型的参数用于引用 resources/*/element目录中定义的字符串，同样需要使用$r()引用。

例如resources/base/element目录中有一个string.json文件，内容如下

{
  "string": [
    {
      "name": "greeting",
      "value": "你好"
    }
  ]
}

此时我们便可通过如下方式引用并显示greeting的内容。

Text($r('app.string.greeting'))

示例代码：

1、分别在resources下的base、en_US、zh_CN目录下的element下的string.json中添加对应的配置

在base和zh_CN下的element下的string.json中添加

 {
      "name": "greeting",
      "value": "你好,鸿蒙"
    }

在en_US目录下的element下的string.json中添加

{
      "name": "greeting",
      "value": "hello,harmony"
    }

2、component目录下新建text目录，新建TextParameterPage.ets文件

@Entry
@Component
// text组件
struct TextParameterPage {
  build() {
    Column({ space: 50 }) {
      // text组件参数
      //1、字符串类型
      Text('你好,鸿蒙')
        .fontSize(50)

      //2、Resource类型
      Text($r('app.string.greeting'))
        .fontSize(50)
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

1.3 常用属性

1.3.1 字体大小

字体大小可通过fontSize()方法进行设置，该方法的参数类型为string | number| Resource，下面逐一介绍

• string类型

string类型的参数可用于指定字体大小的具体单位，例如fontSize('100px')，字体大小的单位支持px、fp。其中fp(font pixel)与vp类似，具体大小也会随屏幕的像素密度变化而变化。

• number类型

number类型的参数，默认以fp作为单位。

• Resource类型

Resource类型参数用于引用resources下的element目录中定义的数值。

示例代码：

在component/text目录下新建FontSizePage.ets文件

@Entry
@Component
// text属性：字体大小
struct FontSizePage {
   
   
  build() {
   
   
      Column({
   
    space: 50 }) {
   
   
        // 1、参数为string类型
        Text('你好,鸿蒙')
          .fontSize('150px')

        Text('你好,鸿蒙')
          .fontSize('50fp')

        // 2、参数为number类型
        Text('你好,鸿蒙')
          .fontSize(50)
      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
  }
}

1.3.2 字体粗细

字体粗细可通过fontWeight()方法进行设置，该方法参数类型为number | FontWeight | string，下面逐一介绍

• number类型

number类型的取值范围是[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。

• FontWeight类型

FontWeight为枚举类型，可选枚举值如下

名称	描述
FontWeight.Lighter	字体较细。
FontWeight.Normal	字体粗细正常。
FontWeight.Regular	字体粗细正常。
FontWeight.Medium	字体粗细适中。
FontWeight.Bold	字体较粗。
FontWeight.Bolder	字体非常粗。

• string类型

string类型的参数仅支持number类型和FontWeight类型参数的字符串形式，例如例如'100'和bold。

示例代码：

在component/text下新建FontWeightPage.ets文件

@Entry
@Component
// 字体粗细
struct FontWeightPage {
   
   

  build() {
   
   
    Column({
   
    space: 50 }) {
   
   

      //默认效果
      Text('你好,鸿蒙')
        .fontSize(50)

      // 1、number类型
      Text('你好,鸿蒙')
        .fontSize(50)
        .fontWeight(666)

      // 2、FontWeight类型
      Text('你好,鸿蒙')
        .fontSize(50)
        .fontWeight(FontWeight.Lighter)

      // 3、string类型
      Text('你好,鸿蒙')
        .fontSize(50)
        .fontWeight('800')

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

1.3.3 字体颜色

​ 字体颜色可通过fontColor()方法进行设置，该方法参数类型为Color | string | number | Resource，下面逐一介绍

• Color类型

  Color为枚举类型，其中包含了