HarmonyOS鸿蒙Next中根据背景图片更换导航栏和图标颜色是什么能力?

HarmonyOS鸿蒙Next中根据背景图片更换导航栏和图标颜色是什么能力? 我目前能实现的是利用沉浸光感加悬浮导航栏,再加上统一的夜间模式来进行颜色的转换。

但是我看我的华为这个APP上应用的导航栏在不进行夜间模式切换的情况下,仅仅是底层背景照片、图片颜色的加深而自动变成了白色,在白色背景下又自动变成了黑色,这个是怎么做到的?


更多关于HarmonyOS鸿蒙Next中根据背景图片更换导航栏和图标颜色是什么能力?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

18 回复

开发者您好:

1、对于场景“向上滑动的时候导航栏自动变成一个向上的箭头按钮”您可参考4楼开发者说明:通过onDidScroll控制滚动偏移量设置barHeight属性的值控制HdsTabs的显隐,通过Stack布局设置堆叠自定义的“向上”页签,“向上”页签背景模拟沉浸光感效果可通过foregroundBlurStyle。Demo如下:

// Index.ets
// 从6.0.2(22)版本开始,无需手动导入HdsTabsAttribute。具体请参考HdsTabs的导入模块说明。
import { HdsTabs, HdsTabsAttribute, HdsTabsController, hdsMaterial } from '@kit.UIDesignKit';

@Entry
@Component
struct Index {
  // 初始化HdsTabs控制器。
  private controller: HdsTabsController = new HdsTabsController();
  private scroller: Scroller = new Scroller();
  @State barHeight: number = 70;
  @State barBottom: number = 30;

  aboutToAppear(): void {
    this.controller.bindScroller(0, this.scroller);
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      // HdsTabs
      HdsTabs({ controller: this.controller }) {
        TabContent() {
          Scroll(this.scroller) {
            Column() {
              Image($r('app.media.startIcon'));
              Image($r('app.media.startIcon'));
              Image($r('app.media.startIcon'));
            };
          }
          .onDidScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
            console.info(`Succeeded in xOffset:${xOffset},yOffset:${yOffset},scrollState:${scrollState}`);
            if (yOffset > 0 && this.scroller.currentOffset().yOffset >= 70) {
              this.barHeight = 0;
            } else if (yOffset < 0 && this.scroller.currentOffset().yOffset <= 70) {
              this.barHeight = 70;
            }
            console.info(`Succeeded in currentOffset:${this.scroller.currentOffset().yOffset}`);
            console.info(`Succeeded in BarHeight:${this.barHeight}`);
          });
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_ic_public_clock'), 'Green'));

        TabContent() {
          Image($r('app.media.startIcon'));
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.wifi_router_fill'), 'Blue'));

        TabContent() {
          Image($r('app.media.startIcon'));
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_ic_public_clock'), 'Yellow'));
      }
      .height('100%')
      .width('100%')
      // 设置barOverlap为true,vertical为false,barPosition为BarPosition.End
      .barOverlap(true)
      .barPosition(BarPosition.End)
      .vertical(false)
      .barHeight(this.barHeight)
      // 设置页签栏悬浮样式
      .barFloatingStyle({
        barWidth: { smallWidth: 200, mediumWidth: 300, largeWidth: 400 },
        barBottomMargin: 28,
        gradientMask: { maskColor: '#66F1F3F5', maskHeight: 92 },
        systemMaterialEffect: {
          materialType: hdsMaterial.MaterialType.IMMERSIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        },
        // 设置迷你栏,若不设置,则仅有页签栏
        miniBar: undefined
      });

      if (this.barHeight === 0) {
        // 自定义页签
        Row() {
          Stack() {
            Column()
              .justifyContent(FlexAlign.Center)
              .width(70)
              .aspectRatio(1)
              .borderRadius(35)
              .foregroundBlurStyle(BlurStyle.Thin,
                {
                  colorMode: ThemeColorMode.LIGHT,
                  adaptiveColor: AdaptiveColor.DEFAULT,
                  scale: 1.0
                });
            Image($r('app.media.arrowshape_up')) // 箭头图标,需要自行定义
              .width(50)
              .height(50);
          };
        }
        .height(70 + this.barBottom)
        .width('100%')
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Top);
      }
    };
  }
}

2、对于场景“hdsTabs悬浮样式根据背景颜色自动切换深浅色模式”,目前仅限系统应用实现。如果您也希望能够实现,请问您是在什么样的业务场景中使用该能力,交互流程是怎样的,在哪一个环节遇到了问题?方便说明能力不满足可能带来的影响:什么时间用到?是否高频?有无三方库可以做到?若提供该能力,是否会造成大工作量返工?请您注意提供的内容不要包含您或第三方的非公开信息,如给您带来不便,敬请谅解。

更多关于HarmonyOS鸿蒙Next中根据背景图片更换导航栏和图标颜色是什么能力?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的,明白,这是第2个点,我只是比较好奇,想看一下,如果官方公开了这个能力的话,我想适配一下,主要是提升一下用户的体验度,因为我有一个应用涉及到了,会在某一个tab里面有截图,那么它的截图就有可能呈现出不同的颜色。所以我想如果有公开的方法或者嗯方法不是很复杂的话,我就想适配一下。

尊敬的开发者,您好!该功能正在评估中,感谢您的理解与支持。

提过工单,说暂时不开放相关能力,

好家伙,果然官方玩的好多都不开放。,

还有一种是往上滑动的时候导航栏自动变成一个向上的箭头按钮,

给我答复了,但是我还没来得及看:
目前暂无滑动动态隐藏或者显示hdstabs栏的接口方法。但是可以通过onDidScroll控制滚动偏移量设置barHeight属性的值控制HdsTabs的显隐,通过Stack布局设置堆叠自定义的“向上”页签,“向上”页签背景模拟沉浸光感效果可通过foregroundBlurStyle// 从6.0.2(22)版本开始,无需手动导入HdsTabsAttribute。具体请参考HdsTabs的导入模块说明。,

这个真不错!

像这样看状态栏颜色,我是每秒20帧采样,能够稳定120帧,然后滑动开始采样,暂停滑动1秒后停止采样,切换颜色模式后采样2秒,进入后台等都暂停采样

如果可以接受延迟高10帧采样等都是可以,看自己需求,

太高级了。,

应该是应用自定义业务实现的,可以通过定时组件截图,一分钟5次十次的也不影响应用流畅度,对需要检测的区域进行采样,并判断深浅色,动态修改tab栏颜色和图标,我的应用中动态修改状态栏颜色就是这么实现的。

我感觉应该不像是定时的东西,好像是固定了某一个位置。就比如我这两张截图的那块区域,那个图片是深色的,只要导航栏在这个区域里面,它就会变成白色,退出这个区域就会变成黑色。

没看到相关api,我也是提供一个思路,截图可以指定组件ID,也可以指定区域,只要知道你要的区域和ID就能开启和关闭定时采样并修改,

这确实也算是一个思路。,

该能力称为“背景取色能力”(Background Color Extraction),是HarmonyOS Next系统级UI自适应特性。系统自动从背景图片提取主色调,动态调整导航栏背景色及图标颜色,实现视觉融合。

这是 HarmonyOS Next 系统内置的智能取色与导航栏自适应能力,并非单纯的沉浸式或夜间模式切换。系统会自动分析页面底层背景(如轮播图、头部大图)的主色调亮度,然后动态改变状态栏和导航栏的文字/图标颜色,使其在浅色背景上显示深色图标、在深色背景上显示浅色图标,确保始终清晰可见。

在开发中,这一能力的核心实现依赖窗口属性设置:不固定指定 navigationBarContentColorstatusBarContentColor,而是借助系统的 auto-adaptive 机制。当你将导航栏设为悬浮、透明模式,并允许内容延伸到系统栏区域时,系统会实时采样该区域下方内容(或背景图)的像素亮度,自动计算出最合适的图标颜色。你看到的“我的华为”APP 就是充分利用了这一能力,无需手动监听背景变化或切换夜间模式即可实现无缝适配。

回到顶部