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更加灵活开放,可以同时容纳多个字幕,甚至…

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

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

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

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

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

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

“我,月薪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;线下支付&…

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;每一题都有详细的答题思路、详细的代码注释、样例测试…

高效、稳定、兼容:中国星坤MINI PCIE连接器优势明显

电子设备的性能要求日益提高&#xff0c;尤其是在数据传输和连接稳定性方面。中国星坤推出的MINI PCIE连接器&#xff0c;以其出色的性能和显著的优势&#xff0c;迅速成为行业内的佼佼者&#xff0c;为现代电子设备提供了高效、稳定的连接解决方案。 在性能方面&#xff0c;中…

限制登录Linux服务器的几种方式

一.第一种方法 通过修改TCP Wrappers服务访问控制来实现限制登录Linux 1.这里以sshd服务为例&#xff0c;配置完成后&#xff0c;只允许配置允许的IP才能ssh连接本机服务器&#xff0c;其他IP拒绝判断某一个基于tcp协议的服务是否支持tcp_wrapper&#xff0c;要先判断它是否支…

登录页界面设计详细教程:打造令人印象深刻的用户登录体验

我们日常使用的软件都会有注册和登录页&#xff0c;为什么注册登录页面是必不可少的呢&#xff1f;对于企业&#xff0c;目的是将访客转化为产品用户&#xff0c;有助于获得用户画像和各种数据&#xff0c;针对用户的个性化服务进行产品的迭代更新。对于个人&#xff0c;则根据…

鸿蒙应用开发之下拉菜单选择组件

前面学习了搜索框组件,接着下来学习下位菜单选择组件。它实现了一个下拉式的菜单,当用户点击下拉菜单中某一项,就会被选中。 这个组件的界面大体如下: 这个组件可以设置每一项的图标,以及文本显示。由于它是下拉式的菜单,所以候选的内容建议不要太多,否则会滚动比较麻烦…

Redis-键值设计

Redis-键值设计 1.设置key的规范 遵循基本格式&#xff1a;【业务名称】&#xff1a;【数据名】&#xff1a;【id】 可读性强&#xff0c;在客户端的情况下使用:如果前缀相同会分目录层级长度不超过44字节 string数据结构的三种类型&#xff0c;在44字节之内是embstring 内存…

【零基础学数据结构】链表

目录 1.链表的概念 ​编辑 2.链表的雏形 ​编辑 3.链表的组成 ​编辑 4.链表代码 4.1创建节点 4.2链表的打印 4.3链表的尾插 4.4链表的头插 4.5链表的尾删 4.6链表的头删 4.7链表的查找 4.8链表在指定位置之前插⼊数据 4.9链表在指定位置之后插⼊数据 4.9-1删除pos节点 4.9…