【代码案例】HarmonyOS鸿蒙NEXT组件随软键盘弹出避让案例

【代码案例】HarmonyOS鸿蒙NEXT组件随软键盘弹出避让案例 HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/keyboardavoid

本案例已上架 HarmonyOS NEXT 开源组件市场，如需获取或移植该案例，可安装此插件。开发者可使用插件获取鸿蒙组件，添加到业务代码中直接编译运行。

介绍

本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。

效果预览图

HarmonyOS Next应用开发案例（持续更新中……）

使用说明

  1. 进入案例时，TextInput获焦，弹出系统键盘，点击空白地方键盘收起；
  2. 点击输入框触发TextInput获焦，弹出系统键盘；
  3. 点击“弹出键盘”按钮触发TextInput获焦，弹出系统键盘；
  4. 在上抬避让模式下，键盘抬起时组件上抬，键盘收起后让组件恢复；在缩小避让模式下，键盘抬起时组件上抬并缩小，键盘收起后让组件恢复。

实现思路

场景一

通过设置defaultFocus属性为true，使TextInput自动获焦，完成进入案例自动拉起键盘。

场景二

TextInput组件拥有点击获焦能力，输入框使用TextInput组件即可实现点击输入框弹出系统键盘。

场景三

通过使用focusControl.requestFocus API实现textInput获焦拉起键盘。

场景四

通过设置setKeyboardAvoidMode API，将页面的避让模式设置为RESIZE模式，即可实现键盘拉起时组件上抬避让场景。

场景五

通过监听键盘高度，可以实时感知键盘拉起收起状态，实现缩放组件尺寸的调整，达到键盘拉起组件缩小效果，配合KeyboardAvoidMode.RESIZE避让模式，实现组件上抬缩小场景。

创建KeyboardDataSource类

用于KeyboardAvoid和LazyForEach加载数据。源码参考 BasicDataSource.ets

高性能知识点

本示例使用了 LazyForEach 进行数据懒加载，liftUpComponents布局时会根据可视区域按需创建liftUpContentComponent组件，并在liftUpContentComponent滑出可视区域外时销毁以降低内存占用。

工程结构&模块类型

keyboardavoid                            // har类型
|--pages
|   |--KeyboardAvoidIndex.ets           // 视图层-应用主页面 
|--basicDataResource                    
    |--BasicDataSource.ets              // 数据模型层-LazyForEach控制器

模块依赖

本实例依赖 动态路由模块 来实现页面的动态加载。

参考资料


更多关于【代码案例】HarmonyOS鸿蒙NEXT组件随软键盘弹出避让案例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙NEXT中，组件随软键盘弹出避让的实现主要依赖于WindowInsets和WindowInsetsAnimation。通过监听软键盘的弹出和收起事件，调整组件的布局位置，避免被软键盘遮挡。

首先，在布局文件中定义需要避让的组件，例如EditText和Button。然后，在Activity或Fragment中，使用View.setOnApplyWindowInsetsListener方法监听窗口插入事件。当软键盘弹出时，系统会触发onApplyWindowInsets回调，此时可以通过WindowInsetsCompat.getSystemWindowInsets方法获取软键盘的高度。

接下来，使用WindowInsetsAnimationCompat来处理软键盘的动画效果。通过实现WindowInsetsAnimationCompat.Callback接口，可以在软键盘弹出或收起的过程中，动态调整组件的位置。例如，可以使用View.setTranslationY方法将组件向上移动，避免被软键盘遮挡。

在onStart方法中，调用WindowInsetsControllerCompat.hide或WindowInsetsControllerCompat.show方法来控制软键盘的显示和隐藏。同时，确保在onStop方法中释放相关资源，防止内存泄漏。

通过以上步骤，可以实现组件随软键盘弹出避让的效果，提升用户体验。具体代码示例如下：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val editText = findViewById<EditText>(R.id.editText)
        val button = findViewById<Button>(R.id.button)

        ViewCompat.setOnApplyWindowInsetsListener(button) { view, insets ->
            val keyboardHeight = insets.systemWindowInsets.bottom
            view.translationY = -keyboardHeight.toFloat()
            insets
        }

        val windowInsetsController = ViewCompat.getWindowInsetsController(editText)
        windowInsetsController?.show(WindowInsetsCompat.Type.ime())
    }
}

此代码示例展示了如何在软键盘弹出时，将Button组件向上移动，避免被软键盘遮挡。

更多关于【代码案例】HarmonyOS鸿蒙NEXT组件随软键盘弹出避让案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙NEXT中，可以通过SoftKeyboardAdjust属性实现组件随软键盘弹出避让。以下是一个简单的代码示例：

import { Flex, TextInput, Button } from '@ohos/hap';

export default class KeyboardAvoidance extends Component {
  render() {
    return (
      <Flex direction="column" justifyContent="flex-end" style={{ height: '100%' }}>
        <TextInput placeholder="输入内容" style={{ width: '90%', marginBottom: 10 }} />
        <Button style={{ width: '90%', marginBottom: 10 }}>提交</Button>
      </Flex>
    );
  }
}

在这个示例中，Flex容器设置为direction: column和justifyContent: flex-end，使得输入框和按钮在软键盘弹出时自动上移，避免被遮挡。通过调整Flex布局，可以轻松实现组件避让效果。

回到顶部