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.cnRow() {    ...}.width(\\\'100%\\\').height(80).padding(12)

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

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

左内边距

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

右内边距

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

下内边距

//code by 每日教程teachcourse.cnRow() {    ...}.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.cnText(this.des).fontColor(\\\'rgb(240,75,34)\\\').height(\\\'100%\\\')

引用类型

//code by每日教程teachcourse.cnText(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%\\\')