harmony学习Text组件基本属性

需求

学习Text组件的用法，熟悉常用的属性，能够用来展示名称、字符串、描述性的文本。

常用属性

.width()

设置组件的宽度，支持百分比，如

Row()
.width('100%')

支持具体的数值（整数、浮点数）

Row()
.width(1080)

或

Row()
.width(1080.88)

支持引用类型

Row()
.width($r('app.float.px1080'))

.height()

设置组件的高度，同理支持百分比、数值（整数、浮点数、引用类型）

Row()
.width('100%')
.height(10%)

整数

Row()
.width('100%')
.height(80)

浮点数

Row()
.width('100%')
.height(80.88)

引用数值

Row()
.width('100%')
.height($r('app.float.px80'))

padding

设置组件的内边距，两种设置方式

第一种，一个数值，同时设置上下左右四条边的内边距，如下设置内边距为12

//code by 每日教程teachcourse.cn
Row() {
    ...
}.width('100%')
.height(80)
.padding(12)

第二种，指定具体边，比如：上内边距

//code by 每日教程teachcourse.cn
Row() {
    ...
}.width('100%')
.height(80)
.padding({top:12})

左内边距

//code by 每日教程teachcourse.cn
Row() {
    ...
}.width('100%')
.height(80)
.padding({left:12})

右内边距

//code by 每日教程teachcourse.cn
Row() {
    ...
}.width('100%')
.height(80)
.padding({right:12})

下内边距

//code by 每日教程teachcourse.cn
Row() {
    ...
}.width('100%')
.height(80)
.padding({bottom:12})

margin

设置组件的外边距，同理和padding一样，支持两种方式

第一种，一个数值同时设置上下左右四条边的外边距，如下:

Row() {
...
}.width('100%')
.height(80)
.margin(10)

第二种，指定具体的边，如下：

上边外边距

Row() {
...
}.width('100%')
.height(80)
.margin({top:10})

下边外边距

Row() {
...
}.width('100%')
.height(80)
.margin({bottom:10})

左边外边距

Row() {
...
}.width('100%')
.height(80)
.margin({left:10})

右边外边距

Row() {
...
}.width('100%')
.height(80)
.margin({right:10})

.fontSize()

设置字体大小，支持百分比、数值和引用类型

百分比设置字体

Text(this.des)
.fontSize('10%')
.height('100%')

整数设置字体

Text(this.des)
.fontSize(20)
.height('100%')

浮点型设置字体

Text(this.des)
.fontSize(20.88)
.height('100%')

引用类型设置字体

Text(this.des)
.fontSize($r('app.float.px28'))
.height('100%')

.fontColor()

设置字体颜色，支持四种类型：rgb或rgba格式、引用类型、十六进制颜色值和Color枚举

rgb格式：rgb(249,244,220)

//code by每日教程teachcourse.cn
Text(this.des)
.fontColor('rgb(240,75,34)')
.height('100%')

引用类型

//code by每日教程teachcourse.cn
Text(this.des)
.fontColor($r('app.color.bg_green_btn'))
.height('100%')

十六进制颜色值

Text(this.des)
.fontColor('#f04b22')
.height('100%')

Color枚举，引用系统内置的颜色枚举

Text(this.des)
.fontColor(Color.Blue)
.height('100%')

可用的Color枚举，包括：
- Color.Black
- Color.Blue
- Color.White
- Color.Yellow
- Color.Red
- Color.Gray
- Color.Green
- Color.Orange

.textAlign()

设置文本对齐方式，可选值TextAlign枚举：
TextAlign.Start、TextAlign.Center、TextAlign.End

当前属性生效的前提是Text()组件宽度需要是具体值

设置文本内容左边对齐

Text(this.des)
.textAlign(TextAlign.Start)
.width('20%')
.height('100%')

设置文本内容居中对齐

Text(this.des)
.textAlign(TextAlign.Center)
.width('20%')
.height('100%')

设置文本内容右边对齐

Text(this.des)
.textAlign(TextAlign.End)
.width('20%')
.height('100%')