HarmonyOS鸿蒙Next中Navigation的内容区域如何延伸到状态栏区域

HarmonyOS鸿蒙Next中Navigation的内容区域如何延伸到状态栏区域

build() {
  Navigation(this.pathStack) {
    Column() {
      Text("123123123")
      Text("123123123")
      Text("123123123")
      Text("123123123")
      Text("123123123")
      Text("123123123")
      Text("123123123")
      Text("123123123")
      Text("123123123")
      Text("123123123")
      Text("123123123")
    }.width("100%").backgroundColor(Color.Red)
    .expandSafeArea([SafeAreaType.SYSTEM],[
      SafeAreaEdge.TOP
    ])
  }
  .hideToolBar(true)
  .hideTitleBar(true)
  .backgroundColor(Color.Blue)
}

上述代码中如何让第一个Text从状态栏开始显示


更多关于HarmonyOS鸿蒙Next中Navigation的内容区域如何延伸到状态栏区域的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

建议直接通过窗口接口setWindowLayoutFullScreen设置全屏沉浸式。

// EntryAbility.ets
import { UIAbility } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
export default class EntryAbility extends UIAbility {
  // ...
  onWindowStageCreate(windowStage: window.WindowStage): void {
    console.info('onWindowStageCreate');
    let windowClass: window.Window | undefined = undefined;
    windowStage.getMainWindow((err: BusinessError, data) => {
      const errCode: number = err.code;
      if (errCode) {
        console.error(`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`);
        return;
      }
      windowClass = data;
      let isLayoutFullScreen = true;
      try {
        let promise = windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
        promise.then(() => {
          console.info('Succeeded in setting the window layout to full-screen mode.');
        }).catch((err: BusinessError) => {
          console.error(`Failed to set the window layout to full-screen mode. Cause code: ${err.code}, message: ${err.message}`);
        });
      } catch (exception) {
        console.error(`Failed to set the window layout to full-screen mode. Cause code: ${exception.code}, message: ${exception.message}`);
      }
    });
  }
}

更多关于HarmonyOS鸿蒙Next中Navigation的内容区域如何延伸到状态栏区域的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


// 在UIAbility的onWindowStageCreate中设置全屏
onWindowStageCreate(windowStage: window.WindowStage) {
  let mainWin = windowStage.getMainWindowSync();
  mainWin.setWindowLayoutFullScreen(true); // 关键设置
  windowStage.loadContent("pages/Index");
}

修改原代码中的安全区配置:

Column() {
  // 内容...
}
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP]) // 扩展顶部安全区
.margin({ top: 0 }) // 确保无额外间距
.position({ x: 0, y: 0 }) // 强制定位到顶部

在入口ability设置沉浸式,一般使用方式二即可

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability

  // 1.获取应用主窗口。
  let windowClass: window.Window | null = null;
  windowStage.getMainWindow((err: BusinessError, data) => {
    let errCode: number = err.code;
    if (errCode) {
      console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
      return;
    }
    windowClass = data;
    console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));

    方式一:设置导航栏、状态栏不显示。
    let names: Array<'status'> = [];
    windowClass.setWindowSystemBarEnable(names);

    方式二:设置窗口为全屏布局,配合设置导航栏、状态栏的透明度、背景/文字颜色及高亮图标等属性,与主窗口显示保持协调一致。
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
  });

很喜欢HarmonyOS的卡片式设计,信息一目了然,操作也更便捷。

沉浸式布局,

在HarmonyOS Next中,通过设置UIAbility的Window模块属性实现内容延伸到状态栏。在UIAbility的onWindowStageCreate回调中,获取窗口并设置layoutFullScreen(true)和statusBarVisibility(WindowComponent.TRANSPARENT)。同时需在module.json5配置abilities的window属性,设置"maxWindowRatio": 1.0和"minWindowRatio": 1.0。Navigation组件会自动适应全屏布局,内容将覆盖状态栏区域。

在HarmonyOS Next中,要让Navigation的内容区域延伸到状态栏,需要使用expandSafeArea方法并正确配置安全区域参数。从你的代码看,你已经使用了这个方法,但需要调整参数。

将代码修改为:

Navigation(this.pathStack) {
  Column() {
    // 你的内容
  }
  .width("100%")
  .backgroundColor(Color.Red)
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP], {
    edges: [SafeAreaEdge.TOP]
  })
}
.hideTitleBar(true)
.hideToolBar(true)
.backgroundColor(Color.Blue)

关键点:

  1. expandSafeArea的第三个参数需要明确指定edges: [SafeAreaEdge.TOP]
  2. 确保同时设置了hideTitleBar(true)hideToolBar(true)来隐藏标题栏和工具栏
  3. 安全区域类型使用SafeAreaType.SYSTEM

这样配置后,Navigation的内容区域就会从状态栏下方开始显示,实现全屏效果。

回到顶部