HarmonyOS . 沉浸状态栏使用

1,自定义 AppBar 组件

复制代码

@Component
export struct AppBar {
  private title: string | Resource = '';
  private color?: ResourceColor;
  @StorageProp('topRectHeight')
  topRectHeight:number=0



  @Builder
  loadBuilder() {
  }

  @Builder
  tailingBuilder() {
    Shape().width(28)
  }

  @Builder
  titleBuilder(){
    Text(this.title)
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
      .fontColor($r('app.color.start_window_background'))
  }

  @BuilderParam loading: () => void = this.loadBuilder;
  @BuilderParam tailing: () => void = this.tailingBuilder;
  @BuilderParam titleSlot: () => void = this.titleBuilder;



  build() {
    Stack(){
      Row() {
        this.loading()
        this.tailing()
      }
      .backgroundColor(this.color)
      .width('100%')
      .height(56 )
      .padding({ left: 8, right: 8, })
      .justifyContent(FlexAlign.SpaceBetween)
      this.titleSlot()
    }.padding({ top: px2vp(this.topRectHeight)})

  }

}

2，在EntryAbility中进行，窗口全屏处理，并且同时在onWindowStageCreate方法获取状态栏高度

复制代码

  async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });

    let windowClass: window.Window=windowStage.getMainWindowSync()//获取应用主窗口
    //1,设置窗口全屏
    let isLayoutFullScreen=true
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(()=>{
      console.info('设置窗口布局为全屏模式')
    }).catch((err)=>{
      console.info('设置窗口布局为全屏模式失败。处理步骤导致'+JSON.stringify(err))
    })
    //2,获取布局避让遮挡的区域

    // 以导航条避让为例 ---api 9以上 （TYPE_NAVIGATION_INDICATOR）
    // let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR
    // let avoidArea=windowClass.getAvoidArea(type)
    // let bottomRectHeight=avoidArea.bottomRect.height; // 获取到导航条区域的高度
    // AppStorage.SetOrCreate('bottomRectHeight', bottomRectHeight)


    // 以状态栏避让为例
    let type=window.AvoidAreaType.TYPE_SYSTEM
    let  avoidArea=await windowClass.getAvoidArea(type)
    let bottomRectHeight= avoidArea.topRect.height
    AppStorage.SetOrCreate('topRectHeight',bottomRectHeight)

    //3，注册监听函数，动态获取避让区域数据
    windowClass.on('avoidAreaChange',(data)=>{
      if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
        let topRectHeight=data.area.topRect.height
        AppStorage.SetOrCreate('topRectHeight',topRectHeight)
      }
      // else if(data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR){
      //   let bottomRectHeight = data.area.bottomRect.height;
      //   AppStorage.SetOrCreate('bottomRectHeight', bottomRectHeight);
      // }

    })

  }

3，在pages中的使用

复制代码

import PreferencesUtils from '../dbSQL/PreferencesUtils';
import  {AppBar}  from '../pages/AppBar'
import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State message: string = '';

   aboutToAppear(){
     PreferencesUtils.putString('userName','张三')
     PreferencesUtils.putString('age','18')
     PreferencesUtils.putString('sex','男')
   }

  async getAll(){
    this.message=JSON.stringify(await PreferencesUtils.getAll())
    console.log('getAll', this.message)
  }

  @Builder
  title() {
    Text("Preferences的使用").fontSize('18fp').fontWeight(FontWeight.Bold).margin({ left: 12 })
  }

  @Builder
  tailing() {
    Button() {
      Image($r('app.media.icon')).width(26).height(26).fillColor(Color.Black)
    }
    .width(36).height(36)
    .backgroundColor(Color.Transparent)
    .onClick(() => this.toClick())
  }

  toClick() {
    router.pushUrl({
      url:'pages/CustomDialogView'
    })
  }
  @Builder
  loading() {
    Button() {
      Image($r('app.media.more')).width(30).height(30)
    }
    .width(36).height(36)
    .backgroundColor(Color.Transparent)
  }

  build() {
    Column() {
      AppBar({
        color: Color.White,
        tailing: () => {
           this.tailing()
        },
        loading:()=>{
          this.loading()
        },
        titleSlot: this.title
      })

      Text(this.message)
        .fontSize(20)
        .margin({top:30})
        .fontWeight(FontWeight.Bold)

        Column({space:20}){
          Button('getAll').onClick(async ()=>{
            this.getAll()
          })

          Button('put').onClick(async ()=>{//插入数据key相同时，会自动修改替换value值
            PreferencesUtils.putString('userName','李四')
            PreferencesUtils.putString('age','24')
            PreferencesUtils.putString('sex','女')
            this.getAll()
          })


          Button('update').onClick(async ()=>{
            await PreferencesUtils.update('userName','王二麻子')
            await PreferencesUtils.update('age','35')
            await PreferencesUtils.update('sex','男')
            this.getAll()
          })


          Button('delete').onClick(async ()=>{
            await PreferencesUtils.delete('sex')
            this.getAll()
          })

          Button('clear').onClick(async ()=>{
            await PreferencesUtils.clear()
            this.getAll()
          })
        }.margin({top:30})
        .justifyContent(FlexAlign.Center)
    }
    .backgroundColor('#fafafa')
    .width('100%')
  }
}