ArkTS中如何自定义组件和复用统一样式

在鸿蒙的 **ArkTS** 中，**自定义组件**和**统一声明样式**可以通过以下方式实现：

### 一、自定义组件
1. **基本结构**
   使用 `@Component` 装饰器定义组件，并在 `build` 方法中返回 UI 结构：
   ```JavaScript
   @Component
   struct MyButton {
     // 可定义组件属性
     private text: string = 'Click Me'

build() {
       Column() {
         Button(this.text)
           .onClick(() => {
             console.log('Button clicked!')
           })
       }
     }
   }
```

**使用组件**：
   ```JavaScript
   MyButton() // 直接通过组件名调用
   ```

2. **添加动态属性**  
   通过 `@Prop` 或 `@Link` 装饰器接收父组件传递的变量：
   ```JavaScript
   @Component
   struct MyButton {
     @Prop text: string // 父组件传递的文本

build() {
       Button(this.text)
     }
   }
```

---

### 二、统一样式声明
#### 1. 使用 `@Styles` 装饰器
定义可复用的内联样式块，支持 **全局样式** 或 **组件私有样式**。

- **全局样式**（定义在组件外，任意组件可调用）：
  ```JavaScript
  @Styles function globalFancyStyle() {
    .width(100)
    .height(40)
    .backgroundColor('#007DFF')
    .borderRadius(8)
  }

@Component
  struct MyComponent {
    build() {
      Button('Submit')
        .globalFancyStyle() // 应用全局样式
    }
  }
  ```

- **组件私有样式**（定义在组件内）：
  ```JavaScript
  @Component
  struct MyComponent {
    @Styles fancyText() {
      .fontColor('#FF9900')
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
    }

build() {
      Text('Hello')
        .fancyText() // 调用私有样式
    }
  }
  ```

#### 2. 使用 `@Extend` 扩展内置组件
为系统组件（如 `Text`、`Button`）定义全局统一的扩展样式：
```typescript
@Extend(Text) function titleStyle() {
  .fontSize(24)
  .fontColor('#333333')
  .margin({ bottom: 10 })
}

// 在组件中使用
Text('标题')
  .titleStyle() // 所有标题统一风格
```

#### 3. 定义样式常量+链式调用
通过抽取样式属性到常量对象，实现逻辑与样式的解耦：
```JavaScript
// 定义样式常量
const ThemeStyles = {
  mainColor: '#007DFF',
  text: {
    normal: {
      fontSize: 16,
      fontColor: '#666666'
    },
    title: {
      fontSize: 24,
      fontColor: '#333333'
    }
  }
}

// 在组件中应用
Text('正文内容')
  .fontSize(ThemeStyles.text.normal.fontSize)
  .fontColor(ThemeStyles.text.normal.fontColor)
```

---

### 三、结合 `@Builder` 实现复杂样式复用
通过 `@Builder` 定义更复杂的 UI 片段，并复用它：
```JavaScript
@Builder function FancyCard(title: string, content: string) {
  Column() {
    Text(title)
      .titleStyle() // 复用 @Extend 的标题样式
    Text(content)
      .fontSize(16)
      .padding(10)
      .backgroundColor('#F5F5F5')
  }
  .padding(20)
  .borderRadius(12)
}

// 调用
FancyCard('标题', '这里是卡片内容')
```

---

### 四、使用主题配置全局变量
在 `App.ets` 或全局文件中定义主题变量，实现全局样式管理：
```JavaScript
export class AppTheme {
  static readonly COLOR_PRIMARY: string = '#007DFF'
  static readonly FONT_TITLE: number = 24
}

// 组件中引用
Text('标题')
  .fontSize(AppTheme.FONT_TITLE)
  .fontColor(AppTheme.COLOR_PRIMARY)
```

---

### 总结
- **自定义组件**：通过 `@Component` 定义，使用 `build()` 构建 UI。
- **统一样式**：  
  - `@Styles`：定义可复用的内联样式（全局或私有）。  
  - `@Extend`：扩展内置组件样式，统一修改默认风格。  
  - 常量对象：集中管理颜色、字体等变量。  
  - `@Builder`：封装复杂样式块，复用 UI 片段。  
  - 全局主题：通过常量类统一管理应用级样式变量。