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])  
  }  
}

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

HarmonyOS
2024-10-25 12:13:08
浏览
收藏 0
回答 1
待解决
回答 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])  
  }  
}
分享
微博
QQ
微信
回复
2024-10-25 15:23:39
相关问题
HarmonyOS 底部导航条沉浸方案
222浏览 • 1回复 待解决
适配底部导航条,会出现遮挡情况
1857浏览 • 1回复 待解决
导航栏如何适配,有人知道吗?
1747浏览 • 0回复 待解决
HarmonyOS 沉浸方案
169浏览 • 1回复 待解决
Cronet适配HarmonyOS
806浏览 • 1回复 待解决
DSbridge HarmonyOS适配问题
124浏览 • 1回复 待解决
HarmonyOS深色主题适配
328浏览 • 1回复 待解决
HarmonyOS的appUI适配
243浏览 • 1回复 待解决
HarmonyOS 适配 React native
81浏览 • 1回复 待解决