HarmonyOS鸿蒙Next中ArkUI SidebarContainer如何避免边栏颜色和上下方状态栏颜色不一致

HarmonyOS鸿蒙Next中ArkUI SidebarContainer如何避免边栏颜色和上下方状态栏颜色不一致 你好
 

我自己使用 SidebarContainer 时, 发现侧边栏的颜色和上方状态栏和下方的(不知道什么名字的)栏颜色不一样.
但官方的备忘录应用适配良好

请问这是如何实现的, 谢谢~~~

图片

图片


更多关于HarmonyOS鸿蒙Next中ArkUI SidebarContainer如何避免边栏颜色和上下方状态栏颜色不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

尝试把侧边栏设置为最高层级

也有可能您没有做沉浸式适配

更多关于HarmonyOS鸿蒙Next中ArkUI SidebarContainer如何避免边栏颜色和上下方状态栏颜色不一致的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢 @CAPTAIN 1275
顺着"沉浸式适配"这个关键词去搜
找了了这篇文章

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation#section07671855272

我采用了窗口全屏布局方案
SideBarContainer 需要对 Sidebar 和 Content 子组件设置避让区
而不是对 SideBarContainer 这个父组件设置避让区

最后效果跟官方的一致(虽然我不知道这个是不是推荐方案)

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

能实现需要的功能就行其他的不用管啦

在HarmonyOS Next的ArkUI中,SidebarContainer的边栏颜色默认与状态栏独立。要统一颜色,需在应用主页面或Window的入口处配置状态栏、导航栏样式。

通过window.getLastWindow(this.context)获取Window对象,使用setWindowSystemBarProperties方法设置statusBarColornavigationBarColor,将其值设为与SidebarContainer边栏背景色相同的颜色值(如'#F1F3F5')。这能确保系统栏与边栏视觉一致。

要解决SidebarContainer侧边栏与状态栏颜色不一致的问题,核心在于通过系统API将侧边栏的背景色扩展到状态栏区域。这通常不是SidebarContainer组件本身的功能,而是需要结合窗口和状态栏的配置来实现。

实现的关键步骤是:

  1. 设置窗口全屏布局:在EntryAbilityonWindowStageCreate方法中,通过window对象设置全屏模式,为状态栏颜色设置做准备。

    import window from '@ohos.window';
    
    onWindowStageCreate(windowStage: window.WindowStage): void {
      // ... 其他代码
      let windowClass: window.Window = await windowStage.getMainWindow();
      // 设置窗口为全屏布局,允许内容延伸到状态栏区域
      await windowClass.setWindowLayoutFullScreen(true);
      // 如果需要,还可以隐藏导航栏
      // await windowClass.setWindowSystemBarEnable(['status']);
    }
    
  2. 为侧边栏应用背景色并设置安全区域:在ArkUI的页面组件中,确保侧边栏的根容器(通常是ColumnStack)的背景色是你希望延伸到状态栏的颜色。最关键的一步是使用safeAreasafeAreaEdge属性。

    @Entry
    @Component
    struct MySidebarPage {
      build() {
        // 使用Stack作为根布局,便于管理
        Stack({ alignContent: Alignment.TopStart }) {
          // SidebarContainer本身
          SidebarContainer(SidebarType.Embedded) {
            // 你的侧边栏内容
            Column() {
              // ...
            }
            .width('100%')
            .height('100%')
            .backgroundColor('#F1F3F5') // 设置侧边栏背景色
    
            // 你的主内容区
            Column() {
              // ...
            }
            .width('100%')
            .height('100%')
          }
          .width('100%')
          .height('100%')
        }
        // 扩展安全区域:将背景色应用到状态栏和导航栏区域
        .safeArea({ type: SafeAreaType.SYSTEM, edges: SafeAreaEdge.ALL })
        // 设置安全区域的背景色,此颜色会填充状态栏/导航栏区域
        .safeAreaEdge({ top: { color: '#F1F3F5' }, bottom: { color: '#F1F3F5' } })
        .backgroundColor('#F1F3F5') // 设置页面根布局的背景色,作为兜底
        .width('100%')
        .height('100%')
      }
    }
    

代码解释

  • setWindowLayoutFullScreen(true) 让应用内容可以占据状态栏和导航栏的位置。
  • .safeArea({ type: SafeAreaType.SYSTEM, edges: SafeAreaEdge.ALL }) 指示系统为所有边缘(上、下)预留出系统栏(状态栏/导航栏)的空间,避免内容被遮挡。
  • .safeAreaEdge({ top: { color: '#F1F3F5' }, bottom: { color: '#F1F3F5' } })最关键的属性。它为你指定的安全区域边缘(这里是顶部状态栏和底部导航栏区域)设置一个背景颜色。这个颜色会覆盖在系统栏的默认背景上,从而实现视觉上的统一。颜色值(#F1F3F5)需要与你的侧边栏背景色保持一致。
  • StackSidebarContainer内部的侧边栏Column都设置了相同的背景色(#F1F3F5),确保颜色连贯。

通过以上组合配置,侧边栏的背景色就能完整覆盖到状态栏和导航栏区域,实现与官方备忘录应用一致的视觉效果。

回到顶部