HarmonyOS鸿蒙Next中导航模式设置为NavigationMode.Split, 中间为什么会有一条灰白色的分割线？

HarmonyOS鸿蒙Next中导航模式设置为NavigationMode.Split, 中间为什么会有一条灰白色的分割线？ 导航模式设置为NavigationMode.Split, 如下代码

build() {
    Navigation(new NavPathStack()) {
      RelativeContainer() {
        Text("导航栏")
      }
      .backgroundColor('1AFFFFFF')
      .width("100%")
      .height("100%")
    }
    .backgroundColor('1AFFFFFF')
    .navBarWidth(500)
    .enableDragBar(false)
    .height('100%')
    .width('100%')
    .mode(NavigationMode.Split)
  }

中间为什么会有一条灰白色的分割线？如下图

cke_329.png

如何隐藏分割线？


更多关于HarmonyOS鸿蒙Next中导航模式设置为NavigationMode.Split, 中间为什么会有一条灰白色的分割线？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

开发者您好，这个新功能是API23上实现的，低版本是没法自定义divider的。

可以看下如何针对UI组件属性做API版本兼容性判断是否可以满足您的需求，参考代码：

import { deviceInfo } from '@kit.BasicServicesKit';

// Index.ets
@Entry
@Component
struct NavigationExample {
  pageInfos: NavPathStack = new NavPathStack();
  isUseInterception: boolean = false;
  modifier: MyNavModifier = new MyNavModifier();

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPathByName('pageOne', null); //将name指定的NavDestination页面信息入栈
          })
      }
    }
    .mode(NavigationMode.Split)
    .attributeModifier(this.modifier)
    .title('NavIndex')
  }
}

class MyNavModifier implements AttributeModifier<NavigationAttribute> {
  applyNormalAttribute(instance: NavigationAttribute): void {
    if (deviceInfo.sdkApiVersion > 22) {
      instance.divider({ color: Color.White });
    }
  }
}

如果应用改到API23后需要在低版本上运行可以参考：

  1. 配置build-profile.json5设置应用开发过程使用的SDK版本： 假如应用使用并适配了API版本6.0.0(20)，同时希望应用能够运行5.0.5(17)，那么可以在应用工程的build-profile.json5文件中设置“targetSdkVersion": “6.0.0(20)”，“compatibleSdkVersion”: "5.0.5(17)”。
  2. 应用使用API兼容性保护判断： 假如某个新特性的API是在SDK版本6.0.0(20)提供，为了让应用兼容在基于API版本5.0.5(17)的老设备正常运行，开发者可以使用如下兼容性判断。
    • 针对HarmonyOS设备独有特性接口，即接口标记为since M.F.S(N)（文档中标记“起始版本：M.F.S(N)”, SDK物理包中hms路径下所包含的接口），使用distributionOSApiVersion接口进行兼容性判断保护。 例如判断“deviceInfo.distributionOSApiVersion >= 60000”时，调用6.0.0(20)的API新接口，否则使用降级方案，其中“60000”是由新接口的since字段“M10000+F100+S”转换而来，即60000=610000+0100+0。
    • 针对OpenHarmony底座接口，即接口标记为since N（文档中标记“起始版本：N”，SDK物理包中openharmony路径下所包含的接口），使用sdkApiVersion接口进行兼容性判断保护。例如判断“deviceInfo.sdkApiVersion >= 20”时，调用6.0.0(20)的API新接口，否则使用降级方案。
  3. 判断API是否可以使用： HarmonyOS定义了API接口canIUse帮助开发者来判断该设备是否支持某个特定的SysCap。
    • 查询hdsEffect接口的API文档，查出其系统能力为“SystemCapability.UIDesign.HDSComponent.Core”；
    • 通过判断“canIUse(‘SystemCapability.UIDesign.HDSComponent.Core’)”检查该设备是否可以使用hdsEffect接口。

更多关于HarmonyOS鸿蒙Next中导航模式设置为NavigationMode.Split, 中间为什么会有一条灰白色的分割线？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这样低版本上运行还是会展示分割线，我们需要解决低版本展示分割线的问题，我们自己再想想其他方案吧。

开发者你好，低版本看下使用Stack堆叠使用一个白色背景的Column来覆盖分割线的这种方式是否可以满足你低版本的需求呢？

@Entry
@Component
struct NavigationExample {
  pageInfos: NavPathStack = new NavPathStack();

  build() {
    Stack() {
      Navigation(this.pageInfos) {
        Column() {
          Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
            .width('80%')
            .height(40)
            .margin(20)
            .onClick(() => {
              this.pageInfos.pushPathByName('pageOne', null); //将name指定的NavDestination页面信息入栈
            })
        }
      }
      .mode(NavigationMode.Split)
      .title('NavIndex')
      Column() {

      }
      .offset({ left: 53 })
      .backgroundColor(Color.White)
      .width(5)
      .zIndex(0)
      .height('100%')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }
  }
}

开发者您好，API23可以修改分割线divider（该链接为gitcode链接）属性，可以把分割线设置为null隐藏。

如果不行麻烦请问您是在什么样的业务场景中使用该能力，交互流程是怎样的，在哪一个环节遇到了问题？方便说明能力不满足可能带来的影响：什么时间用到？是否高频？有无三方库可以做到？若提供该能力，是否会造成大工作量返工？请您注意提供的内容不要包含您或第三方的非公开信息，如给您带来不便，敬请谅解。

API 23才支持，我们应用需要兼容低版本，还是无法完全解决问题。

请问您是在什么样的业务场景中使用该能力 我们是TV应用，左侧NavBar区域是一个miniplayer固定显示，右侧是内容区，可导航跳转展示不同的页面。所以我们用NavigationMode.Split实现导航栈，但是中间有条白色的分割线，我们不想展示这条分割线。目前未找到三方库可实现类似功能。

【解决方案】

Navigation处于分栏显示状态时，导航页和内容区之间会显示分割线，分割线的热区左右各2vp，建议避让4vp以上。具体参考NavigationMode枚举说明中Split的说明。

可以隐藏分割线吗？太奇怪了，像bug一样。

该分割线是NavigationMode.Split模式的默认视觉设计元素，用于区分主内容区域与侧边导航栏。其样式由系统主题定义，属于框架预设的界面分隔符。

在HarmonyOS Next中，当Navigation组件的模式设置为NavigationMode.Split时，中间出现的灰白色分割线是系统的默认视觉设计，用于清晰地区分导航栏（NavBar）和内容区域（Content）。这条线是框架层自动绘制的，目的是在分屏模式下提供更好的视觉层次和操作引导。

要隐藏这条分割线，您可以通过设置Navigation组件的分割线样式属性来实现。具体方法是使用.divider修饰器，并将相关属性设置为透明或空值。

以下是修改后的代码示例，关键修改在最后一行：

build() {
  Navigation(new NavPathStack()) {
    RelativeContainer() {
      Text("导航栏")
    }
    .backgroundColor('1AFFFFFF')
    .width("100%")
    .height("100%")
  }
  .backgroundColor('1AFFFFFF')
  .navBarWidth(500)
  .enableDragBar(false)
  .height('100%')
  .width('100%')
  .mode(NavigationMode.Split)
  .divider({ color: Color.Transparent, strokeWidth: 0 }) // 隐藏分割线
}

通过将.divider的color设置为Color.Transparent（透明），并将strokeWidth设置为0，即可完全隐藏该分割线。

回到顶部