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

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文主要讲解文本组件Text和TextInput的使用。
一、文本Text

1.1 概述

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

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

• string类型
  

1. Text('我是一段文本')

复制代码

• Resource 类型
  

Resource类型的参数用于引用 resources/*/element目录中定义的字符串，同样需要使用$r()引用。
例如resources/base/element目录中有一个string.json文件，内容如下

1. {
2.   "string": [
3.     {
4.       "name": "greeting",
5.       "value": "你好"
6.     }
7.   ]
8. }

复制代码

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

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

复制代码

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

1. {
2.       "name": "greeting",
3.       "value": "你好,鸿蒙"
4.     }

复制代码

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

1. {
2.       "name": "greeting",
3.       "value": "hello,harmony"
4.     }

复制代码

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

1. @Entry
2. @Component
3. // text组件
4. struct TextParameterPage {
5.   build() {
6.     Column({ space: 50 }) {
7.       // text组件参数
8.       //1、字符串类型
9.       Text('你好,鸿蒙')
10.         .fontSize(50)
12.       //2、Resource类型
13.       Text($r('app.string.greeting'))
14.         .fontSize(50)
15.     }.width('100%')
16.     .height('100%')
17.     .justifyContent(FlexAlign.Center)
18.   }
19. }

复制代码

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文件

1. @Entry
2. @Component
3. // text属性：字体大小
4. struct FontSizePage {
5.   build() {
6.       Column({ space: 50 }) {
7.         // 1、参数为string类型
8.         Text('你好,鸿蒙')
9.           .fontSize('150px')
11.         Text('你好,鸿蒙')
12.           .fontSize('50fp')
14.         // 2、参数为number类型
15.         Text('你好,鸿蒙')
16.           .fontSize(50)
17.       }.width('100%')
18.       .height('100%')
19.       .justifyContent(FlexAlign.Center)
20.   }
21. }

复制代码

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文件

1. @Entry
2. @Component
3. // 字体粗细
4. struct FontWeightPage {
6.   build() {
7.     Column({ space: 50 }) {
9.       //默认效果
10.       Text('你好,鸿蒙')
11.         .fontSize(50)
13.       // 1、number类型
14.       Text('你好,鸿蒙')
15.         .fontSize(50)
16.         .fontWeight(666)
18.       // 2、FontWeight类型
19.       Text('你好,鸿蒙')
20.         .fontSize(50)
21.         .fontWeight(FontWeight.Lighter)
23.       // 3、string类型
24.       Text('你好,鸿蒙')
25.         .fontSize(50)
26.         .fontWeight('800')
28.     }.width('100%')
29.     .height('100%')
30.     .justifyContent(FlexAlign.Center)
31.   }
32. }

复制代码

1.3.3 字体颜色

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

• Color类型
  Color为枚举类型，其中包含了多种常用颜色，例如Color.Green
  
• string类型
  string类型的参数可用于设置 rgb 格式的颜色，具体写法可以为'rgb(0, 128, 0)'或者'#008000'
  
• number类型
  number类型的参数用于使用16进制的数字设置 rgb 格式的颜色，具体写法为0x008000
  
• Resource类型
  Resource类型的参数用于应用resources下的element目录中定义的值。
  

示例代码：
在component/text目录下新建FontColorPage.ets文件

1. @Entry
2. @Component
3. // 字体颜色
4. struct FontColorPage {
6.   build() {
7.     Column({ space: 50 }) {
8.       // 1、Color类型
9.       Text('Color.Green')
10.         .fontSize(40)
11.         .fontWeight(FontWeight.Bold)
12.         .fontColor(Color.Green)
14.       // 2、string类型
15.       Text('rgb(0, 128, 0)')
16.         .fontSize(40)
17.         .fontWeight(FontWeight.Bold)
18.         .fontColor('rgba(59, 171, 59, 0.33)')
20.       Text('#008000')
21.         .fontSize(40)
22.         .fontWeight(FontWeight.Bold)
23.         .fontColor('#a4008000')
25.       // 3、number类型
26.       Text('0x008000')
27.         .fontSize(40)
28.         .fontWeight(FontWeight.Bold)
29.         .fontColor(0xa4008000)
31.     }.width('100%')
32.     .height('100%')
33.     .justifyContent(FlexAlign.Center)
34.   }
35. }

复制代码

1.3.4 文本对齐

文本对齐方向可通过textAlign()方法进行设置，该方法的参数为枚举类型TextAlign，可选的枚举值如下
名称描述TextAlign.Start首部对齐TextAlign.Center居中对齐TextAlign.End尾部对齐各选项效果如下

示例代码：
text目录下新建TextAlignPage.ets文件

1. @Entry
2. @Component
3. // 文本对齐
4. struct TextAlignPage {
6.   build() {
7.     Row() {
8.       Column({ space: 50 }) {
9.         Column({ space: 10 }) {
10.           // 1、TextAlign.Start
11.           Text('鸿蒙操作系统是由华为公司开发的全场景、分布式的新一代操作系统，旨在实现各类智能设备的高效协同工作和统一体验')
12.             .fontSize(20)
13.             .width(300)
14.             .borderWidth(1)
15.             .textAlign(TextAlign.Start)
16.           Text('Start')
17.         }
19.         Column({ space: 10 }) {
20.           // 2、TextAlign.Center
21.           Text('鸿蒙操作系统是由华为公司开发的全场景、分布式的新一代操作系统，旨在实现各类智能设备的高效协同工作和统一体验')
22.             .fontSize(20)
23.             .width(300)
24.             .borderWidth(1)
25.             .textAlign(TextAlign.Center)
26.           Text('Center')
27.         }
29.         Column({ space: 10 }) {
30.           // 3、TextAlign.End
31.           Text('鸿蒙操作系统是由华为公司开发的全场景、分布式的新一代操作系统，旨在实现各类智能设备的高效协同工作和统一体验')
32.             .fontSize(20)
33.             .width(300)
34.             .borderWidth(1)
35.             .textAlign(TextAlign.End)
36.           Text('End')
37.         }
39.       }.width('100%')
40.       .height('100%')
41.       .justifyContent(FlexAlign.Center)
42.     }
43.   }
44. }

复制代码

1.3.5 最大行数和超长处理

可使用maxLines()方法控制文本的最大行数，当内容超出最大行数时，可使用textOverflow()方法处理超出部分，该方法的参数类型为{ overflow: TextOverflow }，其中TextOverflow为枚举类型，可用枚举值有
名称描述TextOverflow.Clip文本超长时，进行裁剪显示。TextOverflow.Ellipsis文本超长时，显示不下的文本用省略号代替。各选项效果如下

示例代码：
在component/text目录下新建TextOverFlowPage.ets文件

1. @Entry
2. @Component
3. // 最大行数和超长处理
4. struct TextOverFlowPage {
6.   build() {
7.     Column({ space: 50 }) {
8.       Column({ space: 10 }) {
9.         Text('鸿蒙操作系统是由华为公司开发的全场景、分布式的新一代操作系统，旨在实现各类智能设备的高效协同工作和统一体验')
10.           .fontSize(20)
11.           .width(300)
12.           .borderWidth(1)
13.         Text('原始内容')
14.       }
16.       // 1、TextOverflow.Clip 文本超长时，进行裁剪显示
17.       Column({ space: 10 }) {
18.         Text('鸿蒙操作系统是由华为公司开发的全场景、分布式的新一代操作系统，旨在实现各类智能设备的高效协同工作和统一体验')
19.           .fontSize(20)
20.           .width(300)
21.           .borderWidth(1)
22.           .maxLines(2)
23.           .textOverflow({ overflow: TextOverflow.Clip })
24.         Text('Clip')
25.       }
27.       // 2、TextOverflow.Ellipsis 文本超长时，显示不下的文本用省略号代替
28.       Column({space:10}) {
29.         Text('鸿蒙操作系统是由华为公司开发的全场景、分布式的新一代操作系统，旨在实现各类智能设备的高效协同工作和统一体验')
30.           .fontSize(20)
31.           .width(300)
32.           .borderWidth(1)
33.           .maxLines(2)
34.           .textOverflow({ overflow: TextOverflow.Ellipsis })
35.         Text('Ellipsis')
36.       }
38.     }.width('100%')
39.     .height('100%')
40.     .justifyContent(FlexAlign.Center)
41.   }
42. }

复制代码

二、文本输入TextInput

2.1 概述

TextInput为文本输入组件，用于接收用户输入的文本内容。
2.2 参数

TextInput组件的参数定义如下

1. TextInput(value?:{placeholder?: string|Resource , text?: string|Resource})

复制代码

• placeholder
  

placeholder属性用于设置无输入时的提示文本，效果如下

• text
  

text用于设置输入框当前的文本内容，效果如下

示例代码：
component目录下新建input目录，新建TextInputParameter.ets文件

1. @Entry
2. @Component
3. // 文本输入参数
4. struct TextInputParameter {
6.   build() {
7.     Column({ space: 50 }) {
8.       TextInput()
9.         .width('70%')
11.       // 1、placeholder参数
12.       TextInput({ placeholder: '请输入用户名' })
13.         .width('70%')
15.       // 2、text参数
16.       TextInput({ text: '当前内容' })
17.         .width('70%')
19.     }.width('100%')
20.     .height('100%')
21.     .justifyContent(FlexAlign.Center)
22.   }
23. }

复制代码

2.3 常用属性

2.3.1 输入框类型

可通过type()方法设置输入框的类型，该方法的参数为InputType枚举类型，可选的枚举值有
名称描述InputType.Normal基本输入模式InputType.Password密码输入模式InputType.Number纯数字输入模式2.3.2 光标样式

可通过caretColor()方法设置光标的颜色，效果如下

2.3.3 placeholder样式

可通过placeholderFont()和placeholderColor()方法设置 placeholder 的样式，其中placeholderFont()用于设置字体，包括字体大小、字体粗细等，placeholderColor()用于设置字体颜色，效果如下

2.3.4 文本样式

输入文本的样式可通过fontSize()、fontWeight()、fontColor()等通用属性方法进行设置。
示例代码：
在input目录下新建TextInputAttributePage.ets文件

1. @Entry
2. @Component
3. // TextInput属性
4. struct TextInputAttributePage {
6.   build() {
7.     Column({ space: 50 }) {
9.       // 1、输入框类型 type()设置类型， InputType
10.       Column({ space: 10 }) {
11.         Text('输入框类型')
12.         TextInput({ placeholder: '请输入任意内容' })
13.           .width('70%')
14.           .type(InputType.Normal)
15.         TextInput({ placeholder: '请输入数字' })
16.           .width('70%')
17.           .type(InputType.Number)
18.         TextInput({ placeholder: '请输入密码' })
19.           .width('70%')
20.           .type(InputType.Password)
21.       }
23.       // 2、光标样式 caretColor()设置光标的颜色
24.       Column({ space: 10 }) {
25.         Text('光标样式')
26.         TextInput()
27.           .width('70%')
28.           .caretColor(Color.Red)
29.       }
31.       // 3、placeholder样式 placeholderFont、placeholderColor
32.       Column({ space: 10 }) {
33.         Text('placeholder样式')
34.         TextInput({ placeholder: '请输入用户名' })
35.           .width('70%')
36.           .placeholderFont({ weight: 800 ,style:FontStyle.Italic})
37.           .placeholderColor('#66008000')
38.       }
40.     }.width('100%')
41.     .height('100%')
42.     .justifyContent(FlexAlign.Center)
43.   }
44. }

复制代码

2.4 常用事件

2.4.1 change事件

每当输入的内容发生变化，就会触发 change 事件，开发者可使用onChange()方法为TextInput组件绑定 change 事件，该方法的参数定义如下

1. onChange(callback: (value: string) => void)

复制代码

其中value为最新内容。
2.4.2 焦点事件

焦点事件包括获得焦点和失去焦点两个事件，当输入框获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件，开发者可使用onFocus()和onBlur()方法为 TextInput 组件绑定相关事件，两个方法的参数定义如下

1. onFocus(event: () => void)       

复制代码

1. onBlur(event: () => void)

复制代码

示例代码：
在input目录下新建TextInputEvent.ets文件

1. @Entry
2. @Component
3. // TextInput事件
4. struct TextInputEvent {
6.   build() {
7.     Column({ space: 50 }) {
8.       TextInput({ placeholder: '请输入用户名' })
9.         .width('70%')
10.         .type(InputType.Normal)
11.         // 1、change事件
12.         .onChange((value) => {
13.           console.log(`用户名:${value}`)
14.         })
15.         // 2、获得焦点
16.         .onFocus(() => {
17.           console.log('用户名输入框获得焦点')
18.         })
19.         // 3、失去焦点
20.         .onBlur(() => {
21.           console.log('用户名输入框失去焦点')
22.         })
24.       TextInput({ placeholder: '请输入密码' })
25.         .width('70%')
26.         .type(InputType.Password)
27.         .onChange((value) => {
28.           console.log(`密码:${value}`)
29.         })
30.         .onFocus(() => {
31.           console.log('密码输入框获得焦点')
32.         })
33.         .onBlur(() => {
34.           console.log('密码输入框失去焦点')
35.         })
36.     }.width('100%')
37.     .height('100%')
38.     .justifyContent(FlexAlign.Center)
39.   }
40. }

复制代码

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

不错，里面软件多更新就更好了