中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
微信扫码分享
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) } }