鸿蒙开发中常见的问题（不定时更新）

处理Tab切换时组件不重新加载问题

问题

tab组件默认只加载第一个页面，切换到其他页面再切回来时生命周期函数aboutToAppear不会触发

解决方法

使用if判断来解决重新加载组件的问题

 Tabs() {
          TabContent() {
            if (this.currentIndex === 0) {
              Home()
            }
          }.tabBar(this.tabBuilder('首页', 0, $r('app.media.tabbar_home'), $r('app.media.ic_tabbar_home_select')))

          TabContent() {
            if (this.currentIndex === 1) {
              Project()
            }
          }.tabBar(this.tabBuilder('项目', 1, $r('app.media.tabbar_project'), $r('app.media.ic_tabbar_project_select')))

          TabContent() {
            if (this.currentIndex === 2) {
              Interview()
            }
          }
          .tabBar(this.tabBuilder('面经', 2, $r('app.media.tabbar_interview'), $r('app.media.ic_tabbar_interview_select')))

          TabContent() {
            if (this.currentIndex === 3) {
              Mine()
            }
          }.tabBar(this.tabBuilder('我的', 3, $r('app.media.tabbar_mine'), $r('app.media.ic_tabbar_mine_select')))
        }

沉浸式显示模式处理

问题

• 我的页面要突破手机安全区域来全屏显示（沉浸式模式显示），其他页面不需要
• 在Mine组件的aboutToAppear中使用window模块的 getLastWindow 和 setWindowLayoutFullScreen两个方法来处理全屏显示

设置沉浸式模式的特点： 在任何一个页面中设置过一次之后，其他页面也会跟着全屏显示

这么处理会出现问题： 从其他tab标签进入我的tab标签时，会出现底部tab栏闪动

• • 解决：在进入应用时(index.tes页面)就开启所有页面的全屏模式（不建议有bug）
  • 带来新的问题：不需要全屏显示的页面内容会突破安全区域显示，导致内容显示不正常

import { window } from '@kit.ArkUI'

@Component
export struct Mine {

  aboutToAppear(): void {
    //  利用了系统的window 这个api的getLastWindow方法获取到了当前的窗口
    window.getLastWindow(getContext()).then(win=>{
      //  利用当前窗口的setWindowLayoutFullScreen方法设置全屏: true:设置全屏  false：取消全屏
      win.setWindowLayoutFullScreen(true)  // 开启了当前页面的沉浸式模式（开启全屏模式）
    })
  }

  build() {
    Column(){
      Text('我的' + Math.random().toFixed(2))
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)
  }
}

正解

• 在index.ets页面的aboutToAppear中使用window模块的 getLastWindow 和 setWindowLayoutFullScreen两个方法来处理整个应用的全屏显示

问题：内容突破了整个安全区域，靠手机顶部显示了内容

解决：需要通过获取手机的安全高度来结合 padding来适配顶部内容的正常显示

index

aboutToAppear(): void {
    // 利用了系统的window 这个api的getLastWindow方法获取到了当前的窗口
    window.getLastWindow(getContext()).then(win=>{
      // 利用当前窗口的setWindowLayoutFullScreen方法设置全屏: true:设置全屏  false：取消全屏
      win.setWindowLayoutFullScreen(true)  // 开启了当前页面的沉浸式模式（开启全屏模式）

    //  获取设备的安全区域高度,获取系统的相关参数
     let area =  win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    //   获取area这个对象中的topReact（表示获取顶部的矩形对象）
       let height = area.topRect.height // 这个表示获取到的是安全区域的高度单位px
      let vpheight = px2vp(height)  // 将px转成vp

    //  将高度存储到AppStroage中
      AppStorage.setOrCreate('topHeight',vpheight)

      Logger.info(height.toString(),vpheight.toString())
    })
  }

其他页面

@Component
export struct Home {
  // 获取AppStraoage中的数据
  @StorageProp("topHeight") topHeight:number = 0

  build() {
    Column(){
      Text('首页' + Math.random().toFixed(2))
    }
    .padding({top:this.topHeight})
    .height('100%')
    .width('100%')
  }

}