鸿蒙:深色模式适配和浅色模式的切换

前言:

有些时候我们需要对应用进行深色模式的适配处理,并且在不需要的时候切换到浅色状态,下面和大家一起照着官方文档来学习。

下面是官方文档的链接:

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation#section128661451172714https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation#section128661451172714这里就不多说了,直接上效果图和封装好的代码:

代码如下:

1、ColorModeManager.ets

import { window } from "@kit.ArkUI";
import { common, ConfigurationConstant } from "@kit.AbilityKit";export class ColorModeManager {windowObj: window.Window | null = null;currentColorMode: () => ConfigurationConstant.ColorMode;// 构造函数接收window对象作为参数constructor(windowObj: window.Window, currentColorMode: () => ConfigurationConstant.ColorMode) {this.windowObj = windowObj;this.currentColorMode = currentColorMode;}// 状态栏颜色切换changeTabsColor(): void {const colorValues = Object.values(Colors);const randomIndex = Math.floor(Math.random() * colorValues.length);// 随机颜色this.windowObj?.setWindowSystemBarProperties({statusBarContentColor: colorValues[randomIndex]})}// 颜色模式切换changeColorMode() {// 每次调用时通过回调获取最新值const currentMode = this.currentColorMode();let applicationContext = AppStorage.get('applicationContext') as common.ApplicationContextif (currentMode == ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);} else {applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);}}
}enum Colors {// 基础色Red = "#FF0000",Green = "#00FF00",Blue = "#0000FF",// 扩展色Yellow = "#FFFF00",Purple = "#800080",Orange = "#FFA500",Pink = "#FFC0CB",Cyan = "#00FFFF",Brown = "#A52A2A",Gray = "#808080"
}

2、Index.ets

import { ConfigurationConstant } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { ColorModeManager } from './ColorModeManager';@Entry
@Component
struct Index {colorModeManager: ColorModeManager | undefined = undefined;aboutToAppear(): void {window.getLastWindow(this.getUIContext().getHostContext(), (err: BusinessError, data) => {const colorModeManager =new ColorModeManager(data, () => AppStorage.get("currentColorMode") as ConfigurationConstant.ColorMode)this.colorModeManager = colorModeManager})}build() {Column({ space: 20 }) {Button("切换颜色模式").onClick(() => {this.colorModeManager?.changeColorMode()})Button("切换状态栏颜色").onClick(() => {this.colorModeManager?.changeTabsColor()})Column({ space: 20 }) {Text("··文本颜色适配展示··").fontColor(this.colorModeManager?.currentColorMode() == ConfigurationConstant.ColorMode.COLOR_MODE_DARK ?Color.White :Color.Black).fontWeight(FontWeight.Bold).fontSize(22)Text("后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。").fontColor(this.colorModeManager?.currentColorMode() == ConfigurationConstant.ColorMode.COLOR_MODE_DARK ?Color.White :Color.Black)Text("文本在组件区域显示效果与字体资源相关,默认字体排印可见字体排印视觉指引。").fontColor(this.colorModeManager?.currentColorMode() == ConfigurationConstant.ColorMode.COLOR_MODE_DARK ?Color.White :Color.Black)}.width("80%")}.justifyContent(FlexAlign.Center).height('100%').width('100%')}
}

以上是个人经验分享

···················!!!补充缺少的代码!!!················

3、EntryAbility.ets

export default class EntryAbility extends UIAbility {// 1、添加这个方法onConfigurationUpdate(newConfig: Configuration): void {const currentColorMode: ConfigurationConstant.ColorMode | undefined = AppStorage.get('currentColorMode');if (currentColorMode !== newConfig.colorMode) {AppStorage.setOrCreate<ConfigurationConstant.ColorMode>('currentColorMode', newConfig.colorMode);}}// 2、在onCreate()中存储ColorModeonCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {AppStorage.setOrCreate<ConfigurationConstant.ColorMode>('currentColorMode', this.context.config.colorMode);hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');}// 3、在 windowStage.loadContent中存储applicationContext onWindowStageCreate(windowStage: window.WindowStage): void {hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');windowStage.loadContent('pages/Index', (err) => {// 代码如下   ·······················  ··let applicationContext = this.context.getApplicationContext();AppStorage.setOrCreate('applicationContext', applicationContext)// 代码如上   ·······················  ··if (err.code) {hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));return;}hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');});}
.......
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/96205.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/96205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Coze源码分析-资源库-删除插件-后端源码-数据访问和基础设施层

5. 数据访问层 5.1 仓储接口定义 插件仓储接口 文件位置&#xff1a;backend/domain/plugin/repository/plugin.go type PluginRepository interface {// DeleteDraftPlugin 删除插件草稿DeleteDraftPlugin(ctx context.Context, pluginID int64) error// DeleteAPPAllPlugins …

案例一: 对基础选择器的使用【网页盒子】

【1】样例&#xff1a;首先&#xff0c;观察到&#xff0c;几个元素竖着排列的&#xff0c;所以使用块级元素&#xff0c;而不是行内元素。【2】代码演示<head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,…

爬虫项目优化:如何用 Redis 实现 “断点续爬”?避免重复采集电商数据

在电商数据采集场景中&#xff0c;爬虫常因网络波动、服务器重启、IP 封禁等问题中断。若缺乏断点续爬机制&#xff0c;重启后需从头开始&#xff0c;不仅浪费带宽与时间&#xff0c;还可能因重复采集导致数据冗余。Redis 凭借其高性能、原子操作、多样数据结构的特性&#xff…

决策树概念与原理

决策树简介决策树是一种树形结构树中每个内部节点表示一个特征上的判断&#xff0c;每个分支代表一个判断结果的输出&#xff0c;每个叶子节点代表一种分类结果(仅举例无其他意义或隐喻)就像一个女孩去相亲&#xff0c;那么首先询问是否大于30&#xff0c;大于则不见&#xff0…

SQL面试题及详细答案150道(116-135) --- 高级查询与函数篇

《前后端面试题》专栏集合了前后端各个知识模块的面试题,包括html,javascript,css,vue,react,java,Openlayers,leaflet,cesium,mapboxGL,threejs,nodejs,mangoDB,MySQL,Linux… 。 前后端面试题-专栏总目录 文章目录 一、本文面试题目录 116. 如何使用CASE语句实…

VeRL:强化学习与大模型训练的高效融合框架

本文由「大千AI助手」原创发布&#xff0c;专注用真话讲AI&#xff0c;回归技术本质。拒绝神话或妖魔化。搜索「大千AI助手」关注我&#xff0c;一起撕掉过度包装&#xff0c;学习真实的AI技术&#xff01; 1 概述&#xff1a;VeRL的起源与核心价值 VeRL&#xff08;Versatile…

2. 计算机系统基础知识

1 计算机系统概述 计算机系统 (Computer System) 是指用于数据管理的计算机硬件、软件及网络组成的系统。 计算机系统可划分为硬件(子系统)和软件(子系统)两部分。硬件由机械、电子元器件、磁介质和光介质等物理实体构成&#xff0c;例如处理器(含运算单元和控制单元)、存储器、…

国产EtherCAT从站芯片FCE1353与N32G435 MCU功能板测试流程

上期推荐&#xff0c;我们在前期介绍了FCE1353与国民N32G435 MCU开发板的基本情况&#xff0c;本期主要介绍此开发板的测试流程&#xff0c;以便用户拿到此板做功能验证、兼容性测试、可靠性测试时更加便捷地提高开发验证效率。01概述FCE1353_N32G435RBL7_GPIO_V1 开发板主要通…

向日葵亮点16功能解析:被控端“快速解锁”

向日葵16重磅上线&#xff0c;本次更新新增了诸多实用功能&#xff0c;提升远控效率&#xff0c;实现应用融合突破设备边界&#xff0c;同时全面提升远控性能&#xff0c;操作更顺滑、画质更清晰&#xff01;无论远程办公、设计、IT运维、开发还是游戏娱乐&#xff0c;向日葵16…

深度解析:IService 与 ServiceImpl 的区别

在使用 MyBatis-Plus 开发业务逻辑时&#xff0c;IService 和 ServiceImpl 是经常遇到的两个核心类。很多初学者会疑惑&#xff1a; 为什么要定义 IService&#xff1f;ServiceImpl 又解决了什么问题&#xff1f;它们之间到底有什么区别与联系&#xff1f; 本文将结合源码与应用…

YOLO12 改进、魔改|通道自注意力卷积块CSA-ConvBlock,通过动态建模特征图通道间的依赖关系,优化通道权重分配,在强化有效特征、抑制冗余信息

在分割的研究中&#xff0c;传统卷积神经网络&#xff08;CNN&#xff09;存在两大关键问题&#xff1a;一是池化操作虽能降低计算复杂度&#xff0c;却会导致特征图中有效空间信息丢失&#xff0c;尤其太阳暗条这类不规则、精细结构的特征易被削弱&#xff1b;二是传统 CNN 对…

JuiceFS分布式文件系统

对象存储虽然具备极高的扩展性和成本优势&#xff0c;却缺乏对POSIX语义的支持&#xff0c;导致许多应用无法直接使用。正是在这样的背景下&#xff0c;JuiceFS 应运而生——它巧妙地融合了对象存储的弹性与传统文件系统的易用性&#xff0c;为现代应用提供了一种全新的存储解决…

nginx配置前端请求转发到指定的后端ip

nginx conf配置 配置把“前端静态文件”和“后端接口”统一收在 同一个 server{} 块 里&#xff0c;通过 两条 location 做分流&#xff0c;其中 /api 这条 location 用到了一点“小技巧”把路径裁掉后再转发。下面按执行顺序逐句拆解&#xff0c;告诉你“请求是怎么被转发到 1…

HTML 各种标签的使用说明书

HTML 各种标签的使用说明书 1. HTML 简介 HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是用于创建网页的标准标记语言。它使用一系列标签来描述网页的结构和内容&#xff0c;这些标签被浏览器解释并渲染成用户看到的网页。HTML是构建We…

从关键词到语义理解:小陌引擎如何重构AI搜索优化逻辑?

引言&#xff1a;AI搜索时代的范式转变在传统互联网时代&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;是企业数字营销的核心策略&#xff0c;通过关键词密度、外链建设等技术手段提升网页在搜索引擎结果页&#xff08;SERP&#xff09;中的排名。然而&#xff0c;随着生…

ADE explorer遇到XVFB服务器的问题

遇到这个报错&#xff0c;是因为服务器没有安装xvfb的原因。yum install Xvfb即可解决问题。

期权的套利怎么理解?

期权套利是利用期权价格之间的不合理偏差&#xff0c;通过构建对冲组合获取无风险利润的策略。其核心逻辑基于“无套利定价原则”——若存在价格偏差&#xff0c;市场力量会迅速修正&#xff0c;套利者通过反向操作锁定利润。期权的套利怎么理解&#xff1f;一、主要套利类型与…

RabbitMQ 重试机制 和 TTL

目录 1. 重试机制 1.1 简介 1.2 配置文件 1.3 消费者确认机制为 auto 时 1.4 消费者确认机制为 manual 时 2. TTL 2.1 设置消息的过期时间 2.2 设置队列的过期时间 2.3 给过期队列中消息设置过期时间 1. 重试机制 1.1 简介 在消息传递过程中, 可能会遇到各种问题, …

四、FVP启动linux

目录 1 实验目的及环境 1.1 实验目的 1.2 实验环境 1.2.1 拉取代码 1.2.2搭建交叉编译环境 2 相关镜像编译 2.1 TF-A镜像编译 2.2 U-Boot镜像编译 2.3 Linux Kernel镜像编译 2.4 构建跟文件系统 3 启动linux内核 3.1 启动脚本构建 3.2 启动Linux内核 1 实验目的及环境 1.1 实验…

浅聊一下微服务的服务保护

在微服务架构里&#xff0c;服务间调用关系错综复杂&#xff0c;一个服务出问题很可能引发连锁反应&#xff0c;也就是 “雪崩”。今天就带大家从零开始学习 Sentinel&#xff0c;这款阿里开源的微服务保护工具&#xff0c;帮你解决雪崩难题&#xff0c;做好流量控制、隔离降级…