【HarmonyOS开发】ArkTs实现应用配色随系统深浅模式自动切换的三种方式

图片

应用深浅配色模式是一种常见的系统外观选项,环境变暗时切换到深色模式,可以减轻眼睛疲劳和节省设备电量。

注意:DevEco Studio 4.0版本存在bug,无法生效。

1、实现思路

  • 利用系统颜色资源:这种方法最简单,只需要在应用中引用系统提供的颜色资源,例如ohos_id_color_tertiaryohos_id_color_primary等,就可以让应用自动跟随系统的颜色设置变化。

  • 使用限定词目录:这种方法稍微复杂一些,需要在应用中创建不同的限定词目录,例如resources/darkresources/light等,来表示不同的应用场景,然后在每个目录下定义不同资源,来适配不同的模式。最后,在应用中只需要引用这些资源的名称,而不需要指定具体的目录,系统会根据当前的模式自动选择合适的资源。

  • 订阅系统环境变量变化:这种方法最灵活,但也最复杂。它需要在应用中监听系统环境变量的变化,并在变化发生时调用相应的函数来处理。这样,可以在函数中实现任何想要的逻辑,来改变应用外观。

 2、使用系统颜色资源

OpenHarmony提供了一套系统资源供开发者直接使用。如果在UI组件中指定颜色属性为系统颜色ID,那么应用就可以自动适配系统深/浅模式,无需额外的工作。

开发者可以使用“$r('sys.type.resource_id')”语法来引用系统资源。其中,sys表示这是一个系统资源,type表示资源的类型,可以是“color”、“string”、“media”等,resource_id表示资源的ID,例如“ohos_id_color_background”、“ohos_id_color_primary”等。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          // 引入系统资源颜色设置文字颜色
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
      }
      .width('100%')
    }
    // 引入系统资源颜色设置应用背景颜色
    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
    .height('100%')
  }
}

3、使用限定词目录

为了让应用能够适配系统的深浅模式,我们可以创建一个特殊的Color Mode类型资源目录resources/dark,来存放适用于深色模式的资源。当系统处于深色模式时,应用就会优先读取这个目录下的资源。如果没有找到对应的资源,应用会使用默认的resources/base目录下的资源。

创建资源目录

图片

新增的resources/dark/element目录,创建color.json文件。新建颜色ID并赋予具体色值,bg_color为黑色,txt_color为白色。

{
  "color": [
    {
      "name": "bg_color",
      "value": "#000000"
    },
    {
      "name": "txt_color",
      "value": "#c6c6c6"
    }
  ]
}

在resources/base/element/color.json,同样创建这两个颜色ID并赋予不同的色值,bg_color为白色,txt_color为黑色。


{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "bg_color",
      "value": "#f1f3f5"
    },
    {
      "name": "txt_color",
      "value": "#121212"
    }
  ]
}

设置组件属性为我们创建的颜色ID,此时,我们的应用在深色模式下取用ID在dark目录下对应的色值,其他情况下会使用base目录下对应的色值。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.txt_color'))
      }
      .width('100%')
    }
    .backgroundColor($r('app.color.bg_color'))
    .height('100%')
  }
}

4、订阅系统环境变量的变化

系统配置更新时会调用onConfigurationUpdate,我们可以获取系统配置信息中ColorMode(系统深浅模式)属性,再使用AppStorage存储系统深浅模式状态, 使用@StorageProp建立AppStorage和自定义组件的单向数据同步,通过@Watch监听状态变量变化并创建回调方法,在状态变量改变时修改颜色变量值,从而实现应用配色随系统深浅模式自动切换。

  • 在AbilityStage的onCreate()生命周期中获取当前的颜色模式并保存到AppStorage

    // EntryAbility.ts入口文件中保存状态 
    onCreate(want, launchParam) {
        AppStorage.SetOrCreate('currentColorMode', this.context.config.colorMode);
     }
  • 在AbilityStage的onConfigurationUpdate()生命周期中获取最新变更的颜色模式并刷新到AppStorage

    // EntryAbility.ts入口文件中获取环境变化,修改状态
    onConfigurationUpdate(newConfig: Configuration): void {
        AppStorage.SetOrCreate('currentColorMode', newConfig.colorMode);
    }
  • 在UI Page中通过@StorageProp + @Watch方式获取当前最新深浅模式并监听设备深浅模式变化

    @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number
  • 创建UI状态变量,设置组件颜色属性为该状态变量

    @State color_txt: string = ''
      @State color_bg: string = ''
    
      build() {
        Row() {
          Column() {
            Text(this.message)
              .fontSize(50)
              .fontWeight(FontWeight.Bold)
              .fontColor(this.color_txt)
          }
          .width('100%')
        }
        .height('100%')
        .backgroundColor(this.color_bg)
    }
  • 在@Watch回调函数中执行自定义的适配逻辑

    onColorModeChange(): void {
        if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
          this.color_txt = '#121212'
          this.color_bg = '#f1f3f5'
        } else {
          this.color_txt = '#c6c6c6'
          this.color_bg = '#000000'
        }
    }
  • @Watch装饰器装饰的方法,在第一次初始化的时候不会被调用。只有在后续状态改变时,才会调用@Watch回调方法。所以在第一次初始化时需要根据currentMode的值做一次逻辑适配,具体内容与onColorModeChange保持一致

    aboutToAppear() {
        if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
          this.color_txt = '#121212'
          this.color_bg = '#f1f3f5'
        } else {
          this.color_txt = '#c6c6c6'
          this.color_bg = '#000000'
        }
    }

5、完整代码

5.1 EntryAbility.ts

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import { Configuration } from '@ohos.app.ability.Configuration';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    AppStorage.SetOrCreate('currentColorMode', this.context.config.colorMode);
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/Index', (err, data) => {
    });
  }

  onConfigurationUpdate(newConfig: Configuration): void {
    AppStorage.SetOrCreate('currentColorMode', newConfig.colorMode);
  }
}

5.2 index.ets


import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State color_txt: string = ''
  @State color_bg: string = ''
  @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = 1;

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor(this.color_txt)
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(this.color_bg)
  }

  aboutToAppear() {
    if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
      this.color_txt = '#121212'
      this.color_bg = '#f1f3f5'
    } else {
      this.color_txt = '#c6c6c6'
      this.color_bg = '#000000'
    }
  }

  onColorModeChange(): void {
    if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
      this.color_txt = '#121212'
      this.color_bg = '#f1f3f5'
    } else {
      this.color_txt = '#c6c6c6'
      this.color_bg = '#000000'
    }
  }
}

6、扩展:自定义实现切换主题

6.1 配置Theme,抛出改变主题的方法

export namespace theme {
  declare type THEME = Resource | string | Color;

  export interface Theme {
    BG_COLOR: THEME;
    Text_COLOR: THEME;
    Text_BG: THEME;
  }

  class LightTheme implements Theme {
    BG_COLOR = "#eeeeee";
    Text_COLOR = Color.Black;
    Text_BG = Color.Blue;
  }

  class NightTheme implements Theme {
    BG_COLOR = "#111111";
    Text_COLOR = Color.White;
    Text_BG = Color.Orange;
  }

  export function getTheme(theme: number): Theme {
    let key = "app_global_theme_" + theme;
    let cachedTheme = AppStorage.Get<any>(key)
    if (!cachedTheme) {
      cachedTheme = (0 == theme ? new LightTheme() : new NightTheme());

      AppStorage.SetOrCreate<any>(key, cachedTheme)
    }
    return cachedTheme as Theme;
  }
}

6.2 通过传入主题状态改变显示

import { theme } from './theme'
@Entry 
@Component 
struct ArkUITools {
  @State theme: number = 0;
  build() {
     Column() {
        Button("切换主题") 
          .fontSize(18)
          .margin(24)
          .fontWeight(FontWeight.Bold)
          .backgroundColor(theme.getTheme(this.theme).Text_BG)
          .onClick(() => {
            this.theme = 0 == this.theme ? 1 : 0;
          })
      }
  }
}

  • 20
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: Matlab可以使用colormap函数自动为画多条曲线时进行配色,具体步骤如下: 1.准备数据。首先需要准备好多条曲线的x坐标和y坐标数据。 2.设置颜色。使用colormap函数设置配色方案,常见的配色方案有jet、hsv、hot等多种。例如,使用jet配色方案可以用以下代码实现: colormap(jet(numlines)); 其中numlines表示需要绘制的曲线数量。使用这个函数可以自动进行配色,避免了手动选择颜色的麻烦。 3.绘制曲线。调用plot函数就可以绘制曲线了。例如,绘制一条由x和y数据组成的曲线可以用以下代码实现: plot(x,y,'LineWidth',2); 其中'LineWidth',2表示曲线的宽度为2。 通过以上三步,就可以用Matlab轻松实现多曲线配色并绘制。 ### 回答2: 在Matlab中,我们可以通过一些技巧和命令来为多曲线自动配色。这样可以使绘图更加美观和规范化,提高绘图效率。 一种常用的方法是使用colormap函数。colormap函数可以将一系列颜色映射到一个色标上,并可以在这个色标上进行插值操作,从而实现自动配色的功能。在绘制多条曲线时,我们可以使用不同的线条样式来表示不同的曲线,但颜色需要自动分配。 这里有一个简单的代码实例,使用colormap函数为多曲线自动设置颜色: ```matlab x = linspace(0,10); y1 = sin(x); y2 = cos(x); y3 = 2*cos(x)+1; cmap = colormap(parula(3)); % 获取3种颜色并赋值给cmap plot(x,y1,'linewidth',1.5,'color',cmap(1,:)); hold on; plot(x,y2,'linewidth',1.5,'color',cmap(2,:)); plot(x,y3,'linewidth',1.5,'color',cmap(3,:)); legend('sin','cos','2cos+1'); ``` 在这个例子中,我们首先使用linspace函数生成一个x轴向量,然后分别计算三条曲线的y轴向量。接着,我们调用colormap函数获取三种颜色,并将它们保存在变量cmap中。最后,我们使用plot函数绘制三条曲线,每条曲线使用不同的颜色。 需要注意的是,我们需要在每个plot命令中添加'color'参数,并在该参数中使用cmap变量的相应索引。这样,我们就可以将颜色和曲线一一对应,并且颜色自动分配,无需手动输入。 除了colormap函数,我们还可以使用其他绘图函数和命令来实现自动配色。如使用jet函数获取颜色映射,并将其分配给多个线条的颜色属性。无论是哪种方法,都可以让我们更加方便快捷地绘制多条曲线。 ### 回答3: MATLAB画多曲线时,自动配色可让用户更方便地区分每条曲线。下面将介绍如何实现自动配色功能。 MATLAB中有一个预定义的颜色序列,可以使用命令“get(gca,'ColorOrder')”查看当前颜色序列。该命令的输出结果为n×3的矩阵,其中n表示颜色个数,3表示RGB颜色值。 为了实现自动配色,我们可以在绘制多条曲线时直接调用颜色序列中的颜色,代码如下: ``` x = 0:0.1:2*pi; y1 = sin(x); y2 = cos(x); figure; plot(x, y1, 'linewidth', 2); hold on; plot(x, y2, 'linewidth', 2); set(gca, 'ColorOrderIndex', 1); ``` 在上面的代码中,“set(gca, 'ColorOrderIndex', 1)”表示让下一条曲线从颜色序列的第一个颜色开始绘制。 如果要画更多的曲线,可以继续调用“plot”命令,并让颜色序列的索引值递增,代码如下: ``` x = 0:0.1:2*pi; y1 = sin(x); y2 = cos(x); y3 = tan(x); figure; plot(x, y1, 'linewidth', 2); hold on; plot(x, y2, 'linewidth', 2); plot(x, y3, 'linewidth', 2); set(gca, 'ColorOrderIndex', 1); ``` 在上面的代码中,“plot”命令会依次使用颜色序列中的颜色,我们只需要让“ColorOrderIndex”自动递增即可实现自动配色。 需要注意的是,颜色序列的长度有限,如果要画的曲线数量超过颜色序列的长度,颜色就会从头开始重复使用。为了避免这种情况,可以使用更多的颜色序列,命令如下: ``` cmap = colormap(lines(7)); set(gca, 'ColorOrder', cmap); ``` 在上面的代码中,“colormap”命令用于定义新的颜色序列,这里使用了7种颜色。“set(gca, 'ColorOrder', cmap)”则是将颜色序列设置为新的序列。 通过上述方法,我们可以在MATLAB中快速画出多条曲线,并使用自动配色功能使不同曲线之间更容易区分。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兵腾傲宇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值