HarmonyOS 键盘弹起，UI被压缩

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

HarmonyOS

FengTianYa

2024-10-28 09:34:10

浏览

回答 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");  
        })

2024-10-28 16:34:46

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 键盘弹起，UI被压缩

订阅鸿蒙技术特刊，精选内容抢先看