HarmonyOS 使用 expandSafeArea 控制组件扩展到安全区域,没有生效

页面顶部有1个Swiper 轮播组件,希望能够顶到顶部,使用 expandSafeArea 设置时无法生效。在其他页面设置 Image 顶到顶部 是有效果的。

build() { 
  Column() { 
    //顶部轮播 
    Swiper(this.swiperController) { 
      LazyForEach(this.headerAdvList, (item: AdvModel) => { 
        Image(item.imageurl) 
          .width(Const.FULL_WIDTH) 
          .height(designUnit(311)) 
          .objectFit(ImageFit.Fill) 
          .onClick(() => { 
            KsRouterManager.getInstance().goAdv(this, item); 
          }) 
      }, (item: AdvModel) => JSON.stringify(item)) 
    } 
    .width(Const.FULL_WIDTH) 
    .height(designUnit(311)) 
    .index(1) 
    .autoPlay(true) 
    .interval(4000) 
    .loop(true) 
    .indicator(this.headerAdvList.list.length > 1 ? 
    new DotIndicator() 
      .itemWidth(designUnit(6)) 
      .itemHeight(designUnit(6)) 
      .selectedItemWidth(designUnit(6)) 
      .selectedItemHeight(designUnit(6)) 
      .color('rgba(255, 255, 255, 0.3)') 
      .selectedColor($r('app.color.ks_color_FFFFFF')) : false) 
    .disableSwipe(this.headerAdvList.list.length > 1 ? false : true) 
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) 
  } 
  .width(Const.FULL_WIDTH) 
  .height(Const.FULL_HEIGHT) 
  .backgroundColor($r('app.color.ks_color_EEF4F6')) 
}
HarmonyOS
2024-09-03 09:18:04
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

根据您提供的demo,我们复现了您所说的Swiper设置expandSafeArea后内部image无法到顶的情况。

目前expandSafeArea是只作用于当前组件的,并不会传递给子组件。在您的代码中,只有Swiper属性设置了expandSafeArea,而内部的Image并未设置,所以在布局时,内部的Image仍然只会考虑安全区域。

如果您想让内部Image到顶,可以给Image也设置expandSafeArea。

以下是我们提供的试验小demo,您可以通过设置外部和内部组件的expandSafeArea来探索其布局规则。

另外,Swiper组件会在绘制时做裁剪,若只为内部组件设置expandSafeArea,会导致显示不全:

@Entry 
@Component 
struct SafeAreaExample1 { 
 
  build() { 
    Column() { 
      Swiper() { 
        Image($r('app.media.startIcon')) 
          .height('100%') 
          .width('100%') 
          .objectFit(ImageFit.Fill) 
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) 
    Image($r('app.media.startIcon')) 
      .height('100%') 
      .width('100%') 
      .objectFit(ImageFit.Fill) 
  } 
  .height('30%').width('100%') 
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) 
} 
.height('100%') 
 
  } 
}
分享
微博
QQ
微信
回复
2024-09-03 15:36:31
相关问题
关于屏幕安全区域的问题咨询
271浏览 • 1回复 待解决
用数组变量控制组件属性不生效
1714浏览 • 1回复 待解决
Flutter 项目在设备安全区如何适配?
119浏览 • 1回复 待解决
HarmonyOS 获取系统时间戳没有生效
207浏览 • 1回复 待解决
HarmonyOS expandSafeArea生效
220浏览 • 1回复 待解决
HarmonyOS如何控制组件的属性输出
337浏览 • 1回复 待解决