HarmonyOS 导航条适配沉浸式适配在NestedScroll场景下失效

@Entry  
@Component  
struct NestedScrollPage {  
  @State message: string = 'Hello World';  
  
  build() {  
    List(){  
      ListItem() {  
        Text("标题").height(100).width('100%').backgroundColor(Color.Red)  
      }  
  
      ListItem() {  
        Tabs({  
        }) {  
          TabContent() {  
            AlbumTracksPage()  
          }  
  
          TabContent() {  
            AlbumTracksPage()  
          }  
        }  
        .height('100%').width('100%').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
      }  
  
    }  
    .height('100%')  
    .width('100%')  
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
  }  
}  
  
  
@Component  
struct AlbumTracksPage {  
  
  @State mTracks: number[] = new Array<number>();  
  
  aboutToAppear(): void {  
    for (let i = 0; i < 1000; i++) {  
      this.mTracks.push(i);  
    }  
  }  
  
  build() {  
    List() {  
      ForEach(this.mTracks, (item: number) => {  
        ListItem() {  
          Text("标题是  " + item).height(50).fontSize(30).width('100%').backgroundColor('#ffffff')  
        }  
      })  
    }.width('100%').height('100%') .nestedScroll({  
      scrollForward: NestedScrollMode.PARENT_FIRST,  
      scrollBackward: NestedScrollMode.SELF_FIRST  
    }).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
  }  
}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.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.

导航条适配沉浸式适配在NestedScroll场景下失效，麻烦看下需要怎么配置下才行。

HarmonyOS

zxjiu

2024-10-25 12:13:08

1518浏览

回答 1

按赞同

按时间

superinsect

AlbumTracksPage外套了TabContent组件，导致Bottom的safeArea失效。

解决方法是给Tabs和想要开启的TabContent也设置expandSafeArea。

expandSafeArea默认的安全区域是不包含状态栏和底部安全区域的，所以要显示上去需要所有相关的组件都开启。

@Entry  
@Component  
struct page240424174206068 {  
  @State message: string = 'Hello World';  
  
  build() {  
    List() {  
      ListItem() {  
        Text("标题").height(100).width('100%').backgroundColor(Color.Red)  
      }  
  
      ListItem() {  
        Tabs({}) {  
          TabContent() {  
            AlbumTracksPage()  
          }  
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
  
          TabContent() {  
            AlbumTracksPage()  
          }  
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
        }  
        .height('100%').width('100%')  
  
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
      }  
  
    }  
  
    .height('100%')  
    .width('100%')  
  
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
  }  
}  
  
  
@Component  
struct AlbumTracksPage {  
  @State mTracks: number[] = new Array<number>();  
  
  aboutToAppear(): void {  
    for (let i = 0; i < 1000; i++) {  
      this.mTracks.push(i);  
    }  
  }  
  
  build() {  
    List() {  
      ForEach(this.mTracks, (item: number) => {  
        ListItem() {  
          Text("标题是 " + item).height(50).fontSize(30).width('100%').backgroundColor('#ffffff')  
        }  
      })  
    }  
    .width('100%')  
    .height('100%')  
    .nestedScroll({  
      scrollForward: NestedScrollMode.PARENT_FIRST,  
      scrollBackward: NestedScrollMode.SELF_FIRST  
    })  
  
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])  
  }  
}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.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.

2024-10-25 15:23:39

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 导航条适配沉浸式适配在NestedScroll场景下失效

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