‌第二课：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}"  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

// 在ArkTS组件中引用  
@Entry  
@Component  
struct HomePage {  
  build() {  
    Column() {  
      Text('全局样式示例')  
        .style($r('app.style.text_title')) // 加载全局样式  
    }  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

‌优势对比‌：

三、局部样式作用域控制

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"  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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  

})