HarmonyOS鸿蒙Next中根据背景图片更换导航栏和图标颜色是什么能力?
HarmonyOS鸿蒙Next中根据背景图片更换导航栏和图标颜色是什么能力? 我目前能实现的是利用沉浸光感加悬浮导航栏,再加上统一的夜间模式来进行颜色的转换。
但是我看我的华为这个APP上应用的导航栏在不进行夜间模式切换的情况下,仅仅是底层背景照片、图片颜色的加深而自动变成了白色,在白色背景下又自动变成了黑色,这个是怎么做到的?


更多关于HarmonyOS鸿蒙Next中根据背景图片更换导航栏和图标颜色是什么能力?的实战教程也可以访问 https://www.itying.com/category-93-b0.html
开发者您好:
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里面有截图,那么它的截图就有可能呈现出不同的颜色。所以我想如果有公开的方法或者嗯方法不是很复杂的话,我就想适配一下。
尊敬的开发者,您好!该功能正在评估中,感谢您的理解与支持。
6666
提过工单,说暂时不开放相关能力,
好家伙,果然官方玩的好多都不开放。,
还有一种是往上滑动的时候导航栏自动变成一个向上的箭头按钮,
给我答复了,但是我还没来得及看:
目前暂无滑动动态隐藏或者显示hdstabs栏的接口方法。但是可以通过onDidScroll控制滚动偏移量设置barHeight属性的值控制HdsTabs的显隐,通过Stack布局设置堆叠自定义的“向上”页签,“向上”页签背景模拟沉浸光感效果可通过foregroundBlurStyle// 从6.0.2(22)版本开始,无需手动导入HdsTabsAttribute。具体请参考HdsTabs的导入模块说明。,
这个真不错!
像这样看状态栏颜色,我是每秒20帧采样,能够稳定120帧,然后滑动开始采样,暂停滑动1秒后停止采样,切换颜色模式后采样2秒,进入后台等都暂停采样

如果可以接受延迟高10帧采样等都是可以,看自己需求,
太高级了。,
应该是应用自定义业务实现的,可以通过定时组件截图,一分钟5次十次的也不影响应用流畅度,对需要检测的区域进行采样,并判断深浅色,动态修改tab栏颜色和图标,我的应用中动态修改状态栏颜色就是这么实现的。
我感觉应该不像是定时的东西,好像是固定了某一个位置。就比如我这两张截图的那块区域,那个图片是深色的,只要导航栏在这个区域里面,它就会变成白色,退出这个区域就会变成黑色。
这确实也算是一个思路。,
该能力称为“背景取色能力”(Background Color Extraction),是HarmonyOS Next系统级UI自适应特性。系统自动从背景图片提取主色调,动态调整导航栏背景色及图标颜色,实现视觉融合。


