diff --git a/entry/src/main/ets/model/AttributeModifier.ets b/entry/src/main/ets/model/AttributeModifier.ets index 826b2a7c19bb49825cd52799c3fab6f3e4a569f1..a2bd036f71648fedc836230cc488834a5bd69ba3 100644 --- a/entry/src/main/ets/model/AttributeModifier.ets +++ b/entry/src/main/ets/model/AttributeModifier.ets @@ -12,7 +12,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { MyButton } from '../pages/CommonComponent'; +// [Start image_modifier] // The AttributeModifier interface implementation class for the Image component. export class ImageModifier implements AttributeModifier { private imageWidth: Length = 0; @@ -46,6 +48,51 @@ export class TextModifier implements AttributeModifier { } applyNormalAttribute(instance: TextAttribute): void { - instance.fontSize($r('app.float.font_size_l')) + instance.fontSize($r('app.float.font_size_l')); } -} \ No newline at end of file +} +// [End image_modifier] +// [Start my_button_modifier] +// src/main/ets/model/AttributeModifier.ets +// The client implements the AttributeModifier interface with custom class. +class MyButtonModifier implements AttributeModifier { + // Define private properties specific to the Button component + private stateEffectValue: boolean = false; + private buttonType: ButtonType = ButtonType.Normal; + + constructor() { + } + // The system provides styling methods for components in their normal state, along with additional methods for hover and other states. + applyNormalAttribute(instance: ButtonAttribute): void { + instance.stateEffect(this.stateEffectValue); + instance.type(this.buttonType); + } + + stateEffect(enable: boolean): MyButtonModifier { + this.stateEffectValue = enable + return this; + } + // Custom attribute names align with system component property names to ensure consistency during chained calls. + type(buttonType: ButtonType): MyButtonModifier { + this.buttonType = buttonType; + return this; + } +} + +//The user utilizes the provider's public component MyButton. +@Component +struct Index { + capsuleButtonModifier: MyButtonModifier = new MyButtonModifier().stateEffect(true).type(ButtonType.Capsule) + circleButtonModifier: MyButtonModifier = new MyButtonModifier().stateEffect(true).type(ButtonType.Circle) + build() { + Row() { + MyButton({ modifier: this.capsuleButtonModifier, text: 'Capsule Button' }) + .margin({ right: 20 }) + MyButton({ modifier: this.circleButtonModifier, text: 'Circle Button' }) + } + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} +// [End my_button_modifier] \ No newline at end of file diff --git a/entry/src/main/ets/model/PopViewUtils.ets b/entry/src/main/ets/model/PopViewUtils.ets index 440760e006ed95420dd00224651b4e0f2ddc0db1..a69602761e6ba44929034efd799a0f750ebd1159 100644 --- a/entry/src/main/ets/model/PopViewUtils.ets +++ b/entry/src/main/ets/model/PopViewUtils.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start Step1] import { ComponentContent, promptAction } from '@kit.ArkUI'; export enum PopViewShowType { @@ -35,6 +36,7 @@ export class PopViewUtils { return PopViewUtils.popShare; } + // [Start show_dialog] static showDialog(type: PopViewShowType, contentView: WrappedBuilder<[T]>, args: T, options?: promptAction.BaseDialogOptions):void { let uiContext = AppStorage.get('uiContext'); @@ -56,7 +58,11 @@ export class PopViewUtils { } } - static closeDialog(type: PopViewShowType):void { + // [StartExclude Step1] + // [End show_dialog] + // [Start close_dialog] + // src/main/ets/model/PopViewUtil.ets + static closeDialog(type: PopViewShowType): void { let uiContext = AppStorage.get('uiContext'); if (uiContext) { // The promptAction object was obtained. @@ -75,6 +81,8 @@ export class PopViewUtils { } } + // [End close_dialog] + // [Start show_pop_view] static showPopView(contentView: WrappedBuilder<[T]>, args: T, options?: promptAction.BaseDialogOptions):void { PopViewUtils.showDialog(PopViewShowType.OPEN, contentView, args, options); @@ -83,4 +91,9 @@ export class PopViewUtils { static closePopView():void { PopViewUtils.closeDialog(PopViewShowType.OPEN); } + + // [End show_pop_view] + // [EndExclude Step1] } + +// [End Step1] \ No newline at end of file diff --git a/entry/src/main/ets/pages/CommonComponent.ets b/entry/src/main/ets/pages/CommonComponent.ets index ed645fe8b4cd1c2534ff8bd8579926018ea5a9dd..c9bb18671ce2e90e93df89dfebc89a8cec92b93a 100644 --- a/entry/src/main/ets/pages/CommonComponent.ets +++ b/entry/src/main/ets/pages/CommonComponent.ets @@ -23,6 +23,7 @@ export function CommonComponentBuilder() { } @Entry + // [Start common_component] @Component struct CommonComponent { imageAttribute: ImageModifier = new ImageModifier(330, 330); @@ -46,4 +47,72 @@ struct CommonComponent { } .title(getResourceString($r('app.string.common'), this)) } -} \ No newline at end of file +} +// [End common_component] +// [Start my_button] +//Provider customizes and exports components +@Component +export struct MyButton { + @Prop text: string = ''; + // Accept externally passed AttributeModifier class instances + @Prop modifier: AttributeModifier | null = null; + + build() { + // AttributeModifier does not support properties with CustomBuilder or Lambda expressions as parameters, and it does + // not support events or gestures. Here, the text can only be passed separately through parameters. + Button(this.text) + // Bind the input AttributeModifier class instance to the system component. + .attributeModifier(this.modifier) + .fontSize(20) + .width(200) + .height(50) + } +} +// [End my_button] +// [Start my_button_modifier1] +// src/main/ets/pages/CommonComponent.ets +// The provider creates a custom Class that implements the system's AttributeModifier interface. +export class MyButtonModifier implements AttributeModifier { + private buttonType: ButtonType = ButtonType.Normal; + private stateEffectValue: boolean = false; + + constructor() { + } + + applyNormalAttribute(instance: ButtonAttribute): void { + instance.stateEffect(this.stateEffectValue); + instance.type(this.buttonType); + instance.width(200); + instance.height(50); + instance.fontSize(20) + } + + stateEffect(enable: boolean): MyButtonModifier { + this.stateEffectValue = enable; + return this; + } + + type(type: ButtonType): MyButtonModifier { + this.buttonType = type; + return this; + } +} +// [End my_button_modifier1] +// [Start index] +// src/main/ets/pages/CommonComponent.ets +@Component +struct Index { + modifier = new MyButtonModifier() + .stateEffect(true) + .type(ButtonType.Capsule) + + build() { + Row() { + Button('Capsule Button') + .attributeModifier(this.modifier) + } + .width('100%') + .height('100%') + } +} +// [End index] \ No newline at end of file diff --git a/entry/src/main/ets/pages/ComponentFactory.ets b/entry/src/main/ets/pages/ComponentFactory.ets index 43049a0ce8b086c2330d24711907425fae72ccf7..19c784b419e430edb81856e78534c60bc781c78c 100644 --- a/entry/src/main/ets/pages/ComponentFactory.ets +++ b/entry/src/main/ets/pages/ComponentFactory.ets @@ -12,22 +12,24 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +// [Start factory_map] // Import the component factory. The path must be based on the actual location. import { factoryMap } from '../view/FactoryMap'; +// [StartExclude get_resource_string] import { getResourceString } from '../model/GetResourceString'; import { CommonConstants } from '../common/CommonConstants'; - +// [EndExclude get_resource_string] // Get the corresponding WrappedBuilder object from the key value of the component factory Map. let myRadio: WrappedBuilder<[]> = factoryMap.get('Radio') as WrappedBuilder<[]>; let myCheckbox: WrappedBuilder<[]> = factoryMap.get('Checkbox') as WrappedBuilder<[]>; - +// [End factory_map] @Builder export function ComponentFactoryBuilder() { ComponentFactory() } @Entry + // [Start component_factory] @Component struct ComponentFactory { build() { @@ -42,4 +44,5 @@ struct ComponentFactory { } .title(getResourceString($r('app.string.factory'), this)) } -} \ No newline at end of file +} +// [End component_factory] \ No newline at end of file diff --git a/entry/src/main/ets/pages/DialogComponent.ets b/entry/src/main/ets/pages/DialogComponent.ets index 6971ff3c06b3f7e540a0505560f29f5881644792..d89f3e33fcfe960b92f3a3e620b8a69736a2a3d5 100644 --- a/entry/src/main/ets/pages/DialogComponent.ets +++ b/entry/src/main/ets/pages/DialogComponent.ets @@ -14,13 +14,14 @@ */ import { CommonConstants } from '../common/CommonConstants'; import { getResourceString } from '../model/GetResourceString'; +// [Start dialog_component] import { PopViewUtils } from '../model/PopViewUtils'; - +// [StartExclude buildText] @Builder export function DialogComponentBuilder() { DialogComponent() } - +// [Start dialog_component1] @Builder export function buildText(_obj: Object) { Column({ space: CommonConstants.ROW_SPACING }) { @@ -54,7 +55,8 @@ export function buildText(_obj: Object) { .backgroundColor(Color.White) .borderRadius($r('app.float.border_radius')) } - +// [End dialog_component1] +// [StartExclude buildText] @Entry @Component struct DialogComponent { @@ -78,4 +80,5 @@ struct DialogComponent { } .title(getResourceString($r('app.string.dialog'), this)) } -} \ No newline at end of file +} +// [End dialog_component] \ No newline at end of file diff --git a/entry/src/main/ets/view/CustomImageText.ets b/entry/src/main/ets/view/CustomImageText.ets index 0e138be951bce11438192503925489a1e1ffee86..f669eefed9691f5ffbf5b7c8bdc6b7372e9aedb8 100644 --- a/entry/src/main/ets/view/CustomImageText.ets +++ b/entry/src/main/ets/view/CustomImageText.ets @@ -13,7 +13,7 @@ * limitations under the License. */ import { CommonConstants } from '../common/CommonConstants'; - +// [Start custom_image_text] @Component export struct CustomImageText { @Prop imageAttribute: AttributeModifier; @@ -29,4 +29,29 @@ export struct CustomImageText { .attributeModifier(this.textAttribute) } } -} \ No newline at end of file +} +// [End custom_image_text] +// [Start my_button] +// src/main/ets/view/CustomImageText.ets +@Component +struct MyButton { + @Prop text: string = ''; + @Prop stateEffect: boolean = true; + + build() { + Button(this.text) + .fontSize(12) + .fontColor($r('sys.color.comp_background_list_card')) + .stateEffect(this.stateEffect) + } +} +// [End my_button] +// [Start index] +// src/main/ets/view/CustomImageText.ets +@Component +struct Index { + build() { + MyButton({ text: '点击带有动效', stateEffect: true }) + } +} +// [End index] \ No newline at end of file diff --git a/entry/src/main/ets/view/FactoryMap.ets b/entry/src/main/ets/view/FactoryMap.ets index 7aac8867e86694db26b725b5e6d004afb6ef9d93..f0b67c53509a294dcf13a9e4beb6c97cb664ba34 100644 --- a/entry/src/main/ets/view/FactoryMap.ets +++ b/entry/src/main/ets/view/FactoryMap.ets @@ -13,7 +13,7 @@ * limitations under the License. */ import { CommonConstants } from '../common/CommonConstants'; - +// [Start my_radio] @Builder function myRadio() { Text($r('app.string.radio')) @@ -63,7 +63,8 @@ function myCheckBox() { } .width(CommonConstants.ONE_HUNDRED_PERCENT) } - +// [End my_radio] +// [Start factory_map] // Define the component factory Map. let factoryMap: Map = new Map(); @@ -72,4 +73,5 @@ factoryMap.set('Radio', wrapBuilder(myRadio)); factoryMap.set('Checkbox', wrapBuilder(myCheckBox)); // Export assembly factory -export { factoryMap }; \ No newline at end of file +export { factoryMap }; +// [End factory_map] \ No newline at end of file