diff --git a/zh-cn/application-dev/quick-start/arkts-builder.md b/zh-cn/application-dev/quick-start/arkts-builder.md index 5eb39033fb718cb204e09aaaccf4d41466d7e3b8..276ee2f8fd48bd2a8bfac77906ceb71204174cd7 100644 --- a/zh-cn/application-dev/quick-start/arkts-builder.md +++ b/zh-cn/application-dev/quick-start/arkts-builder.md @@ -77,13 +77,22 @@ MyGlobalBuilderFunction() ```ts -ABuilder( $$ : { paramA1: string, paramB1 : string } ); +class ABuilderParam { + paramA1: string = '' + paramB1: string = '' +} + +ABuilder($$ : ABuilderParam); ``` ```ts -@Builder function ABuilder($$: { paramA1: string }) { +class ABuilderParam { + paramA1: string = '' +} + +@Builder function ABuilder($$: ABuilderParam) { Row() { Text(`UseStateVarByReference: ${$$.paramA1} `) } @@ -94,10 +103,10 @@ struct Parent { @State label: string = 'Hello'; build() { Column() { - // 在Parent组件中调用ABuilder的时候，将this.label引用传递给ABuilder + // Pass the this.label reference to the ABuilder component when the ABuilder component is called in the Parent component. ABuilder({ paramA1: this.label }) Button('Click me').onClick(() => { - // 点击“Click me”后，UI从“Hello”刷新为“ArkUI” + // After Click me is clicked, the UI text changes from Hello to ArkUI. this.label = 'ArkUI'; }) } diff --git a/zh-cn/application-dev/quick-start/arkts-builderparam.md b/zh-cn/application-dev/quick-start/arkts-builderparam.md index 2e709c49a5e42fd08cd5401c0f4a45632d49f070..8151b6e8eb4ed82a4103206871025f18dd6e6488 100644 --- a/zh-cn/application-dev/quick-start/arkts-builderparam.md +++ b/zh-cn/application-dev/quick-start/arkts-builderparam.md @@ -34,30 +34,34 @@ - 用父组件自定义构建函数初始化子组件\@BuildParam装饰的方法。 ```ts - @Component - struct Child { - @BuilderParam aBuilder0: () => void; +@Component +struct Child { + @Builder componentBuilder() { + Text(`Parent builder `) + } - build() { - Column() { - this.aBuilder0() - } + @BuilderParam aBuilder0: () => void = this.componentBuilder; + + build() { + Column() { + this.aBuilder0() } } +} - @Entry - @Component - struct Parent { - @Builder componentBuilder() { - Text(`Parent builder `) - } +@Entry +@Component +struct Parent { + @Builder componentBuilder() { + Text(`Parent builder `) + } - build() { - Column() { - Child({ aBuilder0: this.componentBuilder }) - } + build() { + Column() { + Child({ aBuilder0: this.componentBuilder }) } } +} ``` @@ -70,36 +74,40 @@ > 开发者谨慎使用bind改变函数调用的上下文，可能会使this指向混乱。 ```ts - @Component - struct Child { - label: string = `Child` - @BuilderParam aBuilder0: () => void; - @BuilderParam aBuilder1: () => void; - - build() { - Column() { - this.aBuilder0() - this.aBuilder1() - } - } +@Component +struct Child { + @Builder componentBuilder() { + Text(`Child builder `) } - @Entry - @Component - struct Parent { - label: string = `Parent` + label: string = `Child` + @BuilderParam aBuilder0: () => void = this.componentBuilder; + @BuilderParam aBuilder1: () => void = this.componentBuilder; - @Builder componentBuilder() { - Text(`${this.label}`) + build() { + Column() { + this.aBuilder0() + this.aBuilder1() } + } +} - build() { - Column() { - this.componentBuilder() - Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder.bind(this) }) - } +@Entry +@Component +struct Parent { + label: string = `Parent` + + @Builder componentBuilder() { + Text(`${this.label}`) + } + + build() { + Column() { + this.componentBuilder() + Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder }) } } +} ``` @@ -112,7 +120,11 @@ ```ts -@Builder function GlobalBuilder1($$ : {label: string }) { +class GlobalBuilderParam { + label: string = "" +} + +@Builder function GlobalBuilder1($$ : GlobalBuilderParam) { Text($$.label) .width(400) .height(50) @@ -121,11 +133,15 @@ @Component struct Child { + @Builder componentBuilder() { + Text(`Child builder `) + } + label: string = 'Child' // 无参数类，指向的componentBuilder也是无参数类型 - @BuilderParam aBuilder0: () => void; + @BuilderParam aBuilder0: () => void = this.componentBuilder; // 有参数类型，指向的GlobalBuilder1也是有参数类型的方法 - @BuilderParam aBuilder1: ($$ : { label : string}) => void; + @BuilderParam aBuilder1: ($$ : GlobalBuilderParam) => void = this.componentBuilder; build() { Column() { @@ -167,10 +183,17 @@ struct Parent { ```ts // xxx.ets +class CustomContainerParam { + header: string = ''; +} @Component struct CustomContainer { - @Prop header: string; - @BuilderParam closer: () => void + @Builder componentCloser() { + Text(`Custom closer `) + } + + @Prop header: string = ''; + @BuilderParam closer: () => void = this.componentCloser; build() { Column() { @@ -194,12 +217,15 @@ struct CustomContainer { @Component struct CustomContainerUser { @State text: string = 'header'; + param: CustomContainerParam = { + header: this.text + }; build() { Column() { // 创建CustomContainer，在创建CustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包 // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数 - CustomContainer({ header: this.text }) { + CustomContainer(this.param) { Column() { specificParam('testA', 'testB') }.backgroundColor(Color.Yellow) diff --git a/zh-cn/application-dev/quick-start/arkts-create-custom-components.md b/zh-cn/application-dev/quick-start/arkts-create-custom-components.md index 33b5a6cb71c626845a5587cd9a91b5adb896c48d..f145cb94ef2af84a82007b34bd8b6a7c90ca96aa 100644 --- a/zh-cn/application-dev/quick-start/arkts-create-custom-components.md +++ b/zh-cn/application-dev/quick-start/arkts-create-custom-components.md @@ -42,15 +42,23 @@ HelloComponent可以在其他自定义组件中的build()函数中多次创建 ```ts +class HelloComponentParam { + message: string = "" +} + @Entry @Component struct ParentComponent { + param: HelloComponentParam = { + message: 'Hello, World!' + } + build() { Column() { Text('ArkUI message') - HelloComponent({ message: 'Hello, World!' }); + HelloComponent(param); Divider() - HelloComponent({ message: '你好!' }); + HelloComponent(param); } } } diff --git a/zh-cn/application-dev/quick-start/arkts-extend.md b/zh-cn/application-dev/quick-start/arkts-extend.md index 7b3ce08c9e91cae9d0c664ca647f3f4670236a51..cfea43912c423e5ec55860cae8ebc0b7d8a500d7 100644 --- a/zh-cn/application-dev/quick-start/arkts-extend.md +++ b/zh-cn/application-dev/quick-start/arkts-extend.md @@ -81,7 +81,7 @@ build() { Row({ space: 10 }) { Text(`${this.label}`) - .makeMeClick(this.onClickHandler.bind(this)) + .makeMeClick(this.onClickHandler) } } }