中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
HarmonyOS 弹窗跟软键盘间的间如何去除
微信扫码分享
import window from '@ohos.window' import { data } from '@kit.TelephonyKit' @Entry @Component export struct LightPublishMine { private window?: window.Window @State keyboardHeightVp: number = 0 @State navHeight: number = 0 @State safeAreaTop: number = 0 aboutToAppear() { window.getLastWindow(getContext(this)).then((win) => { this.window = win if (this.window) { this.navHeight = px2vp(this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)// 导航条高度 .bottomRect .height) this.safeAreaTop = px2vp(this.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height) this.window.on('keyboardHeightChange', (data) => { console.info('Succeeded in enabling the listener for keyboard height changes. 键盘 Data: ' + data); this.keyboardHeightVp = px2vp(data) console.info('Succeeded in enabling the listener for keyboard height changes. Data: ' + (this.keyboardHeightVp - this.navHeight)); console.info('Succeeded in enabling the listener for keyboard height changes. 导航条Data: ' + this.navHeight); }); } }) } aboutToDisappear() { if (this.window) { this.window.off('keyboardHeightChange') this.window = undefined } this.keyboardHeightVp = 0 } build() { Row() { Column() { TextInput() .backgroundColor(Color.White) Blank().backgroundColor(Color.Red).height(this.keyboardHeightVp - this.navHeight).width('100%') } .width('100%') } .height('100%') .backgroundColor(Color.Green) .alignItems(VerticalAlign.Bottom) .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM]) } } @Entry @Component struct BindSheetExample { @State isShow: boolean = false @State isShow2: boolean = false @State sheetHeight: number = 300; @State showDragBar: boolean = true; @Builder myBuilder(text: string) { Column() { Text('Custom dialog Message').fontSize(10) TextInput({ text: text, placeholder: 'input your word...' }) .placeholderColor(Color.Grey) .placeholderFont({ size: 14, weight: 400 }) .caretColor(Color.Blue) .width('95%') .height(40) .margin(20) .fontSize(14) .fontColor(Color.Black) .inputFilter('[a-z]', (e) => { console.log(JSON.stringify(e)) }) .onChange((value: string) => { text = value }) } } build() { Column() { Button("transition modal 1") .onClick(() => { this.isShow = true }) .fontSize(20) .margin(10) .bindSheet($$this.isShow, this.myBuilder(''), { height: this.sheetHeight, detents: [SheetSize.FIT_CONTENT, SheetSize.MEDIUM, SheetSize.LARGE], dragBar: this.showDragBar, backgroundColor: Color.Gray, onAppear: () => { console.log("BindSheet onAppear.") }, onDisappear: () => { console.log("BindSheet onDisappear.") } }) } .justifyContent(FlexAlign.Center) .width('100%') .height('100%') } }