鸿蒙#2020征文-TV# 3.1.1 文本组件 - Text

系统
文本组件是我们最常用的组件之一,它是用来在UI界面上显示字符串。作为基本组件,有很多扩展,常见的有按钮组件Button、文本编辑组件TextFiled、计时器组件TickTimer,它们都是Text组件的扩展(也称为Text的子类)。

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

文本组件是我们最常用的组件之一,它是用来在UI界面上显示字符串。作为基本组件,有很多扩展,常见的有按钮组件Button、文本编辑组件TextFiled、计时器组件TickTimer,它们都是Text组件的扩展(也称为Text的子类)。

Text(文本组件)是Component类的子类之一,所以它能够使用Component类的所有公开的属性和方法(后面章节会详细介绍该类),Text类自身也提供了一些特殊的属性、方法、内部类和接口。

1、从源代码入手

阅读官方的Java API文档看结构不是很清晰,所以我们在DevEco中查看源代码。

  1. /** 
  2.  
  3. * 继承Component类 
  4.  
  5. */ 
  6.  
  7. public class Text extends Component {} 

 这里我们说一下如何查看类的继承关系,由于DevEco是基于开源的社区版,它是没有Diagrams功能的,我们可以使用第二种方法Navigate --> Type Hierarchy(或者F4)来查看关系图。

我们可以点击DevEco界面左侧选项卡Structure查看类中详细结构,我们可以看到Text自身提供了很多属性和方法,同时也继承父类的很多属性和方法。


  1. /** 
  2.  
  3. * 默认构造函数 
  4.  
  5. * 用于使用默认属性和样式创建文本实例 
  6.  
  7. * @param context 
  8.  
  9. */ 
  10.  
  11. public Text(Context context) {} 
  12.  
  13. /** 
  14.  
  15. * 提供了用于在XML解析后使用指定的属性集合和默认样式创建文本实例的构造函数 
  16.  
  17. * @param context 
  18.  
  19. * @param attrSet 
  20.  
  21. */ 
  22.  
  23. public Text(Context context, AttrSet attrSet) {} 
  24.  
  25. /** 
  26.  
  27. * 提供了用于在XML解析后使用指定的属性集和指定的样式创建文本实例的构造函数 
  28.  
  29. * @param context 
  30.  
  31. * @param attrSet 
  32.  
  33. * @param styleName 
  34.  
  35. */ 
  36.  
  37. public Text(Context context, AttrSet attrSet, String styleName) {} 

 我们在代码中要给布局添加组件时,需要先创建组件对象。使用磨人的构造函数创建Text对象,后面两种构造函数我们这里不做过多说明,这两种是用于自定义组件时使用的,后面自定义组件小节中会详细介绍,期待吧。

  1. //创建Text对象 
  2. Text text = new Text(this); 

我们可以在Structure中看到Text类有很多属性,比如设置文本内容的text属性、设置文本内容颜色的textColor属性、设置文本内容字体大小的textSize属性,及设置文本内容字体的font属性等。也有继承自父类的属性,比如设置文本宽度的width属性、设置文本高度的height属性等。

  1. //1. 创建Text对象 
  2.  
  3. Text text = new Text(this); 
  4.  
  5. //2. 设置文本内容宽高 
  6.  
  7. text.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT); 
  8.  
  9. text.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT); 
  10.  
  11. //3. 设置显示内容 
  12.  
  13. text.setText("我是在代码创建的Text。"); 
  14.  
  15. //4. 设置文字大小 
  16.  
  17. text.setTextSize(50, Text.TextSizeType.FP); 
  18.  
  19. //5. 设置文字颜色 
  20.  
  21. text.setTextColor(Color.BLUE); 
  22.  
  23. //6. 添加组件到布局中 
  24.  
  25. layout.addComponent(text); 

 我们可以启动一下我们的模拟器,查看是不是在界面中显示了我们设置的文本内容。

当然组件不仅仅是做显示使用的,我们还可以在组件上添加监听事件,来实现交互效果,比如我们点击界面中的文字内容,让它显示成其他的内容。

 

我们现在使用的是代码中构建UI界面,当然官方也给我们提供了在XML中声明布局,添加组件,在代码中设置界面入口只需要指定它在内存中的地址。如果我们要对组件进行监听,需要指定其在内存中的地址,然后创建对象完成监听操作。

在resources --> base目录下创建layout目录(目录下的文件就是布局资源),然后在该目录下创建布局资源文件(后缀为.xml),然后在XML中声明布局和组件。

  1. xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  2.  
  3. ohos:height="match_parent" 
  4.  
  5. ohos:width="match_parent" 
  6.  
  7. ohos:orientation="vertical"
  8.  
  9.  
  10. ohos:id="$+id:text_helloworld" 
  11.  
  12. ohos:height="match_parent" 
  13.  
  14. ohos:width="match_parent" 
  15.  
  16. ohos:layout_alignment="horizontal_center" 
  17.  
  18. ohos:text="我是在XML中声明的Text。" 
  19.  
  20. ohos:text_size="50" 
  21.  
  22. /> 

  1. //在AbilitySlice的onStart方法中设置界面入口,这里指定页面在内存中的地址 
  2.  
  3. super.setUIContent(ResourceTable.Layout_ability_text_xml); 

 

2、常用属性和方法

到这里我们已经对Text有了大致的了解,对两种编写布局的方式也有了大致的了解。Text有很多属性和方法,我们在这里给大家列出常用的几个属性和方法。

Text常用属性

Text常用方法

  1. ohos:id="$+id:text_helloworld" 
  2.  
  3. ohos:height="match_content" 
  4.  
  5. ohos:width="match_content" 
  6.  
  7. ohos:text="我是在XML中声明的Text。" 
  8.  
  9. ohos:text_size="50fp" 
  10.  
  11. /> 
  12.  
  13.  
  14. ohos:id="$+id:text_auto_font_size" 
  15.  
  16. ohos:height="match_content" 
  17.  
  18. ohos:width="match_content" 
  19.  
  20. ohos:text="T" 
  21.  
  22. ohos:text_size="50fp" 
  23.  
  24. ohos:auto_font_size="true"/> 
  25.  
  26.  
  27. ohos:height="match_content" 
  28.  
  29. ohos:width="match_content" 
  30.  
  31. ohos:text="Text Font" 
  32.  
  33. ohos:text_size="50fp" 
  34.  
  35. ohos:text_font="serif"/> 
  36.  
  37. //2. 自动调整字体大小 
  38.  
  39. Text text_auto_font_size = (Text) findComponentById(ResourceTable.Id_text_auto_font_size); 
  40.  
  41. text_auto_font_size.setClickedListener(l -> { 
  42.  
  43. text_auto_font_size.append("T"); 
  44.  
  45. }); 

声明:码字不易,转载请注明出处,系列图文仅供学习使用,不可用于商用。因转载作品引发的知识产权或其他法律纠纷的,转载人须自行承担一切后果,与本人无关!

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2020-12-09 11:53:24

鸿蒙开发HelloWord

2020-12-11 09:58:45

ShapeElemenXML自定义组件样式

2020-12-23 11:45:27

鸿蒙HarmonyOSTextField组件

2020-12-04 12:22:03

鸿蒙UI组件

2020-12-28 11:19:06

鸿蒙HarmonyOSPage Abilit

2020-12-28 10:15:18

鸿蒙HarmonyOSListContain

2020-12-17 12:06:49

鸿蒙应用鸿蒙开发

2020-12-23 11:36:23

鸿蒙HarmonyOS应用程序开发

2020-12-22 09:48:18

鸿蒙HarmonyOS应用程序

2020-12-22 11:09:20

鸿蒙Feature AbiAbilitySlic

2020-12-23 11:24:34

鸿蒙开发IDE安装

2012-01-17 13:16:34

JavaSwing

2020-12-29 09:59:01

鸿蒙HarmonyOS智能家居

2020-12-07 12:34:33

开发板鸿蒙hello world

2020-12-16 10:05:48

鸿蒙开发板Onenet平台

2021-08-11 09:32:12

鸿蒙HarmonyOS应用

2014-03-27 15:34:55

Android组件Activity

2022-03-17 16:04:16

Text文本组件Button组件Column

2020-12-28 11:30:07

鸿蒙HarmonyOS分布式

2020-12-18 11:05:25

鸿蒙HarmonyOS游戏
点赞
收藏

51CTO技术栈公众号