HarmonyOS 鸿蒙Next关于底部自定义弹窗适配键盘安全区域的问题

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next关于底部自定义弹窗适配键盘安全区域的问题 我在demo中定义了一个底部的自定义弹窗,该弹窗有一个TextInput,我希望点击时弹出自定义键盘。

目前的效果是虽然可以避让,但是弹窗底部和键盘中间有一条空隙。我不想要这个空隙,有什么办法可以让弹窗和键盘看上去像是一体的样子吗。

另外我尝试了半模态转场的方式,具体实现可以见index.ets中被注释的代码。但是这样的方式,点击TextInput时不弹出自定义键盘,我不清楚具体的原因。

2 回复

在YSTestDialog页面的build()组件中的Column()组件下面加上修饰.offset({ x: 0, y: 20}) ,即可解决您的问题,修改之后YSTestDialog页面的完整代码如下,您直接替换即可:

import { WindowUtils } from "../util/WindowsUtil";
import { PromptActionClass } from "./PromptActionClass";
import { YSCustomKeyboard } from "./YSCustomKeyboard";

export class YSTestParams {
  text: string = "";
  onFocusCallBack: () => void = () => {};
  onBlurCallBack: () => void = () => {};

  constructor(text: string, onFocusCallBack: () => void, onBlurCallBack: () => void) {
    this.text = text;
    this.onFocusCallBack = onFocusCallBack;
    this.onBlurCallBack = onBlurCallBack;
  }
}

@Builder
export function YSTestDialogBuilder(param: YSTestParams) {
  YSTestDialog({ testParam: param });
}

@ComponentV2
export struct YSTestDialog {
  @Param testParam: YSTestParams = new YSTestParams("Hello YS!", () => {}, () => {});
  @Local priceInputValue: string = "";
  private inputController: TextInputController = new TextInputController();

  aboutToAppear() {}

  build() {
    Column() {
      TextInput({
        controller: this.inputController,
        placeholder: "点我弹出键盘",
        text: ""
      })
      .placeholderColor($r("app.color.color_9A9A9A"))
      .width($r('app.float.size_200'))
      .height($r('app.float.size_50'))
      .margin($r('app.float.size_35'))
      .borderRadius($r('app.float.size_2'))
      .textAlign(TextAlign.Center)
      .backgroundColor($r('app.color.color_FFFAF7'))
      .customKeyboard(this.customKeyboardBuilder(), { supportAvoidance: true })
      .selectionMenuHidden(true)
      .onFocus(() => {
        this.testParam.onFocusCallBack()
      })
      .onBlur(() => {
        this.testParam.onBlurCallBack()
      });
    }
    .border({ radius: { topLeft: $r('app.float.size_8'), topRight: $r('app.float.size_8') } })
    .width('100%')
    .height($r('app.float.size_200'))
    .padding({ bottom: WindowUtils.getNavigationIndicatorHeight() })
    .backgroundColor($r("app.color.color_FFFFFF"))
    .offset({ x: 0, y: 20 });
  }

  @Builder
  customKeyboardBuilder() {
    YSCustomKeyboard({
      handleInputValue: this.priceInputValue!!,
      inputController: this.inputController,
      defaultInputValue: "0"
    });
  }
}

更多关于HarmonyOS 鸿蒙Next关于底部自定义弹窗适配键盘安全区域的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


关于HarmonyOS 鸿蒙Next系统中底部自定义弹窗适配键盘安全区域的问题,可以通过以下方式进行处理:

HarmonyOS提供了丰富的UI框架和布局管理,以适应不同设备和场景的需求。针对底部自定义弹窗在键盘弹出时可能出现的遮挡问题,你需要确保弹窗的布局能够正确响应键盘的安全区域变化。

  1. 使用WindowInsets监听: 在鸿蒙系统中,你可以通过监听WindowInsets的变化来感知键盘的弹出和隐藏。当键盘弹出时,系统会发送包含键盘高度等信息的WindowInsets对象,你可以根据这些信息调整弹窗的布局。

  2. 布局调整: 确保你的弹窗布局使用了可调整的属性,如paddingmargin,以便在键盘弹出时能够自动调整位置,避免被键盘遮挡。

  3. 适配不同设备: 由于不同设备的屏幕尺寸和分辨率不同,你需要确保你的弹窗布局能够适应各种设备的键盘安全区域。

  4. 测试验证: 在多种设备和场景中测试你的弹窗布局,确保在各种情况下都能正确适配键盘的安全区域。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部