HarmonyOS 键盘弹起,UI被压缩

需要实现的效果是键盘弹起时输入框在键盘上面,UI不往上顶又不压缩UI。


HarmonyOS
2024-10-28 09:34:10
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可参考:

import { KeyboardAvoidMode } from '@kit.ArkUI';  
  
@Entry  
@Component  
struct TextInputPage {  
  @State message: string = 'Hello World';  
  controller: TextInputController = new TextInputController();  
  
  aboutToAppear(): void {  
    // 设置为RESIZE模式  
    this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);  
  }  
  
  build() {  
    Column() {  
      // 模拟statusBar  
      Row() {  
        Stack().height("100%").width("100%").backgroundColor(Color.Red)  
      }  
      .height("126px")  
      .width("100%")  
      .backgroundColor(Color.Brown)  
      .expandSafeArea([SafeAreaType.KEYBOARD])  
  
      // 模拟导航栏  
      Row() {  
        Text(this.message)  
      }  
      .height("100")  
      .width("100%")  
      .backgroundColor(Color.Brown)  
      .expandSafeArea([SafeAreaType.KEYBOARD])  
  
      // 模拟RecycleLayout  
      WaterFlow() {  
        FlowItem() {  
          Text('1')  
            .fontSize(24)  
            .height("100")  
            .width("100%")  
        }  
  
        FlowItem() {  
          Text('2')  
            .fontSize(24)  
            .height("100")  
            .width("100%")  
        }  
  
        FlowItem() {  
          Text('3')  
            .fontSize(24)  
            .height("100")  
            .width("100%")  
        }  
  
        FlowItem() {  
          Text('4')  
            .fontSize(24)  
            .height("100")  
            .width("100%")  
        }  
  
        FlowItem() {  
          Text('5')  
            .fontSize(24)  
            .height("100")  
            .width("100%")  
        }  
  
        FlowItem() {  
          Text('7')  
            .fontSize(24)  
            .height("100")  
            .width("100%")  
        }  
  
        FlowItem() {  
          Text('最后一个item')  
            .fontSize(24)  
            .height("100")  
            .width("100%")  
        }  
      }  
      .height('60%')  
      .width('100%')  
      .backgroundColor('#F183F5')  
      .expandSafeArea([SafeAreaType.KEYBOARD])  
  
      // 模拟输入框  
      TextInput({ controller: this.controller })  
        .onFocus(() => {  
          console.log("---------onFocus");  
        })
分享
微博
QQ
微信
回复
2024-10-28 16:34:46
相关问题
HarmonyOS web弹起键盘问题
124浏览 • 1回复 待解决
HarmonyOS Toast弹出的时候键盘遮挡
356浏览 • 1回复 待解决
怎么监听键盘弹起和关闭事件?
2675浏览 • 1回复 待解决
JS UI 怎么判断键盘 是否拉起?
6371浏览 • 1回复 待解决
HarmonyOS视频压缩模块无法压缩视频
329浏览 • 1回复 待解决
H5页面输入框自动获焦弹起键盘
1620浏览 • 1回复 待解决
HarmonyOS gzip压缩和解压缩接口
421浏览 • 1回复 待解决
HarmonyOS next 压缩问题
348浏览 • 1回复 待解决