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