鸿蒙开发 —— UI开发之ohos-autofittextview

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

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

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

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

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

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

✒️ 持续更新中……

---

简介

自动调整文本大小以完全适合其边界的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)
   }

在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  # 安装使用方法