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 49860493346a7b79d115a4327d0a45ede7bdf02f..4aea7d963ed15214d31db8f11b372326bbe466bc 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 76ffa4848146cd0e8a8b9ee3d0848bda0f2f47e8..6f51145bc8bf0138c343b01b0bb7be7e2dc64a7b 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/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment2.ets b/ArkUI/Component_Reuse_Scenarios/entry/src/main/ets/segment/segment2.ets index 43ff97f2dec65c017ef6b9c8040b9d43327c14a6..23138a7987b01e8efccfc15619aae4a62a4e09e9 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 c7646779fa6d73f50f8237d98d87547ab216a4b4..17d81396af6fda04d64f9712ef23972fdf08e57e 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 0000000000000000000000000000000000000000..5e45e1a7812fe045e5878616e375b0e5a32267eb --- /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 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 b126d07158735b149ae927c670fbae000f26b948..039bda5ceed91007f03d34807fecdee17c185526 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 88d7d995b7257a9fdc61c90144b515d1291a27d5..7a121f36751fee30196f6d12c7cf13716a515886 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 3a8614f81a42755788851315eb98f27b78707049..188c5301f45f60f4ff4ac316cc821383e3038cc1 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 020f5e97df2dac1121e05c87c879b74a31abccf9..1cf9b3d0248a19d4e864686f2037c80c395b3654 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 0000000000000000000000000000000000000000..61968f61a351b2f9639c7f447909d948c9f93f2c --- /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