关于 expandSafeArea 不生效问题

xyccstudio2025-07-16 10:17

关于 expandSafeArea 不生效问题

expandSafeArea 设置不生效问题。

例如一下代码：想让在最后下边显示一个全选和删除按钮，给了最后一个 row 的高度，但是设置了 expandSafeArea 还是不生效。

typescript 复制代码

@Entry
@Component
struct ExpandSafeAreaPage {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Column() {
        Text(this.message)
      }
      .layoutWeight(1)

      Row() {
        Text('全选')
        Text('删除')
      }
      .width('100%')
      .height(50) // 这个地方设置了一个固定高度
      .backgroundColor(Color.Black)
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.White)
  }
}

但是这个情况的问题点就是由于那个设置了那个高度。里边有个说明：

设置 expandSafeArea 属性进行组件绘制扩展时，建议组件尺寸不要设置固定宽高（百分比除外），当设置固定宽高时，扩展安全区域的方向只支持 $SafeAreaEdge.TOP, SafeAreaEdge.START$ ，扩展后的组件尺寸保持不变。

说明文档

因此上述代码正确的实现方式是，把 expandSafeArea 的组件的高度去掉，在里边写一个高度把他撑开就行了。

typescript 复制代码

@Entry
@Component
struct ExpandSafeAreaPage {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Column() {
        Text(this.message)
      }
      .layoutWeight(1)

      Row() {
        Text('全选')
          .height(50)
        Text('删除')
          .height(50)
      }
      .width('100%')
      .backgroundColor(Color.Black)
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.White)
  }
}