HarmonyOS鸿蒙Next中使用了expandSafeArea，多层子组件嵌套的时候，里面的子组件高度会不对

问题原因

根据 ArkUI 组件安全区域官方文档 的说明：

expandSafeArea 属性仅作用于当前组件，不会向父组件或子组件传递，因此使用过程中，所有相关组件均需配置。

你的嵌套结构是 layout -> videoPage -> shortVideo -> videoPlayer，如果只在外层组件设置了 expandSafeArea，内层的 videoPlayer 组件不会自动继承这个属性，导致高度计算不正确（短一截导航栏的高度）。

方案一：在所有相关组件上设置 expandSafeArea

方案说明：根据嵌套关系，在每一层需要扩展安全区域的组件上都设置 expandSafeArea 属性。这是最直接的解决方案。

实现步骤：

① 在 layout 组件上设置 expandSafeArea

// layout.ets
@Component
struct Layout {
  build() {
    Column() {
      VideoPage()
    }
    .width('100%')
    .height('100%')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

② 在 videoPage 组件上设置 expandSafeArea

// videoPage.ets
@Component
export struct VideoPage {
  build() {
    Column() {
      ShortVideo()
    }
    .width('100%')
    .height('100%')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

③ 在 shortVideo 组件上设置 expandSafeArea

// shortVideo.ets
@Component
export struct ShortVideo {
  build() {
    Column() {
      VideoPlayer()
    }
    .width('100%')
    .height('100%')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

④ 在 videoPlayer 组件上设置 expandSafeArea

// videoPlayer.ets
@Component
export struct VideoPlayer {
  build() {
    // 视频播放器内容
    Video({ src: $videoSrc })
      .width('100%')
      .height('100%')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

关键 API 说明：

• expandSafeArea：控制组件扩展其安全区域，支持扩展到状态栏和导航条
• SafeAreaType.SYSTEM：系统默认非安全区域，包括状态栏、导航栏
• SafeAreaEdge：扩展安全区域的边缘（TOP、BOTTOM、START、END）

方案二：减少组件嵌套层级

方案说明：如果不需要多层组件封装，可以减少嵌套层级，直接在需要扩展安全区域的组件上设置属性。这与你提到的"把 videoPlayer 的代码提取到 shortVideo 就不会出现"的验证结果一致。

代码示例：

// 合并后的 shortVideo.ets
@Component
export struct ShortVideo {
  build() {
    Video({ src: $videoSrc })
      .width('100%')
      .height('100%')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

关键点：

• 减少不必要的组件层级可以简化布局和配置
• 保持组件职责单一，仅在需要扩展安全区域的位置设置属性
• 适用于组件封装需求不强的场景

方案三：使用 ignoreLayoutSafeArea 改变布局范围

方案说明：使用 ignoreLayoutSafeArea 可以让组件的布局范围扩展至安全区，同时子组件也会跟随扩展。

代码示例：

@Component
struct Layout {
  build() {
    Column() {
      VideoPage()
    }
    .width('100%')
    .height(LayoutPolicy.matchParent)
    .ignoreLayoutSafeArea([LayoutSafeAreaType.SYSTEM], [LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM])
  }
}

区别说明：

• expandSafeArea：仅扩展绘制区域，子组件布局不受影响，仍在安全区域内
• ignoreLayoutSafeArea：扩展布局范围，子组件会跟随父组件的扩展改变位置

注意事项

• 组件尺寸限制：根据官方文档，“设置 expandSafeArea 属性进行组件绘制扩展时，建议组件尺寸不要设置固定宽高（百分比除外），当设置固定宽高时，扩展安全区域的方向只支持 [SafeAreaEdge.TOP, SafeAreaEdge.START]，扩展后的组件尺寸保持不变。”
• 滚动容器限制：当父容器是滚动容器（Scroll、List、Grid、WaterFlow、Swiper、Tabs）时，设置 expandSafeArea 属性不生效。如果必须使用滚动容器，需要按照组件嵌套关系，将当前节点到滚动类祖先容器间所有直接节点都设置 expandSafeArea 属性。
• 边界重合要求：组件必须与安全区域边界重合，expandSafeArea 才能生效。例如：如果顶部组件没有紧贴屏幕顶部（y > 0），即使设置了 expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])，也不会扩展到状态栏区域。
• 事件拦截：组件延伸到避让区时，在避让区的事件（如点击事件等）可能会被系统拦截，优先给状态栏等系统组件响应。

参考文档

• expandSafeArea API 参考
• SafeAreaType 枚举说明
• SafeAreaEdge 枚举说明
• 窗口沉浸式开发指南