1# 自定义内容
2
3支持通过样式builder自定义特定组件的内容区。
4
5>  **说明：**
6>
7>  从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## contentModifier
10
11contentModifier(modifier:ContentModifier\<T>)
12
13定制内容区的方法。
14
15**系统能力：** SystemCapability.ArkUI.ArkUI.Full
16
17**参数：**
18
19| 参数名   | 类型               | 必填 | 说明                                                         |
20| -------- | ------------------ | ---- | ------------------------------------------------------------ |
21| modifier | ContentModifier\<T> | 是   | 在当前组件上，定制内容区的方法。<br/>modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 |
22
23## ContentModifier\<T>
24
25开发者需要自定义class实现ContentModifier接口。
26
27### applyContent
28
29applyContent() : WrappedBuilder<[T]>
30
31定制内容区的Builder。
32
33**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
34
35**参数**：
36
37| 参数 | 描述                                                         |
38| ---- | ------------------------------------------------------------ |
39| T    | 组件的属性类，用来区别不同组件自定义内容区后所需要的不同信息，比如Button组件的ButtonConfiguration，Checkbox组件的CheckBoxConfiguration等。 |
40
41**T参数支持范围:**
42
43ButtonConfiguration、CheckBoxConfiguration、DataPanelConfiguration、TextClockConfiguration、ToggleConfiguration、GaugeConfiguration、LoadingProgressConfiguration、RadioConfiguration、ProgressConfiguration、RatingConfiguration、SliderConfiguration
44
45**属性支持范围:**
46
47支持通用属性enabled，contentModifier。
48## CommonConfiguration\<T><sup>12+</sup>对象说明
49
50开发者需要自定义class实现ContentModifier接口。
51
52**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
53
54| 参数名  | 类型    | 说明              |
55| ------ | ------ | ---------------- |
56| enabled | boolean | 如果该值为true，则contentModifier可用，并且可以响应triggerChange等操作，如果设置为false，则不会响应triggerChange等操作。 |
57| contentModifier | ContentModifier\<T> | 用于将用户需要的组件信息发送到自定义内容区。 |
58
59
60## 示例
61
62通过ContentModifier实现自定义复选框样式的功能，用一个五边形复选框替换原本Checkbox的样式。如果选中，内部会出现红色三角图案，标题会显示选中字样；如果取消选中，红色三角图案消失，标题会显示非选中字样。
63
64```ts
65// xxx.ets
66class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> {
67  selectedColor: Color = Color.White
68  constructor(selectedColor: Color) {
69    this.selectedColor = selectedColor;
70  }
71  applyContent() : WrappedBuilder<[CheckBoxConfiguration]>
72  {
73    return wrapBuilder(buildCheckbox)
74  }
75}
76
77@Builder function buildCheckbox(config: CheckBoxConfiguration) {
78  Column({space:10}) {
79      Text(config.name  + (config.selected ? "（ 选中 ）" : "（ 非选中 ）"))
80      Shape() {
81        Path().width(200).height(60).commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z').fillOpacity(0).strokeWidth(3)
82        Path().width(10).height(10).commands('M50 0 L100 100 L0 100 Z')
83          .visibility(config.selected ? Visibility.Visible : Visibility.Hidden)
84          .fill(config.selected ? (config.contentModifier as MyCheckboxStyle).selectedColor : Color.Black)
85          .stroke((config.contentModifier as MyCheckboxStyle).selectedColor)
86          .margin({left:11,top:10})
87      }
88      .width(300)
89      .height(200)
90      .viewPort({ x: 0, y: 0, width: 310, height: 310 })
91      .strokeLineJoin(LineJoinStyle.Miter)
92      .strokeMiterLimit(5)
93      .onClick(()=>{
94            if (config.selected) {
95              config.triggerChange(false)
96            } else {
97              config.triggerChange(true)
98            }
99      }).margin({left:150})
100    }
101  }
102
103@Entry
104@Component
105struct Index {
106  build() {
107    Row() {
108      Column() {
109        Checkbox({ name: '复选框状态', group: 'checkboxGroup' })
110        .select(true)
111        .contentModifier(new MyCheckboxStyle(Color.Red))
112        .onChange((value: boolean) => {
113          console.info('Checkbox change is' + value)
114        })
115      }
116      .width('100%')
117    }
118    .height('100%')
119  }
120}
121```
122
123![](figures/common_builder.gif)
124