HarmonyOS TextInput/TextArea如何设置键盘上方的自定义视图?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect
import { window } from '@kit.ArkUI';
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct Index {
  @State message: string = '图文信息区域\n\n图文信息区域\n\n图文信息区域'; // 第一层文本区
  @State isVisible: Visibility = Visibility.Hidden;
  @State keyboardHeight: string = '0px'; // 直接监听即可,不用预先设置

  controller: RichEditorController = new RichEditorController();

  aboutToAppear(): void {
    window.getLastWindow(getContext(this)).then((win) => {
      win.on("keyboardHeightChange", (height) => {
        console.log('height' + height.toString())
        if (height) {
          this.keyboardHeight = height.toString() + 'px';
          this.isVisible = Visibility.Visible;
        } else {
          this.isVisible = Visibility.Hidden;
        }
      })
    })
  }

  build() {
    Stack({ alignContent: Alignment.Bottom}) {
      Column() {
        Text(this.message)
          .fontSize(52)
          .height('90%')
          .width('100%')
          .textAlign(TextAlign.Center)
          .fontColor(Color.Black)
        Row() {
          Image($r('app.media.comment'))
            .width('50%')
            .margin(15)
            .onClick(() => {
              this.isVisible = Visibility.Visible;
              setTimeout(() => {
                focusControl.requestFocus('textArea');
              }, 10)
            })

          Image($r('app.media.like'))
            .width('12%')
            .margin(10)
          Image($r('app.media.collect'))
            .width('15%')
            .margin(10)
        }
        .height('10%')
        .width('100%')
      }
      .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])

      // 遮罩
      Column()
        .width('100%')
        .height('100%')
        .opacity(0.5)
        .height('100%')
        .backgroundColor('rgba(0,0,0,0.5)')
        .onClick(() => {
          this.isVisible = Visibility.Hidden;
        })
        .visibility(this.isVisible)
        .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM, SafeAreaEdge.TOP])

      CommentComponent({isVisible: this.isVisible, keyboardHeight: this.keyboardHeight})
    }
  }

  aboutToDisappear(): void {
    this.isVisible = Visibility.Hidden;
  }
}

@Component
struct CommentComponent {
  controller: RichEditorController = new RichEditorController();
  @Link isVisible: Visibility;
  @Link keyboardHeight: string;

  build() {
    // 评论区自定义组件
    Flex({ direction: FlexDirection.ColumnReverse, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Stretch }) {

      Row() {
        RichEditor({ controller: this.controller })
          .id('textArea')
          .placeholder('喜欢就评论一下吧~', {
            fontColor: Color.Gray,
            font: {
              size: 16,
              weight: FontWeight.Normal
            }
          })
          .width('65%')

        Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End, alignItems: ItemAlign.Stretch}) {
          Image($r('app.media.at')).height(20)
            .constraintSize({ minWidth: 20, maxWidth: 20})

          Image( $r('app.media.emoji')).height(20)
            .constraintSize({ minWidth: 20, maxWidth: 20})

          Image($r('app.media.cameraPicker'))
            .constraintSize({ minWidth: 20, maxWidth: 20})
            .height(20)
        }
        .width(120)
      }
      .margin({
        top: 10,
        bottom: this.keyboardHeight,
        left: 10,
        right: 10
      })
      .border({ width: 1})
      .borderRadius(20)
    }
    .width('100%')
    .height(380)
    .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM, SafeAreaEdge.TOP])
    .backgroundColor(Color.White)
    .visibility(this.isVisible)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS TextInput自定义键盘
466浏览 • 1回复 待解决
HarmonyOS TextInput自定义键盘问题
644浏览 • 1回复 待解决
HarmonyOS TextInput绑定自定义键盘问题
588浏览 • 1回复 待解决
基于自定义键盘设置光标位置
504浏览 • 1回复 待解决
HarmonyOS 自定义键盘
289浏览 • 1回复 待解决
HarmonyOS 数字自定义键盘如何实现
354浏览 • 1回复 待解决
TextInput ,TextArea无法设置字体间距
366浏览 • 1回复 待解决