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')) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

HarmonyOS

superinsect

2024-09-03 09:18:04

1240浏览

回答 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%') 
 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

2024-09-03 15:36:31

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看