【OpenHarmony】 鸿蒙 UI开发之ohos-autofittextview

简介

自动调整文本大小以完全适合其边界的TextView。

效果展示

下载安装

ohpm install @ohos/autofittextview

使用说明

初始化

 @State content: string= ''
    @State textSize: number= 20
    @State maxLines: number= 2
    @State width: string= '100%'
    @State model: AutofitTextView.Model= new AutofitTextView.Model()

设置属性

    private aboutToAppear() {
      this.model.setWidth(this.width)
      this.model.setText(this.content)
      this.model.setMaxLines(2)
      this.model.setTextSize(10,TypedValue.COMPLEX_UNIT_PX)
      this.model.setMinTextSize(2)
      this.model.setMaxTextSize(40)
   }

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启动流程
14.鸿蒙版性能优化指南
.......

在build中使用

    build() {
      Column() {
        AutofitTextView({ model: this.model });
      }
      .alignItems(HorizontalAlign.Start)
      .padding(10)
      .width('100%')
      .height('100%')
    }

接口说明

@State model: AutofitTextView.Model= new AutofitTextView.Model()

1. 设置控件宽度 model.setWidth('100%')
2. 设置字体大小 model.setTextSize(10,TypedValue.COMPLEX_UNIT_PX)
3. 设置最大字体 model.setMaxTextSize(40)
4. 设置最小字体 model.setMinTextSize(2)
5. 设置最大显示行数 model.setMaxLines(2)
6. 设置文本内容 model.setText('test')
7. 设置背景颜色 model.setBackgroundColor(0XD1C9C9)
8. 设置滚动条大小 model.setTextOverflow(32)
9. 是否开启自适应大小 model.isSizeToFit()
10. 设置开启自适应大小 model.setSizeToFit(true)
11. 获取最大字体 model.getMaxTextSize()
12. 获取最小字体 model.getMinTextSize()
13. 设置正确文本大小的精度值 model.setPrecision(1)
14. 获取正确文本大小的精度值 model.getPrecision()

约束与限制

在下述版本验证通过：

• DDevEco Studio NEXT Developer Beta3: (5.0.3.530), SDK: API12 (5.0.0.35(SP3))

目录结构

|---- ohos-autofittextview
|     |---- entry  # 示例代码文件夹
|     |---- Autofittextview  # autofittextview库文件夹
                   |---- scr/main/ets/Autofittextview   # 自定义的Text控件
                   |---- scr/main/ets/TypedValue   # 字体大小单位枚举类
|           |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法