HarmonyOS鸿蒙Next中浮层消失问题

您好：在TextArea中添加计数器，并且根据输入数字改变颜色，有以下三方方案可以实现：

1. 使用TextArea的组件showCounter。通过TextArea的maxLength来控制最大文本长度。通过showCounter的参数InputCounterOptions来控制计数器什么时候显示和输入字符数达到最大字符数时，边框和计数器下标将变为红色。示例代码如下：

@Entry
@Component
struct TextAreaExample {
  @State text: string = '';
  controller: TextAreaController = new TextAreaController();

  build() {
    Column() {
      TextArea({
        text: this.text,
        placeholder: '请输入...',
        controller: this.controller
      })
        .placeholderFont({ size: 16, weight: 400 })
        .width(336)
        .height(56)
        .margin(20)
        .fontSize(16)
        .fontColor('#182431')
        .backgroundColor('#FFFFFF')
        .maxLength(20)
        .showCounter(true, { thresholdPercentage: 50, highlightBorder: true })
        .onChange(value => {
          this.text = value;
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

1. 可以通过给组件设置浮层显示字符计数器来实现。示例代码如下：

@Entry
@Component
struct Index {
  @State inputValue: string = ''
  @State textAreaNum: number = 0
  maxLength: number = 20

  // 定义字符计数器的字体颜色，当输入字符数大于或者等于最大字符数时，字体颜色为红色
  @Builder
  OverlayNode() {
    Text(`${this.textAreaNum}/${this.maxLength}`)
      .fontSize(12).fontColor(this.textAreaNum === this.maxLength ? Color.Red : Color.Gray)
  }

  build() {
    Column() {
      TextArea({
        placeholder: '请输入',
        text: this.inputValue
      })
        .height(220)
        .borderRadius(3)
        .padding(12)
        .margin({ top: 24 })
        .textAlign(TextAlign.Start)
        .align(Alignment.TopStart)
        .maxLength(this.maxLength)
        .fontSize(14)
        .lineHeight(18)
        .onChange(value => {
          this.inputValue = value
          this.textAreaNum = value.length
        })
        .overlay(this.OverlayNode(), {
          align: Alignment.BottomEnd,
          offset: { x: -10, y: -15 }
        })
    }
  }
}

1. 使用Stack组件使Text覆盖在TextArea上实现，示例代码如下：

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  @State textAreaNum: number = 0
  @State maxLength: number = 20
  @State text: string = '';
  controller: TextAreaController = new TextAreaController();

  build() {
    Column() {
      // 使用Stack使Text覆盖在TextArea上
      Stack({ alignContent: Alignment.BottomEnd }) {
        TextArea({
          text: this.text,
          placeholder: '请输入',
          controller: this.controller
        })
          .height(100)
          .fontSize(16)
          .fontColor('#ff100f0f')
          .backgroundColor('#FFFFFF')
          .maxLength(this.maxLength)
          .onChange(value => {
            this.text = value;
            this.textAreaNum = value.length
          })
          .backgroundColor('#F1F3F5')

        // 自定义右下角的Text组件
        Text(`${this.textAreaNum}/${this.maxLength}`)
          .fontSize(12)
          .fontColor(this.textAreaNum === this.maxLength ? Color.Red : Color.Gray)
          .margin({ right: 20, bottom: 10 })
      }.width('100%')
      .height('auto')
    }.width('100%').height('100%').padding(20)

  }
}