#鸿蒙通关秘籍#如何在鸿蒙应用中处理列表的滚动超出安全区？

为 List 组件配置 expandSafeArea 属性，使 ListItem 在滚动过程中能够延伸到导航条上方：

1. 确保应用的窗口整体底色一致：

bash import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility { onWindowStageCreate(windowStage: window.WindowStage): void { windowStage.loadContent('pages/Index', (err, data) => { if (err.code) { return; }

    windowStage.getMainWindowSync().setWindowBackgroundColor('#DCDCDC');
  });
}
1.
2.
3.

}

2. 配置列表代码展示：

bash @Entry @Component struct ListExample { private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

build() {
  Column() {
    List({ space: 20, initialIndex: 0 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text('' + item)
            .width('100%')
            .height(100)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(0xFFFFFF)
        }
      }, (item:number) => item.toString())
    }
    .listDirection(Axis.Vertical)
    .scrollBar(BarState.Off)
    .friction(0.6)
    .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
    .edgeEffect(EdgeEffect.Spring)
    .width('90%')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
  .width('100%')
  .height('100%')
  .padding({ top: 15 })
}
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.
27.

}