关于 expandSafeArea 不生效问题

关于 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)
  }
}
相关推荐
一只一只妖1 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟3 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶3 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip5 小时前
js上下文
前端·javascript
中草药z5 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)5 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休5 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel5 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组5 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架