鸿蒙HarmonyOS NEXT实战开发：状态栏显隐变化实现案例

介绍

本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化。该场景多用于各种软件的首页、我的等页面中。

效果预览图

使用说明

1. 加载完成后显示状态栏显隐变化页面，上下拖动屏幕，顶端状态栏出现显隐变化。

实现思路

1. 在置顶位置使用stack组件添加两层状态栏。 

Stack() {
  ...
  Header({headOpacity: this.headOpacity, titleBackgroundColor: $r('app.color.ohos_id_color_background'), isTop: false});
  Header({headOpacity: this.opacityDefaultValue, titleBackgroundColor: $r('app.color.navigationbarchange_transparent_color'), isTop: true});
}

1. 通过获取Scroll的偏移量，计算透明度，分别对状态栏的组件设置透明度来实现状态栏的显隐变化效果。 

Scroll(this.scroller) {
  ...
}
.width($r('app.string.navigationbarchange_width_and_height_one_hundred_percent'))
.hei