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属性调整文字字体大小和粗细