From 54f8f1f1c11849403cf816d9c7be6072c28fc176 Mon Sep 17 00:00:00 2001 From: "@feng-yu4279" Date: Tue, 27 May 2025 20:47:09 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat=20(=E6=A0=87=E8=AF=86):=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20Component=5FReuse=5FScenarios=20=E4=BB=93=E5=BA=93?= =?UTF-8?q?=E6=A0=87=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entry/src/main/ets/segment/segment2.ets | 4 +- .../entry/src/main/ets/segment/segment5.ets | 4 +- .../entry/src/main/ets/segment/segment6.ets | 148 ++++++++++++++++++ 3 files changed, 154 insertions(+), 2 deletions(-) create mode 100644 ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment6.ets diff --git a/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment2.ets b/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment2.ets index 43ff97f2..23138a79 100644 --- a/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment2.ets +++ b/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment2.ets @@ -63,4 +63,6 @@ struct MultiPicture { } // [EndExclude Case2] -} \ No newline at end of file +} + +// [End Case2] \ No newline at end of file diff --git a/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment5.ets b/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment5.ets index c7646779..17d81396 100644 --- a/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment5.ets +++ b/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment5.ets @@ -137,4 +137,6 @@ struct ComponentE { } // [EndExclude Case5] -} \ No newline at end of file +} + +// [End Case5] \ No newline at end of file diff --git a/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment6.ets b/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment6.ets new file mode 100644 index 00000000..5e45e1a7 --- /dev/null +++ b/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment6.ets @@ -0,0 +1,148 @@ +// [Start segment6] +@Entry +@Component +struct ReuseType5 { + build() { + Column() { + List({ space: 30 }) { + LazyForEach(this.momentDataSource, (item: FriendMoment, index: number) => { + ListItem() { + Column() { + if (item.type === 1) { + CardItem({ item: item }) + .reuseId('ItemMiddle1') + } else if (item.type === 2) { + CardItem({ item: item }) + .reuseId('ItemMiddle2') + } else if (item.type === 3) { + CardItem({ item: item }) + .reuseId('ItemMiddle3') + } else { + } + } + } + }, (item: FriendMoment) => JSON.stringify(item)) + } + } + } +} + + +@Reusable +@Component +struct CardItem { + build() { + Column() { + ItemTop({ item: this.item }) + if (this.item.type === 1) { // 模拟条件1 + ItemMiddle1({ item: this.item }) + } else if (this.item.type === 2) { // 模拟条件2 + ItemMiddle2({ item: this.item }) + } else if (this.item.type === 3) { + ItemMiddle3({ item: this.item }) // // 模拟条件3 + } else { + } + ItemBottom({ item: this.item }) + } + } +} + + +@Component +struct ItemTop { + // [StartExclude segment6] + build() { + Column() { + } + } + // [EndExclude segment6] +} + + +@Component +struct ItemBottom { + // [StartExclude segment6] + build() { + Column() { + } + } + // [EndExclude segment6] +} + + +@Component +struct ItemMiddle1 { + build() { + Column() { + CommentText() + MiddleSingleImage({ item: this.item }) + } + } +} + + +@Component +struct ItemMiddle2 { + build() { + Column() { + CommentText() + MiddleGrid({ item: this.item }) + } + } +} + + +@Component +struct ItemMiddle3 { + build() { + Column() { + CommentText() + MiddleVideo({ item: this.item }) + } + } +} + + +@Component +struct MiddleSingleImage { + // [StartExclude segment6] + build() { + Column() { + } + } + // [EndExclude segment6] +} + + +@Component +struct MiddleGrid { + // [StartExclude segment6] + build() { + Column() { + } + } + // [EndExclude segment6] +} + + +@Component +struct MiddleVideo { + // [StartExclude segment6] + build() { + Column() { + } + } + // [EndExclude segment6] +} + + +@Component +struct CommentText { + // [StartExclude segment6] + build() { + Column() { + } + } + // [EndExclude segment6] +} +// [Start segment6] \ No newline at end of file -- Gitee From 98af29f997d26a396605ccabb39055cf1e8b9018 Mon Sep 17 00:00:00 2001 From: "@feng-yu4279" Date: Wed, 28 May 2025 11:21:27 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat=20(=E6=A0=87=E8=AF=86):=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20UI=5FComponent=5FPerformance=5FOptimization,Compone?= =?UTF-8?q?nt=5FNesting=5FOptimization=20=E4=BB=93=E5=BA=93=E6=A0=87?= =?UTF-8?q?=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../entry/src/main/ets/segment/segment5.ets | 2 -- .../entry/src/main/ets/segment/segment6.ets | 7 ----- .../entry/src/main/ets/segment/segment.ets | 3 -- .../entry/src/main/ets/segment/segment2.ets | 3 -- .../entry/src/main/ets/segment/segment7.ets | 5 ---- .../entry/src/main/ets/segment/segment8.ets | 3 -- .../entry/src/main/ets/segment/segment9.ets | 29 +++++++++++++++++++ 7 files changed, 29 insertions(+), 23 deletions(-) create mode 100644 ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment9.ets diff --git a/ArkUI/Component_Nesting_Optimization/entry/src/main/ets/segment/segment5.ets b/ArkUI/Component_Nesting_Optimization/entry/src/main/ets/segment/segment5.ets index 49860493..4aea7d96 100644 --- a/ArkUI/Component_Nesting_Optimization/entry/src/main/ets/segment/segment5.ets +++ b/ArkUI/Component_Nesting_Optimization/entry/src/main/ets/segment/segment5.ets @@ -23,7 +23,6 @@ struct ColorNormal { } } - @Entry @Component struct ColorOverlayStackExample { @@ -40,5 +39,4 @@ struct ColorOverlayStackExample { } } } - // [End Counter_example5] \ No newline at end of file diff --git a/ArkUI/Component_Nesting_Optimization/entry/src/main/ets/segment/segment6.ets b/ArkUI/Component_Nesting_Optimization/entry/src/main/ets/segment/segment6.ets index 76ffa484..6f51145b 100644 --- a/ArkUI/Component_Nesting_Optimization/entry/src/main/ets/segment/segment6.ets +++ b/ArkUI/Component_Nesting_Optimization/entry/src/main/ets/segment/segment6.ets @@ -2,7 +2,6 @@ import { ColorMetrics } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; - @Component struct ColorMeasure { @Prop isSelected: boolean = false; @@ -21,8 +20,6 @@ struct ColorMeasure { if (!baseColor || !addColor) { return ColorMetrics.resourceColor(Color.Black); } - - let sourceColor: ColorMetrics; try { sourceColor = ColorMetrics.resourceColor(baseColor).blendColor(ColorMetrics.resourceColor(addColor)); @@ -31,13 +28,10 @@ struct ColorMeasure { console.error(`Failed to blend color, code = ${error.code}, message =${error.message}`); sourceColor = ColorMetrics.resourceColor(addColor); } - - return sourceColor; } } - @Entry @Component struct ColorMetricsExample { @@ -54,5 +48,4 @@ struct ColorMetricsExample { } } } - // [End Case5] \ No newline at end of file diff --git a/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment.ets b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment.ets index b126d071..039bda5c 100644 --- a/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment.ets +++ b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment.ets @@ -25,11 +25,9 @@ export struct VideoCard { // Create a complex object task, if the task takes 1s to execute, the component will be rendered again after 1s this.createComplexVideoPlayer(); } - // ... } - @Component export struct CardList { @State videoList: VideoItem[] = getVideoList(); @@ -44,5 +42,4 @@ export struct CardList { } } } - // [End Counter_example1] \ No newline at end of file diff --git a/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment2.ets b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment2.ets index 88d7d995..7a121f36 100644 --- a/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment2.ets +++ b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment2.ets @@ -33,11 +33,9 @@ export struct VideoCard { } }) } - // ... } - @Component export struct CardList { @State videoList: VideoItem[] = getVideoList(); @@ -52,5 +50,4 @@ export struct CardList { } } } - // [End Case1] \ No newline at end of file diff --git a/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment7.ets b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment7.ets index 3a8614f8..188c5301 100644 --- a/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment7.ets +++ b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment7.ets @@ -10,7 +10,6 @@ interface User { // ... } - // create data const DEFAULT_BACKGROUND_COLOR = Color.Pink; const getUsers = () => { @@ -34,7 +33,6 @@ const getUsers = () => { }); } - // User Card List Component @Component export struct UserCardList { @@ -52,7 +50,6 @@ export struct UserCardList { } } - // User Card Customization Component @Component struct UserCard { @@ -70,7 +67,6 @@ struct UserCard { Text(this.name) .fontSize(30) } - Text(`age：${this.age.toString()}`) .fontSize(20) } @@ -82,5 +78,4 @@ struct UserCard { .width('80%') } } - // [End Case5] \ No newline at end of file diff --git a/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment8.ets b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment8.ets index 020f5e97..1cf9b3d0 100644 --- a/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment8.ets +++ b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment8.ets @@ -22,7 +22,6 @@ function UserCardBuilder(name: string, age?: number, avatarImage?: ResourceStr) Text(name) .fontSize(30) } - Text(`age：${age?.toString()}`) .fontSize(20) } @@ -34,7 +33,6 @@ function UserCardBuilder(name: string, age?: number, avatarImage?: ResourceStr) .width('80%') } - @Component export struct UserCardList { @State users: User[] = getUsers(); @@ -51,5 +49,4 @@ export struct UserCardList { .alignListItem(ListItemAlign.Center) } } - // [End Case6] \ No newline at end of file diff --git a/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment9.ets b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment9.ets new file mode 100644 index 00000000..61968f61 --- /dev/null +++ b/ArkUI/UI_Component_Performance_Optimization/entry/src/main/ets/segment/segment9.ets @@ -0,0 +1,29 @@ +// [Start usercard_list1] +@Component +export struct UserCardList1 { + + build() { + Stack() { + this.renderChildren() + } + .width(this.descriptor.layoutMetrics.frame.size.width) + .height(this.descriptor.layoutMetrics.frame.size.height) + .backgroundColor(convertColorSegmentsToString(this.descriptor.props.backgroundColor)) + .position({ y: this.descriptor.layoutMetrics.frame.origin.y, x: this.descriptor.layoutMetrics.frame.origin.x }) + .borderWidth(this.descriptor.props.borderWidth) + .borderColor({ + left: convertColorSegmentsToString(this.descriptor.props.borderColor.left), + top: convertColorSegmentsToString(this.descriptor.props.borderColor.top), + right: convertColorSegmentsToString(this.descriptor.props.borderColor.right), + bottom: convertColorSegmentsToString(this.descriptor.props.borderColor.bottom) + }) + .borderRadius(this.descriptor.props.borderRadius) + .borderStyle(this.getBorderStyle()) + .opacity(this.getOpacity()) + .transform(this.descriptor.props.transform != undefined ? convertMatrixArrayToMatrix4(this.descriptor.props.transform) : undefined) + .clip(this.getClip()) + .hitTestBehavior(this.getHitTestMode()) + .shadow(this.getShadow()) + } +} +// [Start usercard_list1] \ No newline at end of file -- Gitee