当前组件,默认都会安全区避让,对于手机顶部,会有手机时间手机电量等字,如何设置不避让顶部安全区

当前组件,默认都会安全区避让,对于手机顶部,会有手机时间手机电量等字,如何设置不避让顶部安全区,并且设置字体颜色。

HarmonyOS
2024-09-27 12:58:12
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以设置沉浸式界面也就是所说的全屏显示,使用 await windowClass.setWindowLayoutFullScreen(true)

await windowClass.setWindowSystemBarEnable([“status”, “navigation”]) 设置窗口布局为沉浸式布局

await windowClass.setWindowSystemBarProperties({

navigationBarColor: “#00000000”,

statusBarColor: “#00000000”,

navigationBarContentColor: “#FF0000”,

statusBarContentColor: “#FF0000” //设置顶部区域时间电量设置颜色,当前颜色为红色,

}) 设置状态栏和导航栏的背景为透明。

可以参考以下代码案例:

//index.ets  
  
@Entry  
@Component  
struct Type3 {  
  @State message: string = 'Hello World'  
  @StorageLink("topHeight") topHeight: number = 0  
  @StorageLink("bottomHeight") bottomHeight: number = 0  
  build() {  
    Column() {  
      // 在界面顶部放置一个Row组件,用于占位  
      Row() {  
      }  
      .width("100%")  
      // 设置Row组件的高度为状态栏的高度,可避免界面内容与状态栏内容重叠  
      .height(px2vp(this.topHeight))  
      Row() {  
        Text(this.message)  
          .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
          .position({ x: 0, y: 0 })  
      }  
      .width("100%")  
      .flexGrow(1)  
      // 在界面底部放置一个Row组件,用于占位  
      Row() {  
      }  
      .width("100%")  
      // 设置Row组件的高度为导航栏的高度,可避免界面内容与导航栏内容重叠  
      .height(px2vp(this.bottomHeight))  
    }  
    // .backgroundImage($r("app.media.icon"))  
    .backgroundColor("#ff63f317")  
    .backgroundImageSize(ImageSize.Cover)  
    .width("100%")  
    .height("100%")  
  }  
}  
//EntryAbility.ets  
  
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';  
import { hilog } from '@kit.PerformanceAnalysisKit';  
import { window } from '@kit.ArkUI';  
  
async function enterImmersion(windowClass: window.Window) {  
  // 获取状态栏和导航栏的高度  
  windowClass.on("avoidAreaChange", (data) => {  
    if (data.type == window.AvoidAreaType.TYPE_SYSTEM) {  
      let topHeight:number = data.area.topRect.height  
      let botHeight:number = data.area.bottomRect.height  
      // 将状态栏和导航栏的高度保存在AppStorage中  
      AppStorage.setOrCreate('topHeight', topHeight);  
      AppStorage.setOrCreate('bottomHeight', botHeight);  
    }  
  })  
  await windowClass.setWindowLayoutFullScreen(true)  
  await windowClass.setWindowSystemBarEnable(["status", "navigation"])  
  // 设置状态栏和导航栏的背景为透明  
  await windowClass.setWindowSystemBarProperties({  
    navigationBarColor: "#00000000",  
    statusBarColor: "#00000000",  
    navigationBarContentColor: "#FF0000",  
    statusBarContentColor: "#ff0000"  
  })  
}  
  
export default class EntryAbility extends UIAbility {  
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');  
  }  
  
  onDestroy(): void {  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');  
  }  
  
  async onWindowStageCreate(windowStage: window.WindowStage) {  
  
    let windowClass:window.Window = await windowStage.getMainWindow()  
    await enterImmersion(windowClass)  
  
    // 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) ?? '');  
    });  
  }  
  onWindowStageDestroy(): void {  
    // Main window is destroyed, release UI related resources  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');  
  }  
  
  onForeground(): void {  
    // Ability has brought to foreground  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');  
  }  
  
  onBackground(): void {  
    // Ability has back to background  
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');  
  }  
}
分享
微博
QQ
微信
回复
2024-09-27 17:40:28
相关问题
Flutter 项目在设备安全区如何适配?
167浏览 • 1回复 待解决
关于屏幕安全区域的问题咨询
298浏览 • 1回复 待解决