# TextLayoutBuilder-ETS

**Repository Path**: wangyingjun01/TextLayoutBuilder-ETS

## Basic Information

- **Project Name**: TextLayoutBuilder-ETS
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 26
- **Created**: 2022-04-18
- **Last Updated**: 2022-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TextLayoutBuilder

## 项目简介

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

## 效果演示
![gif](preview.gif)

## 下载安装

1. 参考安装教程 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md)
2. 安装命令如下：
 ```
 npm install @ohos/textlayoutbuilder --save
 ```

## 使用说明：

第一步： 初始化,导入 TextLayout 组件到自己项目中,实例化TextLayout.Layout对象；
```typescript
...
import TextLayout from '../common/TextLayout.ets';
import {TextInfo} from '../common/TextInfo.ets';
@State layout:TextLayout.Layout = new TextLayout.Layout(); 
...

```
第二步：属性设置，通过layout类对象设置UI属性来自定义所需风格，也可以添加所需的回调
```typescript
private aboutToAppear() {
    this.layout
    .setText(this.strTest)
    .setSpecialTextInfo(textInfo1)
    .setSpecialTextInfo(textInfo2)
    .setSpecialTextInfo(textInfo3)
    .setSpecialTextClick((textInfo) =>{
    console.info('我点击了 = '+textInfo.getText())
    });
}
```
第三步：界面绘制，将定制好的layout传给TextLayout
```typescript
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()
2. 设置指定文字内容样式：layout.setSpecialTextInfo()
3. 设置文字颜色：layout.setTextColor()
4. 设置是否单行显示：layout.setSingleLine()
5. 设置最大行数：layout.setMaxLines()
6. 设置显示不下省略号代替：layout.setEllipsize()
7. 设置对齐方式：layout.setAlignment()
8. 设置每行最小显示字数：layout.setMinEms()
9. 设置是否内边距：layout.setIncludeFontPadding()
10. 设置最大宽度：layout.setMaxWidth()
11. 设置是否开启按下文字时状态变化开关：layout.setIsEnablePressState()
12. 设置按下文字状态样式：layout.setTextPressStateStyle()
13. 设置指定文本的点击事件：layout.setSpecialTextClick()


## 兼容性

支持OpenHarmony  API version 8 及以上版本

## 目录结构

```
|---- TextLayoutBuilder  
|     |---- entry  # 示例代码文件夹
|     |---- TextLayoutBuilder  # TextLayout库文件夹
|          |---- src
|            |---- main
|              |---- ets
|                  |---- commonents
|                    |---- common
|                       |---- TextInfo.ets  # 富文本数据实体
|                       |---- TextLayout.ets  # UI 自定义组件
|           |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法
```

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/TextLayoutBuilder-ETS/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/TextLayoutBuilder-ETS/pulls) 。

## 开源协议
本项目基于 [Apache License 2.0](https://gitee.com/hihopeorg/TextLayoutBuilder-ETS/blob/master/LICENSE) ，请自由地享受和参与开源。