鸿蒙开发:16-软键盘弹起顶起页面问题

软键盘弹起顶起页面问题

Stack布局中,当Stack宽高均设置为100%时,软键盘弹起会顶起页面(KeyboardAvoidMode值为OFFSET

如何定位键盘弹出后原UI布局错乱问题-ArkUI开发框架-开发-常见问题手册 - 华为HarmonyOS开发者

软键盘布局适配解决方案-输入法框架-应用框架 - 华为HarmonyOS开发者

1、组件设置expandSafeArea属性

如何实现弹窗和软键盘的避让-方舟UI框架(ArkUI)-UI框架-应用框架开发-开发 - 华为HarmonyOS开发者

键盘避让时固定背景图位置

组件设置expandSafeArea属性可以控制组件扩展其安全区域,实现键盘避让,键盘拉起时布局不发生改变。属性详细说明可参考以下链接。

css 复制代码
.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
Typescript 复制代码
@Entry 
@Component 
struct AvoidDialogPage { 
  @State message: string = '打开弹窗'; 
  dialogController: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample() 
  }) 
 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(() => { 
            this.dialogController.open(); 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
} 
 
@CustomDialog 
struct CustomDialogExample { 
  controller: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample({}) 
  }) 
 
  build() { 
    Column() { 
      TextInput({}) 
        .fontSize(20) 
        .margin({ top: 10, bottom: 10 }) 
        .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM]) 
        .borderWidth(0.5) 
        .borderRadius(4) 
        .height(40) 
        .defaultFocus(true) 
        .margin({ top: 30, left: 16, right: 16 }) 
    } 
  } 
}

2、设置键盘的KeyboardAvoidMode值为RESIZE

KeyboardAvoidMode.RESIZE模式下,expandSafeArea设置将不起作用。

安全区域-通用属性-组件通用信息-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者

1、可以使用三方库@pura/harmony-utils下的AppUtil.setKeyboardAvoidMode()方法

2、使用系统原生方法:

Typescript 复制代码
// EntryAbility.ets
import { KeyboardAvoidMode } from '@kit.ArkUI';

onWindowStageCreate(windowStage: window.WindowStage) {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/Index', (err, data) => {
    let keyboardAvoidMode = windowStage.getMainWindowSync().getUIContext().getKeyboardAvoidMode();
    // 设置虚拟键盘抬起时压缩页面大小为减去键盘的高度
  windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
  });
}
相关推荐
coder_pig20 分钟前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少26 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder28 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix39 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句39 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易40 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
simple丶40 分钟前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全