HarmonyOS 鸿蒙Next 关于List自动避让安全区

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

HarmonyOS 鸿蒙Next 关于List自动避让安全区

我使用List组件占满高度，发现滑动到底部时内容交互会被底部安全区影响，请问List组件是否像iOS的UITableView能支持内容自动避让安全区？

Harmonyos Next教程
2 回复

1、在onWindowStageCreate中进行沉浸式窗口配置,获取安全区高度

// 开启全屏沉浸式导航模式
const win = windowStage.getMainWindowSync()
win.setWindowLayoutFullScreen(true)
// 获取顶部规避区域，并记录到 AppStorage 中
const top = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
 .topRect
AppStorage.setOrCreate<number>('safeTop', px2vp(top.height))
// 获取底部规避区域，并记录到 AppStorage 中
const bottom = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
 .bottomRect
AppStorage.setOrCreate<number>('safeBottom', px2vp(bottom.height))

2、可以使用expandSafeArea属性，expandSafeArea属性设置后效果就是没滑倒底内容不避让，滑到底内容才避让，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5#expandsafearea

更多关于HarmonyOS 鸿蒙Next 关于List自动避让安全区的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，List组件自动避让安全区（如状态栏、导航栏等）的功能，主要依赖于系统的UI布局和组件的自适应机制。以下是如何实现List自动避让安全区的简要说明：

  1. 布局文件：确保List组件的父布局使用了可以自适应屏幕变化的布局类型，如DirectionalLayout或StackLayout，并设置合适的对齐和边距属性。

  2. 系统属性：利用系统提供的窗口属性，如windowInsets，来检测安全区的位置和大小。这些属性可以在组件的代码中动态获取，并据此调整List的显示区域。

  3. 自动避让：在List组件的代码中，通过监听系统UI变化的事件（如窗口大小变化、屏幕方向变化等），动态调整List的滚动区域或边距，确保内容不会被安全区遮挡。

  4. 适配策略：根据具体的应用场景，可能需要定制化的适配策略。例如，在List顶部添加空白区域以避让状态栏，或在底部添加空白以避免被导航栏遮挡。

通过上述方法，HarmonyOS鸿蒙Next系统中的List组件可以自动避让安全区，确保用户界面的友好性和可用性。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部