在鸿蒙HarmonyOS 5中使用CodeGenie完成一个QQ音乐的主题切换-CSDN博客

本文链接：https://blog.csdn.net/weixin_63947094/article/details/148764172

功能概述

开发一个类似QQ音乐的主题切换功能，包括：

多种预设主题（白天/夜间/炫彩等）
主题颜色动态应用到整个应用
用户自定义主题颜色
主题状态持久化存储

实现步骤

1. 创建主题管理类

// CodeGenie可帮助生成主题管理基础代码
class ThemeManager {
  // 预设主题
  private static themes: Map<string, Theme> = new Map([
    ['light', { primary: '#31C27C', secondary: '#FFFFFF', text: '#000000' }],
    ['dark', { primary: '#2E2E2E', secondary: '#1E1E1E', text: '#FFFFFF' }],
    ['vibrant', { primary: '#FF5A5F', secondary: '#484848', text: '#FFFFFF' }]
  ])
  
  // 当前主题
  @State currentTheme: Theme = ThemeManager.themes.get('light')!
  
  // 切换主题
  setTheme(themeName: string) {
    if (ThemeManager.themes.has(themeName)) {
      this.currentTheme = ThemeManager.themes.get(themeName)!
      this.saveTheme(themeName)
    }
  }
  
  // 自定义主题
  setCustomTheme(primary: string, secondary: string, text: string) {
    this.currentTheme = { primary, secondary, text }
    this.saveTheme('custom')
  }
  
  // 持久化存储（CodeGenie可自动生成持久化代码）
  private saveTheme(themeName: string) {
    // 使用Preferences存储
  }
  
  // 初始化加载主题
  async loadTheme() {
    // 从Preferences加载
  }
}

2. 创建主题上下文（使用CodeGenie快速生成）

// CodeGenie指令
创建ThemeContext全局状态管理
包含主题颜色和切换方法
使用@Provide/@Consume实现跨组件共享

生成代码示例：

@Provide('themeContext')
class ThemeContext {
  @State currentTheme: Theme = defaultTheme
  
  updateTheme(newTheme: Theme) {
    this.currentTheme = newTheme
  }
}

3. 主题应用组件

// 主题应用高阶组件（CodeGenie可自动包装）
@Component
struct ThemeApplier {
  @Consume('themeContext') themeContext: ThemeContext
  
  build() {
    Column() {
      // 子组件内容
      $content()
    }
    .backgroundColor(this.themeContext.currentTheme.secondary)
  }
}

4. 主题切换界面

// CodeGenie可帮助生成主题选择UI
@Component
struct ThemeSelector {
  @Consume('themeContext') themeContext: ThemeContext
  
  build() {
    Grid() {
      GridItem() {
        Column() {
          // 白天主题预览
          Rect().width(60).height(60).backgroundColor('#31C27C')
          Text('白天模式')
        }.onClick(() => this.themeContext.updateTheme(lightTheme))
      }
      
      GridItem() {
        Column() {
          // 夜间主题预览
          Rect().width(60).height(60).backgroundColor('#2E2E2E')
          Text('夜间模式')
        }.onClick(() => this.themeContext.updateTheme(darkTheme))
      }
      
      // 更多主题...
    }
    .columnsGap(20)
    .rowsGap(20)
  }
}

5. 颜色选择器（自定义主题）

// CodeGenie可帮助集成颜色选择器
@Component
struct ColorPicker {
  @State selectedColor: string = '#31C27C'
  @Consume('themeContext') themeContext: ThemeContext
  
  build() {
    Column() {
      // 主色选择
      Text('选择主色调')
      ColorPickerDialog({
        color: this.selectedColor,
        onAccept: (color: string) => {
          this.selectedColor = color
          this.themeContext.updateTheme({
            ...this.themeContext.currentTheme,
            primary: color
          })
        }
      })
      
      // 可添加次色调和文字颜色选择...
    }
  }
}

6. 主题应用到所有组件

在需要使用主题的组件中：

@Component
struct PlayerComponent {
  @Consume('themeContext') themeContext: ThemeContext
  
  build() {
    Column() {
      // 播放器界面
      Text('歌曲名称')
        .fontColor(this.themeContext.currentTheme.text)
      
      // 进度条
      Slider({ style: SliderStyle.OutSet })
        .selectedColor(this.themeContext.currentTheme.primary)
    }
    .backgroundColor(this.themeContext.currentTheme.secondary)
  }
}