纯血鸿蒙APP实战开发——状态栏显隐变化

介绍

本示例介绍使用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});
}

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

Scroll(this.scroller) {
  ...
}
.width($r('app.string.navigationbarchange_width_and_height_one_hundred_percent'))
.height($r('app.string.navigationbarchange_width_and_height_one_hundred_percent'))
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.onScroll(() => {
  this.scrollOffset = this.scroller.currentOffset().yOffset;
  if(this.scrollOffset <= this.opacityComputeRadix) {
    this.headOpacity = this.scrollOffset / this.opacityComputeRadix;
  }
  else {
    this.headOpacity = this.opacityDefaultValue;
  }
})

高性能知识点

本示例使用了onScroll回调监听接口，此接口属于频繁回调接口，应该避免在内部进行冗余和耗时操作，例如避免打印日志。

工程结构&模块类型

navigationbarchange                                        // har类型
|---view
|   |---NavigationBarChange.ets                            // 视图层-状态栏显隐变化页面 

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：

• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习知识点，请看下方小图