当前位置: 首页 > article >正文

HarmonyOS应用深浅适配

应用深浅色适配

概念

  1. 当系统存在深浅两种显示模式,为提升用户体验,应用适配深浅色模式。从应用与系统配置关联的角度,适配深浅色模式可以分为以下两种情况
    1. 应用跟随系统的深浅色模式
    2. 自定义的深浅色资源

自定义资源实现

  • 在resource目录下增加深色模式限定词目录(命令dark),只有应用存在dark资源文件夹,应用才会被系统识别为存在深色模式

图片资源适配

  • 采用资源限定词目录的方式,参照颜色适配方法,将深色模式下对应的同名(跟浅色适配下同名)放到dark/media中
  • 对于SVG格式的一些简单的图标,可以使用fillColor属性配合系统资源改变图片的绘制颜色

系统默认判断规则

  1. 如果应用工程dark目录下有深色资源,则系统内置组件在深色模式下回自动切换为深色
  2. 如果没有任何深色资源,则系统内置组件在深色模式下保持浅色模式体验

应用主动设置深浅模式

  1. 应用默认配置为跟随系统切换深浅色模式,如果不希望应用跟随系统深浅色模式变化,可主动设置应用的深浅色风格,设置后,应用的深浅色模式固定,不会随着系统改变

样例

跟随系统

  • 在EntryAbility中的onCreat进行设置(前提是resource目录下设置了深色模式下限定词目录
    //主动设置深浅色模式
    /*
     * ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET   跟随系统
     * ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT     浅色模式
     * ConfigurationConstant.ColorMode.COLOR_MODE_dark      深色模式
     * */
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET)

app应用中自定义

  • 前提也是在resource下设置了深色模式下限定词目录
  Button('点击更换app——color模式')
    .onClick(() => {
      this.flg = !this.flg
      if (this.flg) {
          //获取上下文--获取app上上下文--设置模式颜色--配置常量
        getContext(this).getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK)
      } else {
        getContext(this).getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)
      }
    })

http://www.kler.cn/a/516901.html

相关文章:

  • 软件测试 —— jmeter(2)
  • k8s优雅重启
  • 设计模式的艺术-职责链模式
  • 从手动到智能:自动化三维激光扫描
  • JQuery基本介绍和使用方法
  • ubuntu k8s 1.31
  • leetcode 123. 买卖股票的最佳时机 III
  • Grafana
  • 微信小程序中常见的 跳转方式 及其特点的表格总结(wx.navigateTo 适合需要返回上一页的场景)
  • 入门Stable-Diffusion-WebUI全过程
  • USART_串口通讯轮询案例(HAL库实现)
  • SQL-leetcode—1179. 重新格式化部门表
  • Kingbase数据库体系结构和日常运维监控
  • Windows安装Miniconda和PySide6以及配置PyCharm
  • 0基础跟德姆(dom)一起学AI 自然语言处理21-fasttext模型架构
  • OpenVela 架构剖析:从内核到应用
  • 阿里云-银行核心系统转型之业务建模与技术建模
  • 大数据学习(38)- Flink运行时架构
  • ChatGPT大模型极简应用开发-CH4-GPT-4 和 ChatGPT 的高级技巧
  • SQL记录学习日志
  • 我谈《概率论与数理统计》的知识体系
  • python flask中使用or查询和and查询,还有同时使用or、and的情况
  • Vue实现div滚动,并且支持top动态滚动
  • windows修改host上github
  • 考研408笔记之数据结构(五)——图
  • 第04章 02 VTK管道的执行过程与类型