鸿蒙UI开发——使用WidthTheme实现局部深浅色

1、场景描述

在实际的应用开发中,我们可能需要在界面中局部应用深色或者浅色的界面样式,与全局的深色、亮色同时生效。场景例如:深/亮色预览。此时,我们可以使用WithTheme能力来达到我们的效果。

2、WithTheme

WithTheme组件可以用于设置应用局部页面自定义主题风格,可设置子组件深浅色模式和自定义主题配色。其中自定义主题配色我们在之前的文章中已经有过讲解,详见:鸿蒙UI开发——自定义主题色。

WidthTheme接口定义如下:

WithTheme(options: WithThemeOptions)

其中WithThemeOptions定义如下:

struct WidthThemeOptions {/* 用于自定义WithTheme作用域内组件缺省配色。 默认值:undefined,缺省样式跟随系统token默认样式。 */theme: CustomTheme;/*用于指定WithTheme作用域内组件配色深浅色模式。 默认值:ThemeColorMode.System。*/colorMode: ThemeColorMode;}

其中theme我们在之前自定义主题色的文章中已经有介绍,不再赘述,详见鸿蒙UI开发——自定义主题色。其中colorMode是深浅色的配置,其值是一个枚举,定义如下:​​​​​​​

SYSTEM // 跟随系统深浅色模式。LIGHT // 固定使用浅色模式。DARK // 固定使用深色模式。

需要注意:

WidthTheme不支持通用属性(例如:长/宽/背景色等)与通用事件(例如:点击、触摸、拖拽等)的设置。

3、使用示例

在WithTheme的作用范围内,组件的样式资源值会根据指定的模式,读取对应的深浅色模式系统和应用资源值。这意味着,在WithTheme作用范围内,组件的配色会根据所指定的深浅模式进行调整。

通过WithTheme({ colorMode: ThemeColorMode.DARK }),可以将作用范围内的组件设置为深色模式。

设置局部深浅色时,需要添加dark.json资源文件,深浅色模式才会生效。添加位置为:resources -> dark -> element -> dark.json(如果没有对应的文件或者文件夹,自己手动创建即可),示意图如下:

图片

dark.json具体的示例代码如下:​​​​​​​

  {    "color": [      {        "name": "start_window_background",        "value": "#FFFFFF"      }    ]  }

使用WidthTheme的示例如下(我们可以在Page中局部生效深色和亮色模式,代码见 18行、33行):​​​​​​​

// 指定局部深浅色模式@Entry@Componentstruct Index {  build() {    Column() {    // 系统默认      Column() {        Text('无WithTheme')          .fontSize(40)          .fontWeight(FontWeight.Bold)      }      .justifyContent(FlexAlign.Center)      .width('100%')      .height('33%')      .backgroundColor($r('sys.color.background_primary'))      // 设置组件为深色模式      WithTheme({ colorMode: ThemeColorMode.DARK }) {        Column() {          Text('WithTheme')            .fontSize(40)            .fontWeight(FontWeight.Bold)          Text('DARK')            .fontSize(40)            .fontWeight(FontWeight.Bold)        }        .justifyContent(FlexAlign.Center)        .width('100%')        .height('33%')        .backgroundColor($r('sys.color.background_primary'))      }      // 设置组件为浅色模式      WithTheme({ colorMode: ThemeColorMode.LIGHT }) {        Column() {          Text('WithTheme')            .fontSize(40)            .fontWeight(FontWeight.Bold)          Text('LIGHT')            .fontSize(40)            .fontWeight(FontWeight.Bold)        }        .justifyContent(FlexAlign.Center)        .width('100%')        .height('33%')        .backgroundColor($r('sys.color.background_primary'))      }    }    .height('100%')    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.END, SafeAreaEdge.BOTTOM, SafeAreaEdge.START])  }}

效果如下(在同一个Page中,我们默认的样式为亮色,中间局部实现了深色模式渲染):

图片

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

20241231取消掉夸克浏览器为默认浏览器

20241231取消掉夸克浏览器为默认浏览器 2024/12/31 17:59 因为有些资源必须用夸克网盘下载!^_ 地区特色问题。对于百度网盘,如果你分享BBC的纪录片合集,马上给你无效掉!^_ 但是夸克有一点夜郎自大了,把客户的默认浏览器…

详细教程:SQL2008数据库备份与还原全流程!

数据的安全性至关重要,无论是操作系统、重要文件、磁盘存储,还是企业数据库,备份都是保障其安全和完整性的关键手段。拥有备份意味着即使发生误删、系统崩溃或病毒攻击等问题,也能迅速通过恢复功能解决,避免数据丢失带…

一、Hadoop概述

文章目录 一、Hadoop是什么二、Hadoop发展历史三、Hadoop三大发行版本1. Apache Hadoop2. Cloudera Hadoop3. Hortonworks Hadoop 四、Hadoop优势1. 高可靠性2. 高扩展性3. 高效性4. 高容错性 五、Hadoop 组成1. Hadoop1.x、2.x、3.x区别2. HDFS 架构概述3. YARN 架构概述4. Ma…

docker-开源nocodb,使用已有数据库

使用已有数据库 创建本地数据库 数据库:nocodb 用户:nocodb 密码:xxxxxx修改docker-compose.yml 默认网关的 IP 地址是 172.17.0.1(适用于 bridge 网络模式)version: "2.1" services:nocodb:environment:…

BetterBench的2024年终总结

回忆录 去年的年末定的2024目标是阅读300篇文献,发表一篇小论文,阅读20本的目标,都没有如期完成。只读了130篇论文,小论文还只写了初稿,还没有投出去,只读了6本书,上半年很浮躁,都没…

编辑音频的基本属性

导入音频 “文件-导入-选择音频”拖到音频轨道创建序列。选择音频,在效果空间可以看到音频的基本属性。 音量的设置 “效果工作区-效果控件-音量”在这里可以控制所有引导的混合音量 静音 静止所有声音 音频仪表 一般位于时间轴的后面,找不到可以…

SQL 基础教程 - SQL SELECT 语句

SQL SELECT DISTINCT 语句 SELECT DISTINCT 语句用于返回唯一不同的值。 在表中,一个列可能会包含多个重复值,有时您也许希望仅仅列出不同(distinct)的值。 DISTINCT 关键词用于返回唯一不同的值。 SQL SELECT DISTINCT 语法 …

Oracle 回归分析函数使用

Oracle 回归分析函数使用 文章目录 Oracle 回归分析函数使用什么是 回归分析函数回归分析函数示例1. 分析 SAL 和 COMM 之间的回归关系2. 按部门分析 SAL 和 COMM 的关系3. 根据 SAL 预测 COMM4. 分析员工薪资与工作年限的关5. 按部门分析工作年限与薪资的关系6. 计算 REGR_AVG…

idea项目导入gitee 码云

1、安装gitee插件 IDEA 码云插件已由 gitosc 更名为 gitee。 1 在码云平台帮助文档http://git.mydoc.io/?t153739上介绍的很清楚,推荐前两种方法, 搜索码云插件的时候记得名字是gitee,gitosc已经搜不到了。 2、使用码云托管项目 如果之…

Cesium 实战 27 - 三维视频融合(视频投影)

Cesium 实战 27 - 三维视频融合(视频投影) 核心代码完整代码在线示例在 Cesium 中有几种展示视频的方式,比如墙体使用视频材质,还有地面多边形使用视频材质,都可以实现视频功能。 但是随着摄像头和无人机的流行,需要视频和场景深度融合,简单的实现方式则不能满足需求。…

spring boot的各个版本介绍

Spring Boot 是一个用于创建独立、生产级别的基于 Spring 的应用程序的框架。自2014年首次发布以来,Spring Boot 经历了多个版本的迭代,每个版本都带来了新特性、性能改进和错误修复。下面是对Spring Boot一些主要版本的简要介绍: Spring Boo…

基于zynq在linux下的HDMI实战

ZYNQ系列文章目录 第一章:基于zynq在linux下的phy调试记录 第二章:qemu制作ubuntu文件系统 第三章:基于zynq在linux下的AXI-CAN实战 第四章:基于zynq在linux下的HDMI实战 文章目录 ZYNQ系列文章目录前言一、vivado中HDMI的配置1.…

LabVIEW 实现自动对焦的开发

自动对焦(Autofocus, AF)技术是通过分析图像或传感器信号,动态调整焦点位置以实现清晰成像或高精度定位的过程。在LabVIEW中,可以通过集成信号采集、数据处理、控制算法和硬件接口模块,实现多种自动对焦方法&#xff0…

机器人C++开源库The Robotics Library (RL)使用手册(四)

建立自己的机器人3D模型和运动学模型 这里以国产机器人天机TR8为例,使用最普遍的DH运动学模型,结合RL所需的描述文件,进行生成。 最终,需要的有两个文件,一个是.wrl三维模型描述文件;一个是.xml运动学模型描述文件。 1、通过STEP/STP三维文件生成wrl三维文件 机器人的…

直播电商系统源码搭建实战:快速开发多商户带货APP的指南

今天,笔者将从源码选择、功能设计、开发流程等方面,带你了解如何快速开发一个高效实用的直播电商系统。 一、明确需求:功能设计是基础 以下是一个多商户直播电商系统的核心功能模块: -商户管理模块 -直播带货模块 -商品管理模…

风力涡轮机缺陷检测数据集,86.6%准确识别率,11921张图片,支持yolo,PASICAL VOC XML,COCO JSON格式的标注

风力涡轮机缺陷检测数据集,86.6%准确识别率,11921张图片,支持yolo,PASICAL VOC XML,COCO JSON格式的标注 数据集下载 yolov11: https://download.csdn.net/download/pbymw8iwm/90206849 yolov…

委外加工业务如何调整原材料的消耗-MIGO A11-后续调整

业务背景:用户反馈委外加工业务回收后,产品已经销售,但委外加工结算时要对原材料消耗时行调整。如果没有销售,准备采用收货冲销后重新收货,但现在已经是2024年最后一天了。。。销售业务已经做完。不可能再冲销。其实这…

ultralytics库RT-DETR代码解析

最近读了maskformer以及maskdino的分割头设计,于是想在RT-DETR上做一个分割的改动,所以选择在ultralytics库中对RTDETR进行改进。 本文内容简介: 1.ultralytics库中RT-DETR模型解析 2. 对ultralytics库中的RT-DETR模型增加分割头做实例分割 …

25. C++继承 1 (继承的概念与基础使用, 继承的复制兼容规则,继承的作用域)

⭐上篇模板文章:24. C模板 2 (非类型模板参数,模板的特化与模板的分离编译)-CSDN博客 ⭐本篇代码:c学习 橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) ⭐标⭐是比较重要的部分 目录 一. 继承的基础使用 1.1 继承的格式 1.2 …

宽带、光猫、路由器、WiFi、光纤之间的关系

1、宽带(Broadband) 1.1 宽带的定义宽带指的是一种高速互联网接入技术,通常包括ADSL、光纤、4G/5G等不同类型的接入方式。宽带的关键特点是能够提供较高的数据传输速率,使得用户可以享受到稳定的上网体验。 1.2 宽带的作用宽带是…