基于原生能力的键盘控制

数掉几只鱼

发布于 2024-5-13 15:27

浏览

0收藏

应用通常使用键盘的方式，系统键盘的弹出收起，获焦失焦，高度监听，安全避让等。

应用经常会遇到如下的业务诉求：

场景一：进入页面TextInput获焦，弹出系统键盘。

场景二：点击按钮或其他事件触发TextInput获焦，弹出系统键盘。

场景三：键盘弹出后只上抬特定的输入组件。

场景四：监听键盘高度，在键盘弹出后让组件上移，键盘收起后让组件恢复。

场景五：设置窗口在键盘抬起时的页面避让模式为上抬，压缩。

方案描述

场景一：

进入页面TextInput获焦，弹出系统键盘。

效果图

基于原生能力的键盘控制-鸿蒙开发者社区

方案

通过defaultFocus通用属性设置，实现第一次进入页面后弹出键盘。

核心代码

TextInput({ text: $$this.username, placeholder: "请输入用户名" }) 
  .placeholderColor("#D4D3D1") 
  .backgroundColor(this.isUserNameFocus ? "#80FFFFFF" : "#ffffff") 
  .width(260) 
  .borderRadius(8) 
  .id("username") 
  .margin({ top: 10, bottom: 10 }) 
  .onFocus(() => { 
    this.isUserNameFocus = true 
  }) 
  .onBlur(() => { 
    this.isUserNameFocus = false 
  }) 
  .defaultFocus(true)   // 进入页面默认获焦1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

场景二：

点击登录按钮触发密码输入TextInput获焦，弹出系统键盘。

效果图

基于原生能力的键盘控制-鸿蒙开发者社区

方案

通过focusControl.requestFocus，实现输入账号后，点击登录按钮后，代码主动设置TextInput获取焦点

核心代码

Button("登  录") 
  .width(200) 
  .height(45) 
  .fontSize(28) 
  .type(ButtonType.Normal) 
  .backgroundColor("#30FFFFFF") 
  .border({ width: 1, color: Color.White, radius: 8 }) 
  .margin({ top: 50, bottom: 60 }) 
  .onClick(() => { 
    let LoginForm: LoginForm = { 
      username: this.username, 
      password: this.password 
    } 
    let requestId = "" 
    // todo: 无法使用for..in遍历对象 
    if (!LoginForm.username) { 
      requestId = "username" 
    } else if (!LoginForm.password) { 
      requestId = "password" 
    } else { 
      promptAction.showToast({ message: 'Login success' }) 
      return 
    } 
    let res = focusControl.requestFocus(requestId) // 使选中的this.selectId的组件获焦 
    promptAction.showToast({ message: requestId + '不能为空' }) 
  })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

场景三：

键盘弹出后只上抬特定的输入组件。

效果图

基于原生能力的键盘控制-鸿蒙开发者社区

方案

通过expandSafeArea通用属性设置，实现只上抬红框圈住的特定组件

核心代码

.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) 1.

场景四：

监听键盘高度，在键盘弹出后让组件上移，键盘收起后让组件恢复，这种做法定制化程度更高，可以根据开发者需要自行控制页面避让的高度

效果图

基于原生能力的键盘控制-鸿蒙开发者社区

方案

先通过expandSafeArea禁止自动键盘弹出上移页面。然后通过window.on(‘avoidAreaChange’)和windowClass.on(‘keyboardHeightChange’)，实现监听键盘高度，上抬整个页面view，让输入框（生命周期价值输入框）组件能显示在键盘上方。

核心代码

onPageShow(): void { 
  // ... 
  window.getLastWindow(getContext(this)).then(currentWindow => { 
  let property = currentWindow.getWindowProperties(); 
  let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); 
  // 初始化显示区域高度 
  this.screenHeight = px2vp(property.windowRect.height - avoidArea.topRect.height - avoidArea.bottomRect.height); 
  // 监视软键盘的弹出和收起 
  currentWindow.on('avoidAreaChange', async data => { 
  if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) { 
  return; 
} 
this.screenHeight = px2vp(property.windowRect.height - avoidArea.topRect.height - data.area.bottomRect.height); 
}) 
}) 
// ... 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

场景五：

设置窗口在键盘抬起时的页面避让模式为上抬，压缩。

效果图

基于原生能力的键盘控制-鸿蒙开发者社区

方案

点击生命周期输入框，通过windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode，实现设置窗口在键盘抬起时的页面避让模式,这种情况下当键盘弹起的时候页面会自动压缩。

核心代码

onPageShow(): void { 
  // ... 
  this.windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE) 
  // ... 
} 
 
onPageHide(): void { 
  this.windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.

分类

其他

标签

键盘控制

监听

51CTO

51CTO博客

51CTO学堂

基于原生能力的键盘控制

方案描述

场景一：

效果图

方案

核心代码

场景二：

效果图

方案

核心代码

场景三：

效果图

方案

核心代码

场景四：

效果图

方案

核心代码

场景五：

效果图

方案

核心代码

目录

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