HarmonyOS的Search组件如何自定义键盘避让方式？

Question

HarmonyOS的Search组件如何自定义键盘避让方式

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

自定义键盘的避让功能。
开发者自己实现自定义键盘的避让功能
开发者需要监听自定义键盘根节点的onAreaChange生命周期，获取自定义键盘的高度，根据实际场景设置布局的避让。
监听自定义键盘布局的onAreaChange生命周期，通过newValue.height获取自定义键盘弹出时的高度，根据实际业务场景计算布局避让高度avoidHeight。

// entry/src/main/ets/view/CustomKeyboard.ets
@Component
export struct CustomKeyboard {
  // ...

  build() {
    Column() {
      // ...
    }
    .onAreaChange((oldValue: Area, newValue: Area) => {
      this.customKeyboardHeight = Number(newValue.height);
      let avoidHeight: number = (this.isCustomKeyboardAttach ? this.customKeyboardHeight : this.systemKeyboardHeight)
        - this.bottomRectHeight;
      this.keyBoardController.changeAvoidHeight(avoidHeight);
    })
    // ...
  }
}

通过emitter的方式，发送自定义键盘高度变化的通知。

// entry/src/main/ets/model/KeyboardController.ets
// 以公共事件的形式，通知布局高度变化
changeAvoidHeight(value: number) {
  let event: emitter.InnerEvent = {
    eventId: Constants.AVOID_EVENT_ID
  };
  let eventData: emitter.EventData = {
    data: {
      'avoidHeight': value
    }
  };
  emitter.emit(event, eventData);
}

接收到高度变化通知后，根据实际业务场景，设置页面的避让高度。

// entry/src/main/ets/pages/MainPage.ets
@Entry
@Component
struct MainPage {
  @State bottomPadding: number = Constants.MAIN_PAGE_INITIAL_PADDING;

  aboutToAppear(): void {
    let event: emitter.InnerEvent = {
      eventId: Constants.AVOID_EVENT_ID
    };
    emitter.on(event, (eventData: emitter.EventData) => {
      if (eventData.data) {
        let avoidHeight: number = eventData.data['avoidHeight'];
        if (avoidHeight === 0) {
          this.bottomPadding = Constants.MAIN_PAGE_INITIAL_PADDING;
        } else {
          this.bottomPadding = avoidHeight;
        }
      }
    });
  }

  build() {
    Navigation() {
      Column() {
        // ...
      }
      .padding({ bottom: this.bottomPadding })
      // ...
    }
    .mode(NavigationMode.Stack)
    .titleMode(NavigationTitleMode.Full)
    .title($r('app.string.main_page_title'))
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。