From f7ca8551ba036a99133a53fbe0606e9e649fd417 Mon Sep 17 00:00:00 2001 From: kevinls Date: Wed, 18 Jun 2025 19:16:39 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=88=97=E8=A1=A8=E9=A1=B9?= =?UTF-8?q?=E7=BB=93=E6=9E=84=E7=B1=BB=E5=9E=8B=E4=B8=8D=E5=90=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ets/common/constants/CommonConstants.ets | 9 + .../src/main/ets/pages/MultiFlowItemPage.ets | 175 ++++++++++++++++++ .../main/resources/base/element/string.json | 8 + .../resources/base/profile/main_pages.json | 3 +- 4 files changed, 194 insertions(+), 1 deletion(-) create mode 100644 entry/src/main/ets/pages/MultiFlowItemPage.ets diff --git a/entry/src/main/ets/common/constants/CommonConstants.ets b/entry/src/main/ets/common/constants/CommonConstants.ets index a739af0..8c2079d 100644 --- a/entry/src/main/ets/common/constants/CommonConstants.ets +++ b/entry/src/main/ets/common/constants/CommonConstants.ets @@ -144,6 +144,15 @@ export class CommonConstants { } ] }, + { + title: $r('app.string.scenario5'), + child: [ + { + text: $r('app.string.scenario_waterFlow5'), + to: 'MultiFlowItemPage' + } + ] + }, ]; } diff --git a/entry/src/main/ets/pages/MultiFlowItemPage.ets b/entry/src/main/ets/pages/MultiFlowItemPage.ets new file mode 100644 index 0000000..11a1517 --- /dev/null +++ b/entry/src/main/ets/pages/MultiFlowItemPage.ets @@ -0,0 +1,175 @@ +/* + * Copyright (c) 2025 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { NodeItem, RecyclerView, WaterFlowManager } from '@hadss/scroll_components'; +import { common } from '@kit.AbilityKit'; +import { CommonConstants } from '../common/constants/CommonConstants'; +import { BlogData, Params } from '../model/types'; +import { collections, taskpool } from '@kit.ArkTS'; +import { sceneMockData } from '../workers/GetNetworkData'; +import { generateImages } from '../model/mock'; + +@Concurrent +async function generateRandomBlogData(): Promise { + let array: collections.Array = await generateImages(); + const module = await import('../model/mock'); + let data = module.generateRandomBlogData(array.length); + for (let index = 0; index < array.length; index++) { + data[index].content = array[index].title; + data[index].images = [array[index].thumbnails]; + } + return data; +} + +class MyWaterFlowManager extends WaterFlowManager { + onWillCreateItem(index: number, data: BlogData) { + let node: NodeItem + if (index % 2 === 0) { + node = this.dequeueReusableNodeByType('ImageContainer'); + } else { + node = this.dequeueReusableNodeByType('TextContainer'); + } + node?.setData({ blogItem: data }); + return node; + } +} + +@Entry +@Component +struct MultiFlowItemPage { + waterFlowView: MyWaterFlowManager = new MyWaterFlowManager({ + defaultNodeItem: 'ImageContainer', + context: this.getUIContext() + }); + scroller: Scroller = new Scroller(); + @State dataArray: BlogData[] = [] // Bind data source for data iteration + + aboutToAppear(): void { + this.initView(); + taskpool.execute(generateRandomBlogData).then((data: ESObject) => { + this.dataArray = data; + this.waterFlowView.setDataSource(data); + }) + + this.waterFlowView.registerNodeItem('ImageContainer', wrapBuilder(ImageContainer)); + this.waterFlowView.registerNodeItem('TextContainer', wrapBuilder(TextContainer)); + + this.waterFlowView.preCreate('ImageContainer', 30); + this.waterFlowView.preCreate('TextContainer', 30); + + } + + + initView() { + this.waterFlowView.setViewStyle({ scroller: this.scroller }) + .height(CommonConstants.FULL_HEIGHT) + .columnsTemplate(CommonConstants.WATER_FLOW_COLUMNS_TEMPLATE) + .columnsGap(CommonConstants.COLUMNS_GAP) + .rowsGap(CommonConstants.ROWS_GAP) + .padding({ + top: CommonConstants.PADDING, + left: CommonConstants.PADDING, + right: CommonConstants.PADDING, + }) + } + + build() { + Column() { + // Header navigation bar + Row({ space: 8 }) { + Text($r('app.string.scenario_waterFlow5')) + .fontWeight(FontWeight.Bold) + .fontSize($r('app.float.title_font_size')) + .width(CommonConstants.FULL_WIDTH) + .fontColor($r('app.color.text_color')) + } + .padding(CommonConstants.PADDING) + .width(CommonConstants.FULL_WIDTH) + .backgroundColor(Color.White) + + RecyclerView({ + viewManager: this.waterFlowView + }) + + } + .height(CommonConstants.FULL_HEIGHT) + .backgroundColor($r('app.color.home_background_color')) + } +} + +@Builder +function ImageContainer($$: Params) { + ImageContainerView({ blogItem: $$.blogItem }) +} + +@Component +struct ImageContainerView { + @State blogItem: BlogData = new BlogData(); + @State showMenu: boolean = false; + @State flowHeight: Length = 0; + private context = this.getUIContext().getHostContext() as common.UIAbilityContext; + + aboutToReuse(params: ESObject): void { + this.blogItem = params.blogItem; + } + + build() { + Stack() { + Image(this.blogItem.images[0]) + .sourceSize({ width: 100, height: 100 }) + .width(CommonConstants.FULL_WIDTH) + .aspectRatio(1) + .objectFit(ImageFit.Cover) + .onAreaChange((_oldValue: Area, newValue: Area) => { + this.flowHeight = newValue.height; + }) + } + .borderRadius(12) + .clip(true) + } + +} + +@Builder +function TextContainer($$: Params) { + TextContainerView({ blogItem: $$.blogItem }) +} + +@Component +struct TextContainerView { + @State blogItem: BlogData = new BlogData(); + @State flowHeight: Length = 0; + + aboutToReuse(params: ESObject): void { + this.blogItem = params.blogItem; + } + + build() { + Stack() { + Text(this.blogItem.content) + .width(CommonConstants.FULL_WIDTH) + .onAreaChange((_oldValue: Area, newValue: Area) => { + this.flowHeight = newValue.height; + }) + .padding(CommonConstants.PADDING) + .borderRadius(12) + .borderWidth(2) + .borderColor(Color.Grey) + } + .borderRadius(12) + .clip(true) + } + +} \ No newline at end of file diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 8951b0b..06b0e23 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -48,6 +48,14 @@ "name": "scenario_waterFlow4", "value": "瀑布流滑动吸顶" }, + { + "name": "scenario5", + "value": "场景五" + }, + { + "name": "scenario_waterFlow5", + "value": "瀑布流多Item复用" + }, { "name": "want_to_eat", "value": "想吃榜" diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index 1b83137..0e3fa76 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -4,6 +4,7 @@ "pages/CombineWaterFlowPage", "pages/StickyWaterFlowPage", "pages/StandardWaterFlowPage", - "pages/TabBarPage" + "pages/TabBarPage", + "pages/MultiFlowItemPage" ] } \ No newline at end of file -- Gitee From 69423d011a88cd40f33818945bffc42de623159b Mon Sep 17 00:00:00 2001 From: kevinls Date: Wed, 18 Jun 2025 20:42:27 +0800 Subject: [PATCH 2/2] fix : routes --- .../src/main/ets/common/constants/CommonConstants.ets | 11 +---------- entry/src/main/ets/pages/MultiFlowItemPage.ets | 11 ----------- entry/src/main/resources/base/element/string.json | 8 -------- entry/src/main/resources/base/profile/main_pages.json | 3 +-- 4 files changed, 2 insertions(+), 31 deletions(-) diff --git a/entry/src/main/ets/common/constants/CommonConstants.ets b/entry/src/main/ets/common/constants/CommonConstants.ets index 8c2079d..e368295 100644 --- a/entry/src/main/ets/common/constants/CommonConstants.ets +++ b/entry/src/main/ets/common/constants/CommonConstants.ets @@ -143,16 +143,7 @@ export class CommonConstants { to: 'StickyWaterFlowPage' } ] - }, - { - title: $r('app.string.scenario5'), - child: [ - { - text: $r('app.string.scenario_waterFlow5'), - to: 'MultiFlowItemPage' - } - ] - }, + } ]; } diff --git a/entry/src/main/ets/pages/MultiFlowItemPage.ets b/entry/src/main/ets/pages/MultiFlowItemPage.ets index 11a1517..009c4cd 100644 --- a/entry/src/main/ets/pages/MultiFlowItemPage.ets +++ b/entry/src/main/ets/pages/MultiFlowItemPage.ets @@ -87,17 +87,6 @@ struct MultiFlowItemPage { build() { Column() { - // Header navigation bar - Row({ space: 8 }) { - Text($r('app.string.scenario_waterFlow5')) - .fontWeight(FontWeight.Bold) - .fontSize($r('app.float.title_font_size')) - .width(CommonConstants.FULL_WIDTH) - .fontColor($r('app.color.text_color')) - } - .padding(CommonConstants.PADDING) - .width(CommonConstants.FULL_WIDTH) - .backgroundColor(Color.White) RecyclerView({ viewManager: this.waterFlowView diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 06b0e23..8951b0b 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -48,14 +48,6 @@ "name": "scenario_waterFlow4", "value": "瀑布流滑动吸顶" }, - { - "name": "scenario5", - "value": "场景五" - }, - { - "name": "scenario_waterFlow5", - "value": "瀑布流多Item复用" - }, { "name": "want_to_eat", "value": "想吃榜" diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index 0e3fa76..1b83137 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -4,7 +4,6 @@ "pages/CombineWaterFlowPage", "pages/StickyWaterFlowPage", "pages/StandardWaterFlowPage", - "pages/TabBarPage", - "pages/MultiFlowItemPage" + "pages/TabBarPage" ] } \ No newline at end of file -- Gitee