horizontalalign

本节解释了Text和Span的基本用法，以及第一个声明性语法@Extend decorator，通过它可以重构示例代码。

由于本节展示的组件有很多效果，无法在一个屏幕中显示，我们可以更改默认Hello World页面的布局，使用Scroll layout组件来支持垂直滚动，改造后的代码如下:

/** * 3.1文本组件和Span组件*/@ entry @ component struct index { build(){ stack({ align content:alignment . topstart }){ scroll(){ column({ space:16 }){ Text(& # 39；你好世界& # 39；) .fontSize(50)。fontWeight(FontWeight。粗体)}。填充({ left:$ r(& # 39；app . float . space left & # 39；)，对:$ r(& # 39；app . float . space right & # 39；)}).alignItems(HorizontalAlign。开始)} }。宽度(& # 39；100%').身高(& # 39；100%').background color($ r(& # 34；app . color . app BG & # 34；)).填充({ top:$ r(& # 39；app . float . space top & # 39；)，底部:$ r(& # 39；app . float . space bottom & # 39；)} } } 3 . 1 . 1文本组件文本:用于呈现一条信息。可以包含Span子组件。

1.接口:Text(content?: string)

示例代码:

文本(& # 39；鸿蒙系统发展ArkUI的最佳实践& # 39；)//界面:文本(内容？:字符串)。font color($ r(& # 34；app . color . fg level 1 & # 34；))//文本颜色。fontSize($ r(& # 34；app . float . font size body 1 & # 34；))//字体大小。font weight(Number($ r(& # 34；app . float . font weight body 1 & # 34；)))//字重。border({ width: 1，color:$ r(& # 34；app . color . fg level 1 & # 34；)})//边框设置(可选)。padding(10) // Inner margin(可选)具有以下效果:

2.文本对齐方式：.textAlign(TextAlign)

设置多行文本的文本对齐方式，通常与设置文本的宽度属性结合使用。示例代码:

/** * .textAlign(TextAlign)默认为Start，用于设置多行文本的文本对齐方式。*文本对齐。居中文本居中。*文本对齐。根据书写的内容，Start向同一方向对齐。*文本对齐。根据笔迹，末端向相反的方向对齐。*/Text(& # 39；1.文本对齐& # 39；) .font color($ r(& # 34；app . color . fg level 1 & # 34；)) .fontSize($ r(& # 34；app . float . font size h8 & # 34；)) .font weight(Number($ r(& # 34；app . float . font weight h8 & # 34；)))文本(& # 39；根据相同的书写方向排列:鸿蒙系统发展ArkUI的最佳实践。') .宽度(& # 39；100%')//文本宽度。Textalign (textalign。start) //文本对齐。font color($ r(& # 34；app . color . fg level 1 & # 34；)) .fontSize($ r(& # 34；app . float . font size body 1 & # 34；)) .font weight(Number($ r(& # 34；app . float . font weight body 1 & # 34；))) .border({ width: 1，color:$ r(& # 34；app . color . fg level 1 & # 34；) }) .填充(10)文本(& # 39；文本居中:鸿蒙系统开发ArkUI的最佳实践，基于鸿蒙系统3.0，使用Ark开发框架eTS语言。') .宽度(& # 39；100%')//文本宽度。Textalign (textalign。居中)//文本对齐。font color($ r(& # 34；app . color . fg level 1 & # 34；)) .fontSize($ r(& # 34；app . float . font size body 1 & # 34；)) .font weight(Number($ r(& # 34；app . float . font weight body 1 & # 34；))) .border({ width: 1，color:$ r(& # 34；app . color . fg level 1 & # 34；) }) .填充(10)文本(& # 39；按照相反的书写方向排列:鸿蒙系统发展ArkUI的最佳实践。') .宽度(& # 39；100%')//文本宽度。Textalign (textalign。end) //文本对齐。font color($ r(& # 34；app . color . fg level 1 & # 34；)) .fontSize($ r(& # 34；app . float . font size body 1 & # 34；)) .font weight(Number($ r(& # 34；app . float . font weight body 1 & # 34；))) .border({ width: 1，color:$ r(& # 34；app . color . fg level 1 & # 34；) }) .衬垫(10)具有以下效果:

3.太多重复代码，我受不了了！

上面的演示代码中使用了两种字体大小，一种是标题，另一种是正文。每个文本组件都必须设置其样式属性。重复代码太多，后面还有很多演示代码。我不能忍受这样写作。是时候重构上面的代码了！

这里先解释第一个声明性语法@Extend decorator，通过它来重构示例代码。更多的声明性语法在第8章，基于TS扩展的声明性开发规范中解释。

@Extend decorator为内置组件添加了新的属性函数，比如文本、列、按钮等。您可以通过@Extend decorator快速定义和重用组件的定制样式。这里我们定义了两个@ Extend decorators，用来快速定义标题和正文的样式。标题文本样式装饰器编写如下:

//标题文本style @ extend(text)function titl 1(){。font color($ r(& # 34；app . color . fg level 1 & # 34；)) .fontSize($ r(& # 34；app . float . font size h8 & # 34；)) .font weight(Number($ r(& # 34；app . float . font weight h8 & # 34；))}注意:@Extend decorator的注释只能使用单行注释。如果使用多行注释，编译会异常，下面的代码会有问题:

/* * *标题文本样式*多行注释会导致编译异常。这个应该是Bug，我已经提交到华为社区论坛了。*/@Extend(Text)函数title1() {。font color($ r(& # 34；app . color . fg level 1 & # 34；)) .fontSize($ r(& # 34；app . float . font size h8 & # 34；)) .font weight(Number($ r(& # 34；app . float . font weight h8 & # 34；))}重构后的代码如下:

//body Text style//@ Extend decorator为内置组件增加新的属性函数，比如Text、Column、Button等。//可以通过@Extend decorator快速定义和重用组件的自定义样式。@Extend(Text)函数体(){。font color($ r(& # 34；app . color . fg level 1 & # 34；))//文本颜色。fontSize($ r(& # 34；app . float . font size body 1 & # 34；))//字体大小。font weight(Number($ r(& # 34；app . float . font weight body 1 & # 34；)))//字重。border({ width: 1，color:$ r(& # 34；app . color . fg level 1 & # 34；) }) .padding(10)}//标题文本样式@ extend (text)函数title () {。font color($ r(& # 34；app . color . fg level 1 & # 34；)) .fontSize($ r(& # 34；app . float . font size h8 & # 34；)) .font weight(Number($ r(& # 34；app . float . font weight h8 & # 34；)))}/* * 3.1文本组件和Span组件*/@ entry @ component struct index { build(){ stack({ align content:alignment . topstart }){ scroll(){ column({ space:16 }){/* *文本组件(text):用于呈现段落。可以包含Span子组件。*界面:文字(内容？:string) * content:字符串文本内容，包含子组件Span时无效，显示Span内容。*/Text(& # 39；鸿蒙系统发展ArkUI的最佳实践& # 39；)//界面:文本(内容？:字符串)。body ()/* *。textalign (textalign)默认为Start，用于设置多行文字的文字对齐方式。*文本对齐。居中文本居中。*文本对齐。根据书写的内容，Start向同一方向对齐。*文本对齐。根据笔迹，末端向相反的方向对齐。*/Text(& # 39；1.文本对齐& # 39；) .标题()文本(& # 39；根据相同的书写方向排列:鸿蒙系统发展ArkUI的最佳实践。') .宽度(& # 39；100%')//文本宽度。Textalign (textalign。start) //文本对齐。body()文本(& # 39；文本居中:鸿蒙系统开发ArkUI的最佳实践，基于鸿蒙系统3.0，使用Ark开发框架eTS语言。') .宽度(& # 39；100%')//文本宽度。Textalign (textalign。居中)//文本对齐。body()文本(& # 39；按照相反的书写方向排列:鸿蒙系统发展ArkUI的最佳实践。') .宽度(& # 39；100%')//文本宽度。Textalign (textalign。end) //文本对齐。body() }。填充({ left:$ r(& # 39；app . float . space left & # 39；)，对:$ r(& # 39；app . float . space right & # 39；)}).alignItems(HorizontalAlign。开始)} }。宽度(& # 39；100%').身高(& # 39；100%').background color($ r(& # 34；app . color . app BG & # 34；)).填充({ top:$ r(& # 39；app . float . space top & # 39；)，底部:$ r(& # 39；app . float . space bottom & # 39；)}}}嗯，代码干净多了。但是，不要太激动。@Extend装饰器有一些缺点:

只能在定义装饰器的页面中使用，不能通过导出与其他页面共享。同时，如果在其他页面上定义了一个同名的装饰器，例如，另一个页面也定义了一个名为& # 34；标题& # 34；或者& # 34；正文& # 34；装饰器将编译异常并提示重复的定义。

我将在下一节演示一个更好的解决方案。

4.设置文本的文本行高：.lineHeight(Length)

注意:当文本行高设置值不大于0时，文本行高不受限制，字体大小自适应。当长度为数字类型时，单位为fp。

示例代码:

/** * .lineHeight(Length)设置文本的文本行高。*当设置值不大于0时，文本行高不受限制，字体大小自适应。*长度为数字类型时，单位为fp。*/Text(& # 39；2.设置文本的文本行高& # 39；).标题()文本(& # 39；在鸿蒙系统开发ArkUI的最佳实践是基于鸿蒙系统3.0，采用Ark开发框架eTS语言。').lineHeight(30) //行高大于字体大小。body()文本(& # 39；在鸿蒙系统开发ArkUI的最佳实践是基于鸿蒙系统3.0，采用Ark开发框架eTS语言。').lineHeight(10) //行高小于字号，但大于0，文字会重叠。body()文本(& # 39；在鸿蒙系统开发ArkUI的最佳实践是基于鸿蒙系统3.0，采用Ark开发框架eTS语言。').lineHeight(0) //行高小于等于0，文本的行高不受限制，字体大小自适应。。body()具有以下效果:

5.设置文本的最大行数和文本超长时的显示方式：.maxLines(number)，.textOverflow:({overflow: TextOverflow})

当文本过长时，设置文本的最大行数通常与显示模式结合使用。在限制了最大显示行数之后，额外的内容可以通过。textOverflow属性。

示例代码:

/** * .maxLines(number)默认为无穷大，它设置文本的最大行数。* *.text overflow:({ overflow:text overflow })设置文本过长时的显示模式。*默认值{overflow: textoverflow.clip} *当textoverflow.clip的文本过长时，将被裁剪并显示。*文本溢出。省略号当文本太长时，无法显示的文本由省略号代替。*文本溢出。当文本太长时，无将不会被裁剪。*/Text(& # 39；3.设置行数和文本数过长时的显示模式& # 39；).标题()文本(& # 39；文本过长时剪切显示:鸿蒙系统开发ArkUI的最佳实践，基于鸿蒙系统3.0，采用方舟开发框架eTS语言。').maxLines(2) //最多显示2行。text overflow({ overflow:text overflow。clip })//当文本过长时，将被裁剪并显示。body()文本(& # 39；当文本过长时，无法显示的文本用省略号代替:鸿蒙系统开发ArkUI的最佳实践是基于鸿蒙系统3.0，采用ark开发框架eTS语言。').maxlines (2)。text overflow({ overflow:text overflow。省略号})//文本过长时，无法显示的文本用省略号代替。body()文本(& # 39；不要删减太长的文本:在鸿蒙系统开发ArkUI的最佳实践，基于鸿蒙系统3.0，采用ark开发框架eTS语言。').maxlines (2)。text overflow({ overflow:text overflow。none })//如果文本太长，将不会被裁剪。body()的效果如下:

6.设置文本基线的偏移量：.baselineOffset(Length)

示例代码:

/** * .基线偏移量(长度)设置文本基线的偏移量。*/Text(& # 39；4.设置文本基线的偏移量& # 39；).标题()文本(& # 39；文本基线的偏移量是10 & # 39；).baselineOffset(10) //文本基线的偏移量为正。body()文本(& # 39；文本基线的偏移量30 & # 39；).baselineOffset(30) //一个更大的偏移量。body()文本(& # 39；文本基线的偏移量-10 & # 39；).baselineOffset(-10) //文本基线的偏移量为负。body()的效果如下:

7.设置文本装饰线样式及其颜色：.decoration:({type: TextDecorationType,color?: Color})

默认值{type: textdecorationtype.none，color: color.black}，即默认不使用文本装饰线，如果使用装饰线，默认颜色为黑色。考虑到“亮模式/暗模式”的适配，当然不能使用这个默认颜色，我们可以使用资源中的颜色。示例代码:

/* * *设置文本装饰线的样式和颜色*。decotion:({ type:text decoration type，color？:Color}) *默认值{type: textdecorationtype.none，Color:Color . black } * text decoration type . underline文本下划线修饰。* textdecorationtype。linethrough穿过文本的装饰线。* TextDecorationType。上划线文本用线条修饰。* TextDecorationType。无不使用文本装饰线。*/Text(& # 39；5.设置文本装饰线条的样式& # 39；).标题()文本(& # 39；文本下划线装饰& # 39；) .装饰({ type: TextDecorationType。下划线，颜色:$ r(& # 34；app . color . fg level 1 & # 34；) }) .body()文本(& # 39；穿过文字的装饰线条& # 39；) .装饰({ type: TextDecorationType。LineThrough，color:$ r(& # 34；app . color . danger & # 34；) }) .body()文本(& # 39；下划线和修饰文字& # 39；) .装饰({ type: TextDecorationType。上划线，color:$ r(& # 34；app . color . fg level 1 & # 34；) }) .body()文本(& # 39；不要使用文本装饰线& # 39；) .装饰({ type: TextDecorationType。无，颜色:$ r(& # 34；app . color . fg level 1 & # 34；) }) .body()具有以下效果:

8.设置文本大小写：.textCase(TextCase)

对于英文文本，您可以将设置为保持文本的原始大小写，全部使用小写文本和全部使用大写文本。

示例代码:

/** * .textCase(TextCase)默认为Normal，设置文本的大小写。*文本案例。Normal保持文本的原始大小写。*文本案例。小写文本全部小写。*文本案例。大写文本全部大写。*/Text(& # 39；6.设置文本大小写& # 39；).标题()文本(& # 39；eTS的鸿蒙系统·阿奎。').textCase(文本案例。Normal) //保持文本的原大小写。body()文本(& # 39；eTS的鸿蒙系统·阿奎。').textCase(文本案例。小写)//文本全部小写。body()文本(& # 39；eTS的鸿蒙系统·阿奎。').textCase(文本案例。大写)//文本全部大写。body()具有以下效果:

至此，文本组件Text的接口和属性已经演示完毕。

【源地址:https://gitee.com/cloudev/harmony OS 3/tree/master/3.0/base component】

3.1.2 Span组件