ArkTS-ArkUI组件-Text组件

一.官方文档

Text这是官方文档，写的非常清楚，可直接参考。

二 .基本语法

Text：显示一段文本的组件。

Text(content?: string | Resource)

content就是文本内容 ，默认为: ' '(空)。有两种指定方式：一.字符串  二.读取本地资源 

下面我们就来看看吧！！！

一.字符串

字符串方式就十分简单，直接在括号内添加想要输出的字符即可。

注意：不要忘记加 '  ' （英文状态下的分号）哦！

属性后面后讲哦！！！ 

 

二.读取本地资源

在介绍使用方法之前我们先来看两个目录：

resources——》base目录

resources——》en_US    // 默认存在的目录，设备语言环境是美式英文时，优先匹配此目录下资源

resources——》zh_CN// 默认存在的目录，设备语言环境是简体中文时，优先匹配此目录下资源

这些目录都是资源目录。其中 zh_CN和en_US又叫做限定词目录。

什么是限定词目录呢？就是存放设备信息的如：国家、语言、设备...

在读取本地资源之前，一定要先创建资源。

 我们分别打开en_US和zh_CN下的string.json,添加资源

注意：添加的变量名要确保一样

添加完中英文资源后发现任在报错，为什么呢？？？ 

因为限定词目录虽然写了但base目录没有写，当限定词目录都不匹配时就去走base目录。

所以我们任需要在base目录中添加资源 

在base目录下添加完资源后报错就消失啦！！！ 

接下来我们来介绍它的语法吧！ 

Text($r('app.string.变量名'))

 

上面说了有中文的语言环境和英文的语言环境，那如何进行选择呢？？？

在预览中点击“...”选择Language and region就可以进行选择啦

这样我们Text的两种使用方法就都掌握啦，接下来我们再来看几个它的常用属性吧！

三.属性

名称	参数类型	描述
fontColor	ResourceColor	设置文本颜色。
fontSize	Length | Resource	设置文本尺寸，Length为number类型时，使用fp单位。
fontStyle	FontStyle	设置文本的字体样式。默认值：FontStyle.Normal。
fontWeight	number | FontWeight | string	设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal。
fontFamily	string | Resource	设置文本的字体列表。使用多个字体，使用“，”进行分割，优先级按顺序生效。例如：“Arial，sans-serif”。

FontStyle：

.fontStyle(FontStyle.Italic)  注意：括号中的首字母大写

名称	描述
Normal	标准的字体样式。
Italic	斜体的字体样式。

fontWeight：

.fontWeight(FontWeight.Medium)

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

下面我们来看看效果吧：

 

是不是对齐首部不太好看，接下来我们在介绍一个设置文本对齐方式的属性吧！！！

textAlign—参数类型为TextAlign——》 .textAlign(TextAlign.Start)

Start（默认值）：水平对齐首部。

Center：水平居中对齐。

End：水平对齐尾部。

下面我们来试一下效果吧！

发现加了却没有发生任何改变，为什么呢？？？

文本的对齐方式都是相对于其宽度来说的，如果未修改其宽度，那默认便是文字的宽度，对于其文字的宽度来改变对齐方式无意义。

 设置其宽度，发现达到预期效果！

四.语录

奋斗如烛光，照亮前行的道路。 

 快去敲起来吧！！！

五.彩蛋（来自某位大牛）

做布局定位不能光看组件本身，还得看其父组件定位，组件的定位是相对于父组件，内容的定位是相对于组件，所以父组件、组件、内容都是关联的，独立思考位置就一头雾水。

1、根节点，如上面Column() 是没有父组件的，所以是以自身的.position属性在屏幕上定位，默认position是（0,0)坐标，即对齐屏幕左上角；加上没有指定宽高，则自动包裹子组件所需大小；

2、子组件也未指定宽高，即自动按内容所需大小，最后整个布局只占用了左上角显示所有文本足够用的空间，在仅有文本内容所需宽度的空间中，对齐本身没有意义了，只在组件左右有空间剩余，水平对齐才有意义，同样只有上下有空间剩余，竖直对齐才有意义。

因此，加个.width('100%') 就是给组件有明显的空间余量，对齐效果才能显现。 布局有困惑时，一个小技巧是给各组件从外向内加上.backgroundColor() 属性，看到各组件最后实际占用的屏幕范围后，就容易想到是哪里没有指定应有的属性造成与从预期不符；排查就容易多了。