**應(yīng)用未使用setWindowLayoutFullScreen()接口設(shè)置窗口全屏布局時，默認(rèn)使能組件安全區(qū)布局。可以使用expandSafeArea屬性擴(kuò)展安全區(qū)域?qū)傩赃M(jìn)行調(diào)整
**

擴(kuò)展安全區(qū)域?qū)傩栽?/h3>

• 布局階段按照安全區(qū)范圍大小進(jìn)行UI元素布局。
• 布局完成后查看設(shè)置了expandSafeArea的組件邊界（不包括margin）是否和安全區(qū)邊界相交。
• 如果設(shè)置了expandSafeArea的組件和安全區(qū)邊界相交，根據(jù)expandSafeArea傳遞的屬性則進(jìn)一步擴(kuò)大組件繪制區(qū)域大小覆蓋狀態(tài)欄、導(dǎo)航條這些非安全區(qū)域。
• 上述過程僅改變組件自身繪制大小，不進(jìn)行二次布局，不影響子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的大小和位置。
• 子節(jié)點(diǎn)可以單獨(dú)設(shè)置該屬性，只需要自身邊界和安全區(qū)域重合就可以延伸自身大小至非安全區(qū)域內(nèi)，需要確保父組件未設(shè)置clip等裁切屬性。
• 配置expandSafeArea屬性組件進(jìn)行繪制擴(kuò)展時，需要關(guān)注組件不能配置固定寬高尺寸，百分比除外。

背景圖和視頻場景

設(shè)置背景圖、視頻控件大小為安全區(qū)域大小并配置expandSafeArea屬性。

@Entry
@Component
struct SafeAreaExample1 {
  build() {
    Stack() {
      Image($r('app.media.bg'))
        .height('100%').width('100%')
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) // 圖片組件的繪制區(qū)域擴(kuò)展至狀態(tài)欄和導(dǎo)航條。
    }.height('100%').width('100%')
  }
}

滾動類場景

要求需要List滾動類組件滾動過程中元素可以和導(dǎo)航條重合，滾動至底部時，元素在導(dǎo)航條上面需要避讓。
由于expandSafeArea不改變子節(jié)點(diǎn)布局，因此，List等滾動類組件可以調(diào)用expandSafeArea，延伸List組件視圖窗口大小而不改變ListItem內(nèi)在布局。實(shí)現(xiàn)ListItem在滑動過程中顯示在導(dǎo)航條下，但滾動至最后一個時顯示在導(dǎo)航條上。

demo

未使用全屏模式

struct Index {
  @State message: string = 'Hello World';

  build() {
    Column(){
      Image($r('app.media.test'))
        .width('100%')
        .height('60%')
        .objectFit(ImageFit.Cover)
      Text(this.message)
    }
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}

運(yùn)行效果.png

使用之后代碼：

struct Index {
  @State message: string = 'Hello World';

  build() {
    Column(){
      Image($r('app.media.test'))
        .width('100%')
        .height('60%')
        .objectFit(ImageFit.Cover)
        .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP])
      Text(this.message)
    }
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}

運(yùn)行效果2.png