HarmonyOS 鸿蒙Next中Hds底部页签栏问题

HarmonyOS 鸿蒙Next中Hds底部页签栏问题 如何在独立应用内部手动控制 Hds 的底部页签栏的深色和浅色模式


更多关于HarmonyOS 鸿蒙Next中Hds底部页签栏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

可以看下我这篇文章：如何给自己的应用适配深浅主题模式？【案例示例】

更多关于HarmonyOS 鸿蒙Next中Hds底部页签栏问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，您的方法可以解决我的问题
非常感谢，

不客气，能解决问题就好~

深色模式适配

深色模式（Dark Mode）又称为暗色模式，是与日常应用使用过程中的浅色模式（Light Mode）相对应的一种UI主题。深色模式最早来源于人机交互领域的研究和实践，该模式并非简单地将页面背景变为黑色、文字内容变为白色，而是提供一整套适配深色模式的应用配色主题。深色模式相较浅色模式更加柔和，能减少亮度对用户眼睛造成的刺激和疲劳，此外深色模式能在一定程度上降低应用功耗，提升续航表现。

应用深色模式适配，需遵循基本的UX设计原则，保障应用页面内容的易读性、舒适性和一致性，具体可参考深色模式设计原则。应用适配过程主要包含颜色资源如字体颜色、元素背景色的适配，媒体资源如图片图标的适配，以及系统状态栏的适配，此外需要对使用了Web组件加载的Web页面进行单独处理。

本文主要介绍深色模式的适配过程，列举常见问题及对应解决方案。

实现原理

当系统切换到深色模式后，应用内可能会出现部分内容切换到深色主题的情况，例如状态栏、弹窗背景色、系统控件等，会导致应用内页面效果错乱。

为应对上述情况，需要对应用进行深色模式下的内容适配，目前该适配主要依靠资源目录。当系统对应的设置项发生变化后（如系统语言、深浅色模式等），应用会自动加载对应资源目录下的资源文件。

系统为深色模式预留了dark目录，该目录在应用创建时默认不存在。在进行深色模式适配时，需要开发者在src/main/resources中手动创建出dark目录，将深色模式所需的资源放置到该目录下。对于浅色模式所需的资源，可以放入默认存在的src/main/resources/base目录下。

说明

在进行资源定义时，需要在base目录与dark目录中定义同名的资源。例如在base/element/color.json文件中定义text_color为黑色，在dark/element/color.json文件中定义text_color为白色，那么当深浅色切换时，应用内使用了$(‘app.color.text_color’)作为颜色值的元素会自动切换到对应的颜色，而无需使用其他逻辑判断进行控制。

一般情况下深浅色模式切换不会导致应用界面产生结构上的变化，而是保持应用界面结构一致的同时展示不同的主题配色、配图等，使得整个应用在切换到深色模式后依然保持自然美观。以下为深色模式适配的UX示例。

cke_791.png

从图中可以看到，在应用进行深色模式适配过程中主要的适配项有颜色资源适配、媒体资源适配、状态栏适配，除此之外若应用内使用了Web组件加载Web页面，那么还需实现Web页面适配深色模式。

目前应用向用户提供的深浅色模式切换有以下两种方式。

  • 应用跟随系统深浅色模式切换 实现上，需要开发者使用setColorMode()方法将ColorMode设置为COLOR_MODE_NOT_SET（未设置颜色模式），然后应用在运行过程中就可以自动感知到系统颜色模式切换，若应用完成了深浅色模式适配，将自动切换到对应的颜色模式。

  • 应用内提供手动控制深浅色的开关供用户自行选择 实现上，切换深色模式需要调用setColorMode()方法将ColorMode设置为COLOR_MODE_DARK（深色模式），切换浅色模式需要将ColorMode设置为COLOR_MODE_LIGHT（浅色模式），这样就可以完成对应用深浅色的手动控制。

综上分析，深色模式适配内容如下表所示。

表1 深色模式适配内容

适配项 适配内容 适配方式
颜色资源适配 组件背景色，字体颜色等 1. 使用受支持的系统资源
2. 使用color.json资源文件
媒体资源适配 应用内使用到的图片、图标等 1. SVG类型图标可使用fillColor()属性
2. 使用media资源目录
状态栏适配 深浅模式下不同的状态栏表现，包括状态栏的背景色以及状态栏内时间等内容的字体颜色 1. 对应用背景色进行深浅色适配
2. 根据当前深浅色状态动态设置状态栏字体颜色
Web内容适配 应用内使用Web组件加载的Web页面 参考Web深色模式适配

详见开发文档：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation

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

也很感谢您的方法，现已通过其他方法解决，

开发者您好，可以通过定义状态变量来控制主题，如定义

@State isDarkMode: boolean = false;

再在相关组件中根据该变量设置颜色，如：

.backgroundColor(isDarkMode? Color.Gray : Color.White)

通过切换isDarkMode的值来手动切换底部页签栏的深浅色模式。

如果是使用了沉浸光感，需要修改蒙版颜色，则需要如下设置：

//找到沉浸光感的这个属性设置
.barFloatingStyle({
  //其他代码略

  //增加此项配置：
  gradientMask: { maskColor: isDarkMode? Color.Gray : Color.White } //颜色可以自己修改
})

我尝试了一下，大概率不对，您没理解我的意思，我的意思是这个 Hds 的底部页签栏是具有一个浅色和深色类似于一个蒙版的效果，它在系统设置中切换深浅会发生改变
另外我不知道是不是我写法有问题还是怎么回事，这个ColorGray是不是写错了，是不是Color.Gray，

已更正并增加了沉浸光感的蒙版颜色设置方法。

666

鸿蒙Next中Hds底部页签栏问题通常由Tabs组件参数配置不当引起。检查barStyle是否与HDS主题匹配，确保activeIndex绑定正确。若使用自定义TabBar，需在barBuilder中正确传递index和controller。另需确认pages数量与页签数一致，避免因路由异常导致显示缺失。

在独立应用中手动控制Hds底部页签栏的深色/浅色模式，核心是通过设置应用的ColorMode实现，Hds组件会自动跟随。

// 强制设置为深色模式
this.getUIContext().getHostContext()?.config.colorMode = ConfigurationConstant.ColorMode.COLOR_MODE_DARK;

// 强制设置为浅色模式
this.getUIContext().getHostContext()?.config.colorMode = ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET;

在页签宿主页面的aboutToAppear中调用即可立即生效，无需单独配置Hds组件。

回到顶部