HarmonyOS 换肤功能怎么实现？

APP换肤如何实现？。另外整体UI变灰色怎么实现？

HarmonyOS

put_get

2024-09-03 10:56:18

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

目前有两种实现ArkTS 主题切换的方案，一种是基于ArkTS UI界面提供的深浅色模式接口，另一种是创建一个主题类来实现。

深浅色模式目前有以下不足：

1.只支持深浅色两种模式的切换，对于需要多个主题的场景不能满足。

2.image组件（除了svg这种支持.fillColor()的）目前不支持深浅色模式的热加载，想要实现按钮图标的切换可能还是需要使用三元表达式，对于图标多的场景不够方便

优点：系统规范较好

主题类实现深浅色模式有以下不足：

1.重新渲染ui的性能没有保障，还需要测试

2.资源都继承在一个文件里，如果是很大的工程可能比较难管理

3.相关代码规范问题

优点：可以支持多种主题的切换，只需要加切换函数就够了支持按钮图标，图片热加载，支持多种资源根据主题切换，并实时重新渲染在page中引用资源和传统方式的代码量差不多，能比较方便的使用，使用方法简单快捷

参考demo：

Index.ets

import theme from '../pages/theme' 
 
@Entry 
@Component 
struct Index { 
  @State message: string = 'normal mode'; 
  @StorageLink('current mode') current_mode: string = 'normal_mode' 
  @StorageLink('main_theme') theme: theme = new theme(this.current_mode) 
  @StorageLink('gray mode') gray_mode: number = 0; 
  build() { 
    Column() { 
      Row() { 
        Text(this.message) 
          .fontSize(50) 
          .fontColor(this.theme.text_color) 
          .fontWeight(FontWeight.Bold) 
      }.justifyContent(FlexAlign.Center) 
      .width('100%') 
      Row() { 
        Column() { 
          Image(this.theme.phone_icon).objectFit(ImageFit.Contain) 
          Text('电话').fontColor(this.theme.text_color) 
          Image(this.theme.camera_icon).objectFit(ImageFit.Contain) 
          Text('相机').fontColor(this.theme.text_color) 
        }.width('22%').height(90) 
 
      }.width('100%').alignItems(VerticalAlign.Top).height('250vp').justifyContent(FlexAlign.SpaceEvenly) 
 
      Row() { 
        Button('color mode') 
          .width('30%') 
          .fontColor(this.theme.text_color) 
          .onClick(() => { 
          this.message = 'color mode' 
          this.theme.color_mode() 
          this.current_mode = 'color_mode' 
        }) 
        Button('normal mode') 
          .width('30%') 
          .fontColor(this.theme.text_color) 
          .onClick(() => { 
          this.message = 'normal mode' 
          this.theme.normal_mode() 
          this.current_mode = 'normal_mode' 
        }) 
        Button('simple mode') 
          .width('30%') 
          .fontColor(this.theme.text_color) 
          .onClick(() => { 
          this.message = 'simple mode' 
          this.theme.simple_mode() 
          this.current_mode = 'simple_mode' 
        }) 
      }.height(50) 
      .justifyContent(FlexAlign.SpaceAround) 
      .width('100%') 
 
      Image($r('app.media.find_service')).objectFit(ImageFit.Contain).height(200) 
      // 整体UI变灰色 
      Row() { 
        Button('mode off').fontColor(this.theme.text_color).height('30vp').onClick(() => this.gray_mode = 0) 
        Button('mode on').fontColor(this.theme.text_color).height('30vp').onClick(() => this.gray_mode = 1) 
      } 
 
    } 
    .grayscale(this.gray_mode) 
    .height('100%').backgroundColor(this.theme.background_color) 
 
  } 
}

theme.ets

export default class theme { 
  //资源目录，将需要实现主题切换的资源变量存储在这 
  current_mode: string = 'normal_mode' 
  earphone_icon: Resource = $r('app.media.ic_device_earphone_hero_filled') 
  home_icon: Resource = $r('app.media.ic_public_home_filled') 
  picture_icon: Resource = $r('app.media.ic_public_picture_filled') 
  folder_icon: Resource = $r('app.media.ic_public_folder_filled') 
  icon2: Resource = $r('app.media.ic_public_picture') 
  color1: Resource = $r('app.color.red') 
  font_color: Resource = $r('app.color.black') 
  text_color: Resource = $r('app.color.black') 
  background_color: Resource = $r('app.color.white') 
  phone_icon: Resource = $r('app.media.dialer') 
  market_icon: Resource = $r('app.media.shopping') 
  notes_icon: Resource = $r('app.media.notes') 
  setting_icon: Resource = $r('app.media.settings') 
  camera_icon: Resource = $r('app.media.camera') 
  photos_icon: Resource = $r('app.media.gallery') 
  music_icon: Resource = $r('app.media.music') 
  video_icon: Resource = $r('app.media.video') 
 
  //通过读取current mode实现在重启应用后可以保存应用主题数据 
  constructor(current_mode: string) { 
    switch (current_mode) { 
      case 'normal_mode': 
        this.background_color = $r('app.color.background') 
        this.text_color = $r('app.color.brown') 
        this.phone_icon = $r('app.media.dialer') 
        this.market_icon = $r('app.media.shopping') 
        this.notes_icon = $r('app.media.notes') 
        this.setting_icon = $r('app.media.settings') 
        this.camera_icon = $r('app.media.camera') 
        this.photos_icon = $r('app.media.gallery') 
        this.music_icon = $r('app.media.music') 
        this.video_icon = $r('app.media.video') 
        break; 
      case 'color_mode': 
 
        this.background_color = $r('app.color.color_background') 
        this.text_color = $r('app.color.yellow') 
        this.phone_icon = $r('app.media.pwcall') 
        this.market_icon = $r('app.media.pwshop') 
        this.notes_icon = $r('app.media.pwnotes') 
        this.setting_icon = $r('app.media.pwsetting') 
        this.camera_icon = $r('app.media.pwcamera') 
        this.photos_icon = $r('app.media.pwphotos') 
        this.music_icon = $r('app.media.pwmusic') 
        this.video_icon = $r('app.media.pwvideo') 
 
        break; 
      case 'simple_mode': 
        this.background_color = $r('app.color.white') 
        this.text_color = $r('app.color.black') 
        this.phone_icon = $r('app.media.simplicityCall') 
        this.market_icon = $r('app.media.simplicityShop') 
        this.notes_icon = $r('app.media.simplicityNotes') 
        this.setting_icon = $r('app.media.simplicitySetting') 
        this.camera_icon = $r('app.media.simplicityCamera') 
        this.photos_icon = $r('app.media.simplicityPhotos') 
        this.music_icon = $r('app.media.simplicityMusic') 
        this.video_icon = $r('app.media.simplicityVideo') 
        break; 
 
      default: 
        this.current_mode = 'normal_mode' 
        this.background_color = $r('app.color.background') 
        this.text_color = $r('app.color.brown') 
        this.phone_icon = $r('app.media.dialer') 
        this.market_icon = $r('app.media.shopping') 
        this.notes_icon = $r('app.media.notes') 
        this.setting_icon = $r('app.media.settings') 
        this.camera_icon = $r('app.media.camera') 
        this.photos_icon = $r('app.media.gallery') 
        this.music_icon = $r('app.media.music') 
        this.video_icon = $r('app.media.video') 
        break; 
    } 
 
  } 
  //通过不同的主题切换函数更改主题变量，并在外部通过Appstorage实现应用内共享和画面重现渲染 
  light_mode() { 
    this.font_color = $r('app.color.black') 
    this.background_color = $r('app.color.white') 
    this.earphone_icon = $r('app.media.ic_device_earphone_hero_filled') 
    this.home_icon = $r('app.media.ic_public_home_filled') 
    this.picture_icon = $r('app.media.ic_public_picture_filled') 
    this.folder_icon = $r('app.media.ic_public_folder_filled') 
  } 
  dark_mode() { 
    this.font_color = $r('app.color.white') 
    this.background_color = $r('app.color.background') 
    this.earphone_icon = $r('app.media.ic_device_earphone_hero') 
    this.home_icon = $r('app.media.ic_public_home') 
    this.picture_icon = $r('app.media.ic_public_picture') 
    this.folder_icon = $r('app.media.ic_public_folder') 
  } 
  normal_mode() { 
    this.current_mode = 'normal_mode' 
    this.background_color = $r('app.color.background') 
    this.text_color = $r('app.color.brown') 
    this.phone_icon = $r('app.media.dialer') 
    this.market_icon = $r('app.media.shopping') 
    this.notes_icon = $r('app.media.notes') 
    this.setting_icon = $r('app.media.settings') 
    this.camera_icon = $r('app.media.camera') 
    this.photos_icon = $r('app.media.gallery') 
    this.music_icon = $r('app.media.music') 
    this.video_icon = $r('app.media.video') 
  } 
  color_mode() { 
    this.current_mode = 'color_mode' 
    this.background_color = $r('app.color.color_background') 
    this.text_color = $r('app.color.yellow') 
    this.phone_icon = $r('app.media.pwcall') 
    this.market_icon = $r('app.media.pwshop') 
    this.notes_icon = $r('app.media.pwnotes') 
    this.setting_icon = $r('app.media.pwsetting') 
    this.camera_icon = $r('app.media.pwcamera') 
    this.photos_icon = $r('app.media.pwphotos') 
    this.music_icon = $r('app.media.pwmusic') 
    this.video_icon = $r('app.media.pwvideo') 
  } 
  simple_mode() { 
    this.current_mode = 'simple_mode' 
    this.background_color = $r('app.color.white') 
    this.text_color = $r('app.color.black') 
    this.phone_icon = $r('app.media.simplicityCall') 
    this.market_icon = $r('app.media.simplicityShop') 
    this.notes_icon = $r('app.media.simplicityNotes') 
    this.setting_icon = $r('app.media.simplicitySetting') 
    this.camera_icon = $r('app.media.simplicityCamera') 
    this.photos_icon = $r('app.media.simplicityPhotos') 
    this.music_icon = $r('app.media.simplicityMusic') 
    this.video_icon = $r('app.media.simplicityVideo') 
  } 
}

在resource目录下创建了dark/element目录、dark/media目录。

element创建 color.json资源，在 media中存放图片资源。适配手机深色模式。

//整体UI变灰色乱码部分为整体UI变灰色。

2024-09-03 16:56:14

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 换肤功能怎么实现？

订阅鸿蒙技术特刊，精选内容抢先看