HarmonyOS RichEditor怎么让高度跟随内容的高度变化？

Question

RichEditor怎么让自身高度跟随内容的高度变化, 现在有个场景是在输入框中输入文字, 输入一行的时候RichEditor的高度是初始高度30, 当输入内容变成两行时, RichEditor可以自动适配改变高度, 变成能展示两行文字, 当变成能展示5行后, 高度不再变化. 请问这种功能可以怎么实现?

Answer 1

参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5\#onareachange

RichEditor(){

}.constraintSize({
  maxHeight:100
})

// xxx.ets
@Entry
@Component
struct RichEditorExample {
  controller: RichEditorController = new RichEditorController()

  // 自定义键盘组件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.controller.addTextSpan(item + '', {
                offset: this.controller.getCaretOffset(),
                style:
                {
                  fontColor: Color.Orange,
                  fontSize: 30
                }
              })
              this.controller.setCaretOffset(this.controller.getCaretOffset() + item.toString().length)
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      RichEditor({ controller: this.controller })
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })
        .constraintSize({
          maxHeight:100,
          minWidth:30
        })
        .borderWidth(1)
        .borderColor(Color.Red)
        .width("30%")
    }
  }
}