参考这个示例:
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: *** })
.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%')
}
}
6 天前