HarmonyOS NEXT應用開發案例—狀態列顯隱變化

生活就是这么怪發表於2024-04-23

介紹

本示例介紹使用Scroll元件的滾動事件 onScroll 實現狀態列顯隱變化。該場景多用於各種軟體的首頁、我的等頁面中。

效果預覽圖

使用說明

  1. 載入完成後顯示狀態列顯隱變化頁面，上下拖動螢幕，頂端狀態列出現顯隱變化。

實現思路

  1. 在置頂位置使用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});
}
  1. 透過獲取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元件

寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 想要獲取更多完整鴻蒙最新VIP學習資源，請移步前往小編：https://qr21.cn/FV7h05

相關文章