鸿蒙开发基础 ——UI开发之 TextLayoutBuilder

📑往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

✒️ 鸿蒙（HarmonyOS）北向开发知识点记录~

✒️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✒️ 记录一场鸿蒙开发岗位面试经历~

✒️ 持续更新中……

---

项目简介

本库基于TextLayoutBuilder原库进行适配,使其可以运行在 OpenHarmony。TextLayoutBuilder是一个可定制任意样式的文本构建工具，包括字体间距、大小、颜色、布局方式、富文本高亮显示等，在文字显示的业务场景中都会使用到，特别是通知类特殊显示的字体样式时，TextLayoutBuilder极大的方便了开发者的开发效率。

效果演示

下载安装

ohpm install @ohos/textlayoutbuilder 

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

使用说明：

第一步： 初始化，导入 TextLayout 组件到自己项目中，实例化TextLayout.Layout对象；

...
import TextLayout from '@ohos/textlayoutbuilder';
import {TextInfo} from '@ohos/textlayoutbuilder';
...
@State layout:TextLayout.Layout = new TextLayout.Layout(); 
...

第二步：属性设置，通过layout类对象设置UI属性来自定义所需风格，也可以添加所需的回调；

private aboutToAppear() {

    let textInfo = new TextInfo();
    textInfo.setStart(2)
    textInfo.setEnd(8)
    textInfo.setFontColor('#ff0000')
    ... ...

    this.layout
    .setText(this.strTest)
    .setSpecialTextInfo(textInfo1)
    .setSpecialTextInfo(textInfo2)
    .setSpecialTextInfo(textInfo3)
    .setSpecialTextClick((textInfo) =>{
    console.info('点击了 = '+textInfo.getText())
    });
}

第三步：界面绘制，将定制好的layout传给TextLayout。

build() {
    Column() {
         Text("默认显示").fontSize(16).fontColor("#999999").margin({ left: 14, top: 14, bottom: 14 })
         Column() {
            TextLayout({ model: this.layout })
         }.backgroundColor("#cccccc").margin({ left: 14, right: 14 }).borderRadius(10)
    }.alignItems(HorizontalAlign.Start)
}

接口说明

let layout:TextLayout.Layout = new TextLayout.Layout();

1. 设置文字内容：layout.setText(text: string)

参数：

参数名	参数类型	必填	参数描述
text	string	是	文本内容

2. 设置指定文字内容样式：layout.setSpecialTextInfo(specialTextInfo: TextInfo)

参数：

参数名	参数类型	必填	参数描述
specialTextInfo	TextInfo	是	文本内容样式

3. 设置文字颜色：layout.setTextColor(textColor: string|Color|number)

参数：

参数名	参数类型	必填	参数描述
textColor	string	Color	number

4. 设置是否单行显示：layout.setSingleLine(singleLine: boolean)

参数：

参数名	参数类型	必填	参数描述
singleLine	boolean	是	是否单行显示，默认否

5. 设置最大行数：layout.setMaxLines(maxLines: number)

参数：

参数名	参数类型	必填	参数描述
maxLines	number	是	最大行数

6. 设置文本显示不下时的省略号替代方式：layout.setEllipsize(ellipsize: TextOverflow)

参数：

参数名	参数类型	必填	参数描述
ellipsize	TextOverflow	是	文本溢出显示方式

7. 设置文本对齐方式：layout.setAlignment(textalign: TextAlign)

参数：

参数名	参数类型	必填	参数描述
textalign	TextAlign	是	文本对齐方式

8. 设置每行最小显示字数：layout.setMinEms(minEms: number)

参数：

参数名	参数类型	必填	参数描述
minEms	number	是	每行显示字数

9. 设置组件是否设置内边距：layout.setIncludeFontPadding(shouldInclude: boolean)

参数：

参数名	参数类型	必填	参数描述
shouldInclude	boolean	是	是否设置padding，默认否

10. 设置最大宽度：layout.setMaxWidth(maxWidth: number)

参数：

参数名	参数类型	必填	参数描述
maxWidth	number	是	最大宽度

11. 设置是否开启按下文字时状态变化开关：layout.setIsEnablePressState(isEnablePressState: boolean)

参数：

参数名	参数类型	必填	参数描述
isEnablePressState	boolean	是	是否开启按下文字时状态变化开关，默认否

12. 设置按下文字状态样式：layout.setTextPressStateStyle(textPressStateStyle: string)

参数：

参数名	参数类型	必填	参数描述
textPressStateStyle	string	是	按下文字状态样式

13. 设置指定文本的点击事件：layout.setSpecialTextClick(clickCallback: (textInfo: TextInfo) => void)

参数：

参数名	参数类型	必填	参数描述
clickCallback	(textInfo: TextInfo) => void	是	用户自定义回调函数

特殊字符属性设置： let textInfo = new TextInfo();

1. 设置特殊文字开始位置：textInfo.setStart(start:number)

参数：

参数名	参数类型	必填	参数描述
start	number	是	特殊文字开始位置

2. 设置特殊文字结束位置：textInfo.setEnd(end:number)

参数：

参数名	参数类型	必填	参数描述
end	number	是	特殊文字结束位置

3. 设置文字颜色：textInfo.setFontColor(fontColor:string)

参数：

参数名	参数类型	必填	参数描述
fontColor	string	是	文字颜色

4. 设置文字内容：textInfo.setText(text:string)

参数：

参数名	参数类型	必填	参数描述
text	string	是	文本内容

5. 设置文字类型：textInfo.setTextType(textType:string)

参数：

参数名	参数类型	必填	参数描述
textType	string	是	文本类型（TEXT_TYPE_NORMAL

6. 设置文本字体之间的距离：textInfo.setFontLetterSpacing(fontLetterSpacing:string)

参数：

参数名	参数类型	必填	参数描述
fontLetterSpacing	string	是	文本字体之间的距离

7. 设置字体大小：textInfo.setFontSize(fontSize:string)

参数：

参数名	参数类型	必填	参数描述
fontSize	string	是	字体大小

8. 设置字体样式：textInfo.setFontStyle(fontStyle:string)

参数：

参数名	参数类型	必填	参数描述
fontStyle	string	是	字体样式