HarmonyOS NEXT应用开发—状态栏显隐变化介绍本示例介绍使用Scroll组件的滚动事件 onScroll 实

介绍

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

效果预览图

使用说明

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

实现思路

在置顶位置使用stack组件添加两层状态栏。源码参考NavigationBarChangeView.ets。

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

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

Scroll(this.scroller) {
  ...
}
.width($r('app.string.width_and_height_value12'))
.height($r('app.string.width_and_height_value12'))
.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                            // 视图层-状态栏显隐变化页面

模块依赖

utils

参考资料

Scroll组件

详细关注VX公众号：Android老皮

《鸿蒙（HarmonyOS）开发学习指南》

第一章快速入门

1、开发准备

2、构建第一个ArkTS应用（Stage模型）

3、构建第一个ArkTS应用（FA模型）

4、构建第一个JS应用（FA模型）

5、........

第二章开发基础知识

1、应用程序包基础知识

2、应用配置文件（Stage模型）

3、应用配置文件概述（FA模型）

4、.......

第三章 资源分类与访问

1、资源分类与访问

2、创建资源目录和资源文件

3、资源访问

4、.......

第四章学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、......

第五章 UI开发

1.方舟开发框架（ArkUI）概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4.......

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7.......

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17......

第七章应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4.......