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

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  
})