1,自定义 AppBar 组件
@Component
export struct AppBar {private title: string | Resource = '';private color?: ResourceColor;@StorageProp('topRectHeight')topRectHeight:number=0@BuilderloadBuilder() {}@BuildertailingBuilder() {Shape().width(28)}@BuildertitleBuilder(){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 abilityhilog.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=truewindowClass.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_SYSTEMlet avoidArea=await windowClass.getAvoidArea(type)let bottomRectHeight= avoidArea.topRect.heightAppStorage.SetOrCreate('topRectHeight',bottomRectHeight)//3,注册监听函数,动态获取避让区域数据windowClass.on('avoidAreaChange',(data)=>{if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {let topRectHeight=data.area.topRect.heightAppStorage.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)}@Buildertitle() {Text("Preferences的使用").fontSize('18fp').fontWeight(FontWeight.Bold).margin({ left: 12 })}@Buildertailing() {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'})}@Builderloading() {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%')}
}