# AttributeStyle

**Repository Path**: qincji/AttributeStyle

## Basic Information

- **Project Name**: AttributeStyle
- **Description**: HarmonyOS ArkUI的跨文件、全局公共样式，比Android中的theme.xml和selector更加健全。对Pressed、Disabled、Hovered、Focused、Selected等状态样式设置，更是PC和电视端的福音！
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-04-17
- **Last Updated**: 2025-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AttributeStyle

#### 介绍

HarmonyOS ArkUI的跨文件、全局公共样式，比Android中的theme.xml和selector更加健全。对Pressed、Disabled、Hovered、Focused、Selected等状态样式设置，更是PC和电视端的福音！

> 你还在只会用`@Styles`和`@Extend`吗？落后很多了呀，兄弟！！！这里对`AttributeUpdater`
> 进行扩展，对系统的`Pressed`、`Disabled`、`Hovered`、`Focused`以及自定义`Selected`等进行处理，各种状态样式`可分可合`
> ，把自由组成发挥的淋漓尽致，很大程度减少了重复代码。


![视频](https://gitee.com/qincji/AttributeStyle/raw/master/demo.gif)

实现原理[戳这里](https://developer.huawei.com/consumer/cn/blog/topic/03180525604740074)

#### 安装教程

```
ohpm install @qincji/astyle
```

#### 使用说明

1. 导入相关文件

```
import { SAdapter, xxx } from '@qincji/astyle';
```

2. 在使用页面中创建

**注：以下的xxx是指系统所支持的控件，如：Text、Button、Row等等**

```
首先我们自定义一个样式，实现`SStyle`接口，而且只需实现自己所需要场景的方法即可，如：
```javascript
export class xxxStyle implements SStyle<xxxAttribute> {
    initializeModifier(instance?: xxxAttribute): void {
        instance?.backgroundColor('#FFFFFF').其他xxx属性设置
  }
  //其他状态方法见最下面：SState 和 （SStyle + SIState）对应关系说明
}

private style1 = new SAdapter<xxxAttribute>()
    .addStyle(new xxxStyle())
    .addStyle(new xxxStyle())
    .buildAttribute()
    
//或者 CustomTextAdapter 为SAdapter子类，处理所有状态样式
private style2 = new CustomTextAdapter().buildAttribute()

//或者 单独增加样式，对应SStyle和父类所有的事件
private style7 = new SAdapter<RowAttribute>()
    .addStyle(new ContainStyle())
    .addStyle({
      normalStyle(instance?: RowAttribute | undefined) {
        instance?.backgroundColor('#ff646262')
      }
    })
    .buildAttribute()

//更多使用方式请看demo源码    
```

> 主：相同属性设置后设置覆盖前设置，如.fontSize

3. 使用，每一个对象要一一对应！（全局样式1行代码实现，而且支持所有系统组件）

```
Text('style1 normal & pressed & hover').attributeModifier(this.style1)

Text('style2 CustomTextAdapter').attributeModifier(this.style2)


 Row() {   }.attributeModifier(this.style7)
 
//单例模式构造对象
Text(`Click isShowDemo1: ${this.isShowDemo1}`)
   .attributeModifier(SBuilder.style(this, `id-xxxx`, new TextNormalStyle()))
   //.attributeModifier(SBuilder.styles(this, `id-xxxx`,[new TextNormalStyle(), new TextPressedStyle()]))
//不用在每个类中生成对象，要少维护成本
ForEach(([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]), (item: number) => {
    Text('Demo1 -' + item)
      .attributeModifier(SBuilder.adapter(this, `1demo${item}`, new CustomTextAdapter()))
      .focusable(false)
      .fontSize(18)
  })   
```

##### SState 和 （SStyle + SIState）对应关系说明

| 字段       | 对应关系               | 介绍                       |
|----------|--------------------|--------------------------|
| Init     | initializeModifier | 【系统回调】初始化时（只会触发一次）       |
| Normal   | normalStyle        | 【系统回调】正常                 |
| Pressed  | pressedStyle       | 【系统回调】 按下                |
| Disabled | disabledStyle      | 【系统回调】不可用                |
| Hovered  | hoverStyle         | 【系统回调】鼠标选中状态             |
| Focused  | focusStyle         | 【系统回调】获取焦点               |
| Selected | selectedStyle      | 【主动调用】 选中类型（一般配合popup使用） |
| Error    | errorStyle         | 【主动调用】 错误类型（一般配合input使用） |
| Custom   | customStyle        | 【主动调用】 自定义扩展             |

其中：Selected、Error、Custom为扩展类型，需要自己调用函数触发，如：

```javascript
private
style2 = new CustomTextAdapter().buildAttribute()
//更新状态
this.style2.updateSelect(isAppear)
```

#### 历史更新

1.1.0：
增加SBuilder，用于生成单例模式的AttributeUpdater对象，可不用先声明。


项目地址：https://gitee.com/qincji/AttributeStyle