OpenHarmony实战开发-页面深色模式适配。

介绍

本示例介绍在开发应用以适应深色模式时,对于深色和浅色模式的适配方案,采取了多种策略如下:

1. 固定属性适配:对于部分组件的颜色属性,如背景色或字体颜色,若保持不变,可直接设定固定色值或引用固定的资源文件。
2. 双资源目录适配:在resources目录下新增dark子目录,用于存放深色模式下的特定颜色配置(color.json文件)和图片资源(media文件)。在深色模式下,系统会自动加载此目录中的颜色及图片资源,确保与浅色模式下的UI元素色彩差异性。
3. 利用系统分层参数:对于支持深浅模式切换的系统层级颜色资源,我们可以直接引用这些具有分层特性的参数,使得当切换设备主题时,相关组件的颜色能根据系统当前颜色模式自动更新。
4. 监听当前颜色模式变化:通过注册AbilityStage.onConfigurationUpdate事件监听器,实时捕捉到设备深浅颜色模式的变化,并据此动态调整UI布局结构或逻辑处理,以适应不同模式下的最佳视觉体验。

效果图预览

在这里插入图片描述
使用说明

1.在应用主页点击“深色模式”案例,将应用切至后台,系统颜色模式发生改变(如在系统设置中切换深浅色模式),当应用重新被激活至前台时,能够立即检测到系统颜色模式的变化,并自动更新为对应颜色主题的视图界面。

实现思路

1.当UI组件的颜色属性被设置为固定颜色值时,其在深色模式和浅色模式下的显示颜色将保持不变。

// 将Text直接设置成'#000000'固定色值
Text("精品好礼").opacity(0.6).fontColor($r('app.color.black_font_color')).margin({ left: $r('app.integer.text_margin_left') })

2.为了实现深色模式下的颜色适配,可以在resources目录下新建’dark/element’的子目录,并在此目录中创建color.json文件。为深色模式下的各个UI组件指定相应的颜色值,务必确保与浅色模式下同名颜色资源名称一致,以确保系统能够正确识别并切换。

// 用资源ID方式设置Column背景色。(浅色模式色值为'#FA5A3C'、深色模式色值为'#000000')
.backgroundColor($r('app.color.column_bg_color'))

3.若UI组件的颜色属性引用的是系统提供的具有层级参数的颜色资源,则当设备在深色模式和浅色模式间切换时,这些颜色会自动调整至对应模式下的预设色值。

// 用系统提供的分层参数颜色资源方式设置色值 
Text(item.price).fontSize($r('app.integer.goods_font')).offset({ x: -3 })// 因为¥是中文字符,上面的是中文字符,占的宽度不一样,所以需要对齐,添加offset.fontColor($r('sys.color.ohos_id_color_foreground'))

4.对于PNG、WEBP或JPEG格式的图片资源,若需支持深色模式,应在resources目录下新增一个’dark/media’子目录,将深色模式下对应的图片放入此目录,并确保图片文件名与浅色模式下的图片相同,以便系统根据当前模式加载合适的图片资源。

// SVG格式图片fillColor颜色资源ID方式设置(浅色模式色值为'#000000'、深色模式色值为'#FFFFFF')
Image($r('app.media.view')).fillColor($r('app.color.view_fill_color')).width($r('app.integer.view_image_width')).aspectRatio(1).objectFit(ImageFit.Contain)

5.在存在深浅两种模式下布局结构或逻辑处理有所差异的情况时,开发者应当利用AbilityStage.onConfigurationUpdate监听接口来实时感知系统主题的变化,并据此做出相应的布局调整或逻辑处理,从而确保应用能够在不同模式下呈现出理想的界面效果及功能体验。

  • 第一步保存全局参数,并通过onConfigurationUpdate刷新状态栏
// 获取当前的颜色模式并保存并在onConfigurationUpdate
AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode);
// 保存windowStage供fitfordarkmode的har包中FitForDarkPage.ets中setStatusBar方法修改状态栏颜色。
AppStorage.setOrCreate('windowStage', windowStage);// 检测当前的深浅模式是否发生变化,刷新状态栏
onConfigurationUpdate(config: Configuration) {// 获取最新的变更颜色并更新到AppStorageAppStorage.setOrCreate('currentColorMode', config.colorMode);logger.info(`onConfigurationUpdate, config: ${JSON.stringify(config)}`);
}
  • 第二步在FitForDarKMode.ets中获取并监听当前颜色模式
// @StorageProp + @Watch 获取并监听当前颜色模式
@StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = 0;
// @Watch回调函数,监听颜色模式刷新状态变量
onColorModeChange(): void {if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {this.banner = $r("app.media.dark_mode_banner");} else {this.banner = $r("app.media.light_mode_banner");}
}
  • 第三步在FitForDarKMode.ets生命周期aboutToAppear中根据当前颜色模式刷新banner状态变量,切换不同的图片。
// 在自定义组件生命周期aboutToAppear中,根据当前颜色模式刷新banner状态变量,切换不同的图片。
aboutToAppear(): void {if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {this.banner = $r("app.media.dark_mode_banner");
} else {this.banner = $r("app.media.light_mode_banner");// 在当前为浅色模式中,确保界面美观且颜色统一,设置导航栏的背景色。setStatusBar(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);}
}
  • 第四步在FitForDarKMode.ets生命周期aboutToDisappear中,重置导航栏的背景色避免影响其它页面的导航栏为红色。
// 在自定义组件生命周期aboutToDisappear中,重置导航栏的背景色避免影响其它页面的导航栏为红色。
aboutToDisappear(): void {setStatusBar(this.currentMode)
}
  • 第五步在FitForDarKMode.ets生命周期aboutToDisappear中,重置导航栏的背景色避免影响其它页面的导航栏为红色。
// 调用setWindowSystemBarProperties()设置状态栏及导航栏的颜色
windowClass.setWindowSystemBarProperties(sysBarProps, (err) => {if (err.code) {logger.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));return;}logger.info('Succeeded in setting the system bar properties.');
});

高性能知识点

不涉及

工程结构&模块类型

fitfordarkmode                                   // har类型
|---mock
|   |---GoodsMock.ets                            // 商品列表数据 
|---mode
|   |---GoodsModel.ets                           // 商品数据类型定义 
|---view
|   |---FitForDarkMode.ets                       // 深色模式适配主页面 
|   |---GoodsList.ets                            // 商品列表自定义组件 

模块依赖

本实例依赖common模块来实现资源的调用以及公共组件FunctionDescription的引用。 还需要依赖EntryAbility.ets模块。

为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→HarmonyOS教学视频:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等…视频教程

在这里插入图片描述
在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF: 获取完整版白皮书方式请点击→https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG?u=a42c4946d1514235863bb82a7b2ac128

在这里插入图片描述

鸿蒙 (Harmony OS)开发学习手册→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

一、入门必看

1.应用开发导读(ArkTS)
2………
在这里插入图片描述

二、HarmonyOS 概念→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.系统定义
2.技术架构
3.技术特性
4.系统安全
5…

在这里插入图片描述

三、如何快速入门?→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3…

在这里插入图片描述

四、开发基础知识→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
在这里插入图片描述

五、基于ArkTS 开发→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
在这里插入图片描述

更多了解更多鸿蒙开发的相关知识可以参考:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

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

相关文章

Matroska解封装原理与实践

本期作者 背景 Matroska是一种开放标准、功能强大的多媒体封装格式,可容纳多种不同类型的视频、音频及字幕流,其常见的文件扩展名为.mkv、.mka等。与应用广泛的MP4相比,Matroska更加灵活开放,可以同时容纳多个字幕,甚至…

29、Lua中的元表与元方法

Lua中的元表与元方法 前言算术类的元方法__tostring元方法如何保护我们的 "奶酪"——元表__index元方法__newindex元方法 前言 Lua中每个值都可具有元表。 元表是普通的Lua表,定义了原始值在某些特定操作下的行为。你可通过在值的原表中设置特定的字段来…

网络协议之 STP生成树协议学习心得

title: STP生成树协议 tags: internet top: true cover: true stp协议的背景 为了解决单点故障的问题,提出冗余的概念,但是又产生了新的问题————环路 表现形式为: (1)MAC地址表抖动 (2)多帧…

C#引用外部组件的常用方法

我们在开发程序过程中,时常会使用到第三方组件,比如一些通信、UI组件等。常用的引用方法有下面几种。 01 NuGet引用 NuGet是.NET的一个包管理平台,很多开源组件会通过NuGet进行管理和发布。比如我们常用的S7NetPlus等。 从NuGet中引用组件…

零基础学Python专栏文章导航站

零基础学Python专栏文章导航站 专栏导读零基础入门篇 专栏导读 本文是零基础学Python的文章导航站。专栏分为零基础入门篇、模块篇、网络爬虫篇、Web开发篇、办公自动化篇、数据分析篇… 为了方便专栏订阅者更方便的阅读专栏文章,点击链接即可跳转到具体文章&#…

Vue的项目文件夹中的<router>指的是什么

在Vue框架搭建的项目中,前端路由主要指的是基于HTML5的history模式或hash模式来实现在不刷新页面的情况下进行页面之间的跳转。这是单页应用(SPA, Single Page Application)中的一个核心概念。 具体来说,前端路由允许我们在不重新…

FL Studio v21.2.3.4004 中文永久版网盘下载(含Key.reg注册表补丁)

软件介绍 FL Studio21水果编曲软件汉化版是一款专业的音乐制作软件,被广泛地应用于电子音乐、hip-hop、流行乐等多种音乐类型的制作。该软件提供了丰富的音频编曲工具和音乐效果器,让用户可以轻松地创作出高品质的音乐作品。同时,这也是一款…

2. Vue Router4 安装和配置

1. 如何安装 Vue Router4 Vue Router4 可以通过 npm 或者 yarn 这样的包管理器进行安装。以下是安装 Vue Router4 的命令: # 使用 npm 安装 npm install vue-router4# 使用 yarn 安装 yarn add vue-router4这些命令会将 Vue Router4 安装到你的项目中,…

(一)Java八股——Redis

1 Redis缓存 1.1 什么是缓存穿透 ? 怎么解决 ?(穿透) ​ 缓存穿透是指查询一个一定不存在的数据,如果从存储层查不到数据则不写入缓存,这将导致这个不存在的数据每次请求都要到 DB 去查询,可能导致 DB 挂掉。这种情…

“我,月薪4500,副业收入2w”:用Python做副业,到底有多赚钱?

现在在年轻人打工的第一目标是什么? 就是:搞钱!搞钱!搞钱! 但赚钱谈何容易,很多人工作只有一点“死”工资,每月再扣除房租水电、花呗信用卡的钱,能用的钱真的不多了,更…

Linux yum搭建Keepalived,2 台机器都有虚拟 IP 问题

文章目录 Keepalived 搭建一、安装二、keepalived配置1、配置文件详解global_defs模块参数vrrp_instance模块参数vrrp_script模块参数 2、修改配置文件3、启动服务 Tips:1️⃣问题:两台机器上面都有VIP的情况2️⃣完整配置文件 Keepalived 搭建 服务IP服务器Keepal…

van-uploader 在app内嵌的webview中的一些坑

问题: 部分版本在ios 中没有问题,但是安卓中不触发图片选择和拍照(之前是可以的,可能是没有锁定版本,重新发版导致的)。在ios中下拉文案是英文,html配置lang等于 zh 也没有用,ios里…

Linux实现cp指令(4.14)

参数&#xff1a;argc是参数总个数 argv是数组的指针&#xff0c;例如argv[0]是cp&#xff0c;argv[1]是src.c&#xff0c;argv[2]是dec.c。 思路&#xff1a; 打开src.c读src.c到buf打开/创建desc.c将buf写入des.cclose两个文件 #include <sys/types.h> #include <…

有依赖的的动态规划问题

题目 题型分析 这是比较典型的动态规划的问题。动态规划是什么呢&#xff1f;本质上动态规划是对递归的优化。例如&#xff0c;兔子数列&#xff1a;f(x) f(x - 1) f(x -2), 我们知道 f 代表了计算公式&#xff0c;这里解放思想一下&#xff0c;如果 f 替换为数组&#xff0…

信息系统项目管理师——成本管理计算专题(一)

常见考点如下: ①问项目预算、BAC、成本基准、应急储备、管理储备的含义及它们之间的区别 ②给出成本基准和管理储备求项目预算&#xff0c;或者给出预算求成本基准等等 ③看图找 PV、AC、EV、SV、CV、BAC、EAC、ETC等 ④根据题干求项目的PV、AC、EV、SV、CV、BAC、EAC、ETC等 …

k8s高可用集群部署介绍 -- 理论

部署官网参考文档 负载均衡参考 官网两种部署模式拓扑图和介绍 介绍两种高可用模式 堆叠 拓扑图如下&#xff08;图片来自k8s官网&#xff09;&#xff1a; 特点&#xff1a;将etcd数据库作为控制平台的一员&#xff0c;由于etcd的共识算法&#xff0c;所以集群最少为3个&…

产业园区综合计费解决方案/预付费系统/用户侧能源计量及收费/无人值守远程抄表收费

安科瑞薛瑶瑶18701709087 园区管理的难点 ◆计费方式多样&#xff1a;园区类型多样&#xff0c;计费逻辑存在多样&#xff0c;工业电价、商业电价、两部制电价等 ◆缴费方式多样&#xff1a;租户性质不同&#xff0c;存在公对公&#xff0c;私对公&#xff0c;线下支付&…

Spring-AI-上下文记忆

引入依赖 pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/P…

LeetCode 73.矩阵置零————2024 春招冲刺百题计划

给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]] 示例 2&#xff1a; 输入&#xff1a;matrix […

华为OD机试 - 连续天数的最高利润额(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…