1# 内容修改器 (ContentModifier) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyi0309--> 5<!--Designer: @liyi0309--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9当开发者期望自定义组件的内容区时，比如Checkbox的内部显示一个五角星等场景时，可以使用此功能。 10 11仅[Button](../reference/apis-arkui/arkui-ts/ts-basic-components-button.md)、[Checkbox](../reference/apis-arkui/arkui-ts/ts-basic-components-checkbox.md)、[DataPanel](../reference/apis-arkui/arkui-ts/ts-basic-components-datapanel.md)、[TextTimer](../reference/apis-arkui/arkui-ts/ts-basic-components-texttimer.md)、[Slider](../reference/apis-arkui/arkui-ts/ts-basic-components-slider.md)、[Select](../reference/apis-arkui/arkui-ts/ts-basic-components-select.md)、[Rating](../reference/apis-arkui/arkui-ts/ts-basic-components-rating.md)、[Radio](../reference/apis-arkui/arkui-ts/ts-basic-components-radio.md)、[Gauge](../reference/apis-arkui/arkui-ts/ts-basic-components-gauge.md)、[Toggle](../reference/apis-arkui/arkui-ts/ts-basic-components-toggle.md)、[TextClock](../reference/apis-arkui/arkui-ts/ts-basic-components-textclock.md)组件支持该能力。 12 13使用ContentModifier自定义Checkbox样式，用五边形Checkbox替换默认Checkbox。选中时，五边形内部显示红色三角图案，标题显示“选中”；取消选中时，红色三角图案消失，标题显示“非选中”。 14 15```ts 16// xxx.ets 17class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> { 18 selectedColor: Color = Color.White; 19 20 constructor(selectedColor: Color) { 21 this.selectedColor = selectedColor; 22 } 23 24 applyContent(): WrappedBuilder<[CheckBoxConfiguration]> { 25 return wrapBuilder(buildCheckbox); 26 } 27} 28 29@Builder 30function buildCheckbox(config: CheckBoxConfiguration) { 31 Column({ space: 10 }) { 32 Text(config.name + (config.selected ? "（选中）" : "（非选中）")) 33 Shape() { 34 // 五边形复选框样式 35 Path() 36 .width(200) 37 .height(60) 38 .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z') 39 .fillOpacity(0) 40 .strokeWidth(3) 41 // 红色三角图案样式 42 Path() 43 .width(10) 44 .height(10) 45 .commands('M50 0 L100 100 L0 100 Z') 46 .visibility(config.selected ? Visibility.Visible : Visibility.Hidden) 47 .fill(config.selected ? (config.contentModifier as MyCheckboxStyle).selectedColor : Color.Black) 48 .stroke((config.contentModifier as MyCheckboxStyle).selectedColor) 49 .margin({ left: 11, top: 10 }) 50 } 51 .width(300) 52 .height(200) 53 .viewPort({ 54 x: 0, 55 y: 0, 56 width: 310, 57 height: 310 58 }) 59 .strokeLineJoin(LineJoinStyle.Miter) 60 .strokeMiterLimit(5) 61 .onClick(() => { 62 // 点击后，触发复选框点击状态变化 63 if (config.selected) { 64 config.triggerChange(false); 65 } else { 66 config.triggerChange(true); 67 } 68 }) 69 .margin({ left: 150 }) 70 } 71} 72 73@Entry 74@Component 75struct Index { 76 build() { 77 Row() { 78 Column() { 79 Checkbox({ name: '复选框状态', group: 'checkboxGroup' }) 80 .select(true) 81 .contentModifier(new MyCheckboxStyle(Color.Red)) 82 .onChange((value: boolean) => { 83 console.info('Checkbox change is' + value); 84 }) 85 } 86 .width('100%') 87 } 88 .height('100%') 89 } 90} 91``` 92 93 94
