关于 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)
  }
}
相关推荐
゜ eVer ㄨ1 分钟前
React学习第三天——生命周期
前端·学习·react.js
摆烂且佛系3 分钟前
CSS元素的总宽度计算规则
前端·css
对岸住着星星8 分钟前
vue3+ts实现拖拽缩放,全屏
前端·javascript
aesthetician17 分钟前
@tanstack/react-query:React 服务器状态管理与数据同步解决方案
服务器·前端·react.js
Nan_Shu_61444 分钟前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店1 小时前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖1 小时前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒1 小时前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser1 小时前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan1 小时前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot