‌第二课：HarmonyOS Next样式与主题开发指南

一、样式系统架构解析

HarmonyOS Next的样式系统基于‌原子化设计理念‌，通过层级化配置实现高效样式管理

全局样式 → 组件局部样式 → 内联样式（优先级递增）

二、全局样式定义与复用

1. ‌资源文件标准化定义‌

在resources/base/element目录创建样式文件：

// color.json  
{  
  "color_primary": "#2196F3",  
  "text_dark": "#333333"  
}  

// style.json  
{  
  "text_title": {  
    "fontSize": 20,  
    "fontWeight": "500",  
    "fontColor": "{color.text_dark}"  
  }  
}  

2. ‌全局样式跨组件调用‌

// 在ArkTS组件中引用  
@Entry  
@Component  
struct HomePage {  
  build() {  
    Column() {  
      Text('全局样式示例')  
        .style($r('app.style.text_title')) // 加载全局样式  
    }  
  }  
}  

‌优势对比‌： 样式类型 复用性 维护成本 适用场景 全局样式 ★★★★☆ 低 品牌色/通用字体 局部样式 ★★☆☆☆ 中 特定模块统一样式 内联样式 ★☆☆☆☆ 高 快速调试/特殊UI

三、局部样式作用域控制

1. ‌组件级样式封装‌

@Component  
struct CustomButton {  
  @Styles buttonStyle() {  
    .width(120)  
    .height(40)  
    .backgroundColor($r('app.color.color_primary'))  
  }  

  build() {  
    Button('提交')  
      .style(this.buttonStyle) // 仅限当前组件使用  
  }  
}  

2. ‌样式继承与覆盖‌

// 继承全局样式并扩展  
Text('特殊标题')  
  .style([$r('app.style.text_title'), {  
    textShadow: '2px 2px 4px rgba(0,0,0,0.2)'  
  }])  

四、主题切换与动态样式

1. ‌双主题配置文件‌

// resources/theme/light.json  
{  
  "background": "#FFFFFF",  
  "text_primary": "#333333"  
}  

// resources/theme/dark.json  
{  
  "background": "#1A1A1A",  
  "text_primary": "#E6E6E6"  
}  

2. ‌运行时主题切换‌

// 主题状态管理  
@State currentTheme: Resource = $r('app.theme.light');  

build() {  
  Column() {  
    Button('切换主题')  
      .onClick(() => {  
        this.currentTheme = (this.currentTheme.id === 'light')   
          ? $r('app.theme.dark')   
          : $r('app.theme.light');  
      })  
  }  
  .backgroundColor(this.currentTheme.background)  
}  
 

3. ‌动态响应式样式‌

@State isActive: boolean = false;  

Text('动态样式文本')  
  .fontColor(this.isActive ? Color.Red : Color.Black)  
  .onClick(() => { this.isActive = !this.isActive })  

‌自适应系统深色模式‌：

// 监听系统主题变化  
import theme from '@ohos.theme';  

theme.on('themeChange', (newTheme) => {  
  this.currentTheme = newTheme === 'dark'   
    ? $r('app.theme.dark')   
    : $r('app.theme.light');  
});  

五、开发效率提升技巧

1. ‌DevEco Studio主题调试器‌

‌实时主题预览‌：Tools → Theme Preview ‌样式热重载‌：修改样式文件后自动刷新设备效果

2. ‌样式代码片段库‌

// 输入 "shadow" 生成阴影模板  
.shadow({  
  radius: 8,  
  color: '#40000000',  
  offsetX: 2,  
  offsetY: 4  
})