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**系统能力：** SystemCapability.ArkUI.ArkUI.Full 36 37**参数**： 38 39| 参数 | 描述 | 40| ---- | ------------------------------------------------------------ | 41| T | 组件的属性类，用来区别不同组件自定义内容区后所需要的不同信息，比如Button组件的ButtonConfiguration，Checkbox组件的CheckBoxConfiguration等。 | 42 43**T参数支持范围:** 44 45ButtonConfiguration、CheckBoxConfiguration、DataPanelConfiguration、TextClockConfiguration、ToggleConfiguration、GaugeConfiguration、LoadingProgressConfiguration、RadioConfiguration、ProgressConfiguration、RatingConfiguration、SliderConfiguration 46 47**属性支持范围:** 48 49支持通用属性enabled，contentModifier。 50## CommonConfiguration\<T><sup>12+</sup>对象说明 51 52开发者需要自定义class实现ContentModifier接口。 53 54**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58| 参数名 | 类型 | 说明 | 59| ------ | ------ | ---------------- | 60| enabled | boolean | 如果该值为true，则contentModifier可用，并且可以响应triggerChange等操作，如果设置为false，则不会响应triggerChange等操作。 | 61| contentModifier | ContentModifier\<T> | 用于将用户需要的组件信息发送到自定义内容区。 | 62 63 64## 示例 65 66通过ContentModifier实现自定义复选框样式的功能，用一个五边形复选框替换原本Checkbox的样式。如果选中，内部会出现红色三角图案，标题会显示选中字样；如果取消选中，红色三角图案消失，标题会显示非选中字样。 67 68```ts 69// xxx.ets 70class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> { 71 selectedColor: Color = Color.White 72 73 constructor(selectedColor: Color) { 74 this.selectedColor = selectedColor; 75 } 76 77 applyContent(): WrappedBuilder<[CheckBoxConfiguration]> { 78 return wrapBuilder(buildCheckbox) 79 } 80} 81 82@Builder 83function buildCheckbox(config: CheckBoxConfiguration) { 84 Column({ space: 10 }) { 85 Text(config.name + (config.selected ? "（ 选中 ）" : "（ 非选中 ）")) 86 Shape() { 87 // 五边形复选框样式 88 Path() 89 .width(200) 90 .height(60) 91 .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z') 92 .fillOpacity(0) 93 .strokeWidth(3) 94 // 红色三角图案样式 95 Path() 96 .width(10) 97 .height(10) 98 .commands('M50 0 L100 100 L0 100 Z') 99 .visibility(config.selected ? Visibility.Visible : Visibility.Hidden) 100 .fill(config.selected ? (config.contentModifier as MyCheckboxStyle).selectedColor : Color.Black) 101 .stroke((config.contentModifier as MyCheckboxStyle).selectedColor) 102 .margin({ left: 11, top: 10 }) 103 } 104 .width(300) 105 .height(200) 106 .viewPort({ 107 x: 0, 108 y: 0, 109 width: 310, 110 height: 310 111 }) 112 .strokeLineJoin(LineJoinStyle.Miter) 113 .strokeMiterLimit(5) 114 .onClick(() => { 115 // 点击后，触发复选框点击状态变化 116 if (config.selected) { 117 config.triggerChange(false) 118 } else { 119 config.triggerChange(true) 120 } 121 }) 122 .margin({ left: 150 }) 123 } 124} 125 126@Entry 127@Component 128struct Index { 129 build() { 130 Row() { 131 Column() { 132 Checkbox({ name: '复选框状态', group: 'checkboxGroup' }) 133 .select(true) 134 .contentModifier(new MyCheckboxStyle(Color.Red)) 135 .onChange((value: boolean) => { 136 console.info('Checkbox change is' + value) 137 }) 138 } 139 .width('100%') 140 } 141 .height('100%') 142 } 143} 144``` 145 146 147
