【OpenHarmony】 鸿蒙 UI开发之 TextLayoutBuilder

塞尔维亚大汉
184 阅读4分钟

项目简介

本库基于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)
}

DD一下： 鸿蒙开发各类文档，也可关注公众号<程序猿百晓生>获取。

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
.......

接口说明

let layout:TextLayout.Layout = new TextLayout.Layout();
  1. 设置文字内容：layout.setText(text: string)

参数：

参数名参数类型必填参数描述
textstring是文本内容
  1. 设置指定文字内容样式：layout.setSpecialTextInfo(specialTextInfo: TextInfo)

参数：

参数名参数类型必填参数描述
specialTextInfoTextInfo是文本内容样式
  1. 设置文字颜色：layout.setTextColor(textColor: string|Color|number)

参数：

参数名参数类型必填参数描述
textColorstringColornumber是文本颜色
  1. 设置是否单行显示：layout.setSingleLine(singleLine: boolean)

参数：

参数名参数类型必填参数描述
singleLineboolean是是否单行显示，默认否
  1. 设置最大行数：layout.setMaxLines(maxLines: number)

参数：

参数名参数类型必填参数描述
maxLinesnumber是最大行数
  1. 设置文本显示不下时的省略号替代方式：layout.setEllipsize(ellipsize: TextOverflow)

参数：

参数名参数类型必填参数描述
ellipsizeTextOverflow是文本溢出显示方式
  1. 设置文本对齐方式：layout.setAlignment(textalign: TextAlign)

参数：

参数名参数类型必填参数描述
textalignTextAlign是文本对齐方式
  1. 设置每行最小显示字数：layout.setMinEms(minEms: number)

参数：

参数名参数类型必填参数描述
minEmsnumber是每行显示字数
  1. 设置组件是否设置内边距：layout.setIncludeFontPadding(shouldInclude: boolean)

参数：

参数名参数类型必填参数描述
shouldIncludeboolean是是否设置padding，默认否
  1. 设置最大宽度：layout.setMaxWidth(maxWidth: number)

参数：

参数名参数类型必填参数描述
maxWidthnumber是最大宽度
  1. 设置是否开启按下文字时状态变化开关：layout.setIsEnablePressState(isEnablePressState: boolean)

参数：

参数名参数类型必填参数描述
isEnablePressStateboolean是是否开启按下文字时状态变化开关，默认否
  1. 设置按下文字状态样式：layout.setTextPressStateStyle(textPressStateStyle: string)

参数：

参数名参数类型必填参数描述
textPressStateStylestring是按下文字状态样式
  1. 设置指定文本的点击事件：layout.setSpecialTextClick(clickCallback: (textInfo: TextInfo) => void)

参数：

参数名参数类型必填参数描述
clickCallback(textInfo: TextInfo) => void是用户自定义回调函数
特殊字符属性设置： let textInfo = new TextInfo();
  1. 设置特殊文字开始位置：textInfo.setStart(start:number)

参数：

参数名参数类型必填参数描述
startnumber是特殊文字开始位置
  1. 设置特殊文字结束位置：textInfo.setEnd(end:number)

参数：

参数名参数类型必填参数描述
endnumber是特殊文字结束位置
  1. 设置文字颜色：textInfo.setFontColor(fontColor:string)

参数：

参数名参数类型必填参数描述
fontColorstring是文字颜色
  1. 设置文字内容：textInfo.setText(text:string)

参数：

参数名参数类型必填参数描述
textstring是文本内容
  1. 设置文字类型：textInfo.setTextType(textType:string)

参数：

参数名参数类型必填参数描述
textTypestring是文本类型（TEXT_TYPE_NORMALTEXT_TYPE_RICHTEXT_TYPE_HTTP）
  1. 设置文本字体之间的距离：textInfo.setFontLetterSpacing(fontLetterSpacing:string)

参数：

参数名参数类型必填参数描述
fontLetterSpacingstring是文本字体之间的距离
  1. 设置字体大小：textInfo.setFontSize(fontSize:string)

参数：

参数名参数类型必填参数描述
fontSizestring是字体大小
  1. 设置字体样式：textInfo.setFontStyle(fontStyle:string)

参数：

参数名参数类型必填参数描述
fontStylestring是字体样式
avatar
文章
阅读
粉丝