HarmonyOS 鸿蒙的列表组件，如何比较优雅实现沉浸式效果？

比如在一个二级页面，只有一个list组件，list组件的底部间距想要设置为0，在列表内容滚动的时候，内容是从底部的导航条下面出现的，但是当列表内容滚动完后，列表内容的要把底部导航条的区域空出来，防止列表内容被导航条遮挡。list有什么属性可以支持这样的效果吗，还是通过其他什么方式？

gougou168 1楼•5 个月前

1楼的答复是可以的，我来补充下获取底部导航条高度方法：

设置setWindowLayoutFullScreen(true)窗口全屏，然后在EntryAbility中获取并存储底部导航条高度：

onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, ‘testTag’, ‘%{public}s’, ‘Ability onWindowStageCreate’);
    windowStage.loadContent(‘pages/Index’, (err, data) => {
if (err.code) {
        hilog.error(0x0000, ‘testTag’, ‘Failed to load the content. Cause: %{public}s’, JSON.stringify(err) ?? ‘’);
        return;
      }
      hilog.info(0x0000, ‘testTag’, ‘Succeeded in loading the content. Data: %{public}s’, JSON.stringify(data) ?? ‘’);
      let windowClass = windowStage.getMainWindowSync()
      let bottomHeight = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height
      AppStorage.setOrCreate(‘bottomHeight’,px2vp(bottomHeight));
    });
  }

更多关于HarmonyOS 鸿蒙的列表组件，如何比较优雅实现沉浸式效果？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼•5 个月前

要实现描述的效果，即确保列表内容在滚动到底部时不会被底部导航条遮挡，可以考虑调整List组件的`space`属性。这个属性用于设置列表项之间的间距，包括列表与容器底部之间的间距。

在你描述的场景中，希望列表内容与底部导航条之间保持一定的空间，以避免内容被导航条遮挡。通过适当设置`space`属性来控制这个间距。例如，如果底部导航条的高度已知，可以将`space`属性设置为一个稍大于导航条高度的值，这样就可以确保列表内容在滚动到底部时，有足够的空间避开导航条。

具体的实现代码可能如下所示：

```ets

List() {

ForEach(this.arr, (item: string) => {

ListItem() {

Row() {

Text(item)

.fontColor(Color.Red)

.fontSize(40)

}

.width('100%')

.border({

width: 1,

color: Color.Black,

radius: 5

})

.space(bottomNavHeight + 10) // bottomNavHeight 为底部导航条的高度

}

```

在这个代码中，`.space(bottomNavHeight + 10)`确保了列表底部与导航条之间的间距，其中`10`可以根据实际情况调整，以达到最佳的视觉效果和用户体验。

通过这种方式，可以制列表内容与底部导航条之间的间距，避免列表内容被导航条遮挡的问题。

vueper 3楼•5 个月前

在HarmonyOS鸿蒙系统中，实现列表组件的沉浸式效果，可以遵循以下优雅的方法：

首先，考虑使用窗口全屏布局方案。通过调用setWindowLayoutFullScreen(true)接口，将窗口设置为全屏布局，这样列表组件可以延伸到状态栏和导航条区域，实现沉浸式效果。同时，需使用getWindowAvoidArea()接口获取状态栏和导航条的高度，以便对列表组件进行避让处理，防止关键信息被遮挡。

其次，可以采用组件安全区方案。通过设置组件的expandSafeArea属性，使列表组件的绘制区域扩展到安全区外，与状态栏和导航条的颜色相匹配，达到沉浸式的效果。但请注意，此方案下列表组件无法单独布局到状态栏和导航条区域。

最后，在布局时，需确保列表组件的滚动和交互体验不受影响。在滚动场景中，要对每一个嵌套的带有滚动的组件设置expandSafeArea属性，使其视窗范围扩展至导航条，同时保持内容的可读性和操作的流畅性。

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