From b2a2739e583f41f85b6be73a88a6861881f41478 Mon Sep 17 00:00:00 2001 From: lloyd <353627866@qq.com> Date: Thu, 4 Sep 2025 16:28:36 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E3=80=90=E5=A4=9A=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E8=AF=84=E8=AE=BA=E7=95=8C=E9=9D=A2=E3=80=91?= =?UTF-8?q?=E8=A1=A5=E5=85=85=E5=BC=82=E5=B8=B8=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.en.md | 10 +++---- README.md | 10 +++---- .../main/ets/entryability/EntryAbility.ets | 26 +++++++++++-------- 3 files changed, 25 insertions(+), 21 deletions(-) diff --git a/README.en.md b/README.en.md index 7de547a..a61a50b 100644 --- a/README.en.md +++ b/README.en.md @@ -1,6 +1,6 @@ # Community Comments -### Introduction +## Introduction Based on the adaptive and responsive layout, implement community comment pages with one-time development for multi-device deployment. @@ -16,7 +16,7 @@ The figure shows the effect on the tablet: ![](screenshots/device/pad.en.png) -### Concepts +## Concepts - One-time development for multi-device deployment: It enables you to develop and release one set of project code for deployment on multiple devices as demanded. This feature enables you to efficiently develop applications that are compatible with multiple devices while providing distributed user experiences for cross-device transferring, migration, and collaboration. - Adaptive layout: When the size of an external container changes, elements can automatically change based on the relative relationship to adapt to the external container. Relative relationships include the proportion, fixed aspect ratio, and display priority. @@ -25,7 +25,7 @@ The figure shows the effect on the tablet: - GridCol: It is a container that must be used as a child component of the **** container. -### How to Use +## How to Use 1. Install and open an app on a mobile phone, foldable phone, or tablet. The responsive layout and adaptive layout are used to display different effects on the app pages over different devices. 2. Tap home, hot topics, message, or mine tab at the bottom to switch to the corresponding tab page. By default, the message tab page is displayed. @@ -34,11 +34,11 @@ The figure shows the effect on the tablet: 5. Tap an image on the hot topics page to go to the image details page. Only images are displayed on mobile phones, while the content and comments are displayed with images on foldable phones and tablets. Tap the image or the back button to return to the hot topics page. 6. Tap the widget body on the hot topics page to go to the details page. The text area on the details page can be zoomed in or out with two fingers. You can tap the button in the upper right corner of the foldable phone to switch between the left-right layout and top-down layout. Tap the back button to return to the hot topics page. -### Permissions +## Permissions N/A. -### Constraints +## Constraints 1. The sample app is supported only on Huawei phones running the standard system. 2. HarmonyOS: HarmonyOS 5.0.5 Release or later diff --git a/README.md b/README.md index ab9dc21..fc65430 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # 多设备社区评论界面 -### 简介 +## 简介 基于自适应布局和响应式布局，实现一次开发，多端部署的社区评论页。 @@ -16,7 +16,7 @@ ![](screenshots/device/pad.png) -### 相关概念 +## 相关概念 - 一次开发，多端部署：一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。 - 自适应布局：当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。 @@ -24,7 +24,7 @@ - GridRow：栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用。 - GridCol：栅格子组件，必须作为栅格容器组件（GridRow）的子组件使用。 -### 使用说明 +## 使用说明 1. 分别在手机、折叠屏、平板安装并打开应用，不同设备的应用页面通过响应式布局和自适应布局呈现不同的效果。 2. 点击底部首页、热点、消息、我的图片文字按钮，切换显示对应的标签页，默认显示热点标签页。 @@ -33,11 +33,11 @@ 5. 热点页点击图片进入图片详情页。手机设备只展示图片，折叠屏及平板展示正文及评论。点击图片或返回按钮退回至热点页。 6. 热点页点击卡片正文进入详情页。详情页正文文字区域支持双指缩放。折叠屏右上角按钮支持切换左右及上下布局。点击返回按钮退回至热点页。 -### 相关权限 +## 相关权限 不涉及。 -### 约束与限制 +## 约束与限制 1. 本示例仅支持标准系统上运行，支持设备：华为手机。 2. HarmonyOS系统：HarmonyOS 5.0.5 Release及以上。 diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets index d7ad56a..2bbaa99 100644 --- a/products/phone/src/main/ets/entryability/EntryAbility.ets +++ b/products/phone/src/main/ets/entryability/EntryAbility.ets @@ -20,7 +20,6 @@ import { window, display } from '@kit.ArkUI'; import { CommonConstants as BaseCommon, BreakpointConstants } from 'base' export default class EntryAbility extends UIAbility { - onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); } @@ -71,16 +70,21 @@ export default class EntryAbility extends UIAbility { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); } - private updateBreakpoint(windowWidth: number) :void{ - let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels; - let curBp: string = ''; - if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[1]) { - curBp = BreakpointConstants.BREAKPOINT_SM; - } else if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[2]) { - curBp = BreakpointConstants.BREAKPOINT_MD; - } else { - curBp = BreakpointConstants.BREAKPOINT_LG; + private updateBreakpoint(windowWidth: number): void { + try { + let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels; + let curBp: string = ''; + if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[1]) { + curBp = BreakpointConstants.BREAKPOINT_SM; + } else if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[2]) { + curBp = BreakpointConstants.BREAKPOINT_MD; + } else { + curBp = BreakpointConstants.BREAKPOINT_LG; + } + AppStorage.setOrCreate('currentBreakpoint', curBp); + } catch (error) { + let err = error as BusinessError; + hilog.error(0x0000, 'testTag', `updateBreakpoint failed. code=${err.code}, message=${err.message}`); } - AppStorage.setOrCreate('currentBreakpoint', curBp); } } -- Gitee From c9979d0fb3edb1c6a1b1f9b1837e3dd9a93636c7 Mon Sep 17 00:00:00 2001 From: lloyd <353627866@qq.com> Date: Thu, 18 Sep 2025 16:07:53 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E3=80=90=E5=A4=9A=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E8=AF=84=E8=AE=BA=E7=95=8C=E9=9D=A2=E3=80=91?= =?UTF-8?q?=E6=8B=BC=E5=86=99=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- features/detail/Index.ets | 2 +- .../detail/src/main/ets/view/DetailPage.ets | 8 ++++---- .../{MircoBlogView.ets => MicroBlogView.ets} | 2 +- features/hot/src/main/ets/view/FoundView.ets | 17 +++++++++-------- .../src/main/ets/view/DetailVerticalView.ets | 4 ++-- 5 files changed, 17 insertions(+), 16 deletions(-) rename features/detail/src/main/ets/view/{MircoBlogView.ets => MicroBlogView.ets} (99%) diff --git a/features/detail/Index.ets b/features/detail/Index.ets index f7e4e71..bab47fd 100644 --- a/features/detail/Index.ets +++ b/features/detail/Index.ets @@ -17,7 +17,7 @@ export { DetailPage } from './src/main/ets/view/DetailPage'; export { CommentBarView } from './src/main/ets/view/CommentBarView'; -export { MircoBlogView } from './src/main/ets/view/MircoBlogView'; +export { MicroBlogView } from './src/main/ets/view/MicroBlogView'; export { CommentListView } from './src/main/ets/view/CommentListView'; diff --git a/features/detail/src/main/ets/view/DetailPage.ets b/features/detail/src/main/ets/view/DetailPage.ets index 1b06e57..178b496 100644 --- a/features/detail/src/main/ets/view/DetailPage.ets +++ b/features/detail/src/main/ets/view/DetailPage.ets @@ -15,7 +15,7 @@ import { BreakpointConstants as Breakpoint, CommonConstants as Common, BreakpointType } from 'base'; import { DetailTitleView } from './DetailTitleView'; -import { MircoBlogView } from './MircoBlogView'; +import { MicroBlogView } from './MicroBlogView'; import { CommentListView } from './CommentListView'; import { CommentBarView } from './CommentBarView'; import { CommentInputView } from './CommentInputView'; @@ -51,7 +51,7 @@ export struct DetailPage { GridCol({ span: { sm: 4, md: this.isFoldHorizontal ? 3 : 5, lg: 12 } }) { if ((this.isFoldHorizontal && this.currentBreakpoint === 'md')) { Scroll() { - MircoBlogView({ + MicroBlogView({ cardItem: this.cardItem, index: this.selectCardIndex }) @@ -65,7 +65,7 @@ export struct DetailPage { .layoutWeight(1) // [EndExclude detail_page] } else { - MircoBlogView({ + MicroBlogView({ cardItem: this.cardItem, index: this.selectCardIndex }) @@ -115,7 +115,7 @@ export struct DetailPage { Column() { Scroll() { - MircoBlogView({ + MicroBlogView({ cardItem: this.cardItem, index: this.selectCardIndex }) diff --git a/features/detail/src/main/ets/view/MircoBlogView.ets b/features/detail/src/main/ets/view/MicroBlogView.ets similarity index 99% rename from features/detail/src/main/ets/view/MircoBlogView.ets rename to features/detail/src/main/ets/view/MicroBlogView.ets index 2cdc3ea..beca022 100644 --- a/features/detail/src/main/ets/view/MircoBlogView.ets +++ b/features/detail/src/main/ets/view/MicroBlogView.ets @@ -31,7 +31,7 @@ interface ImageInfo { // [Start mirco_blog_view] @Component -export struct MircoBlogView { +export struct MicroBlogView { // [StartExclude mirco_blog_view] @StorageProp('currentBreakpoint') currentBreakpoint: string = Breakpoint.BREAKPOINT_LG; @StorageLink('isDetailPage') isDetailPage: boolean = false; diff --git a/features/hot/src/main/ets/view/FoundView.ets b/features/hot/src/main/ets/view/FoundView.ets index a4e8b20..e900a88 100644 --- a/features/hot/src/main/ets/view/FoundView.ets +++ b/features/hot/src/main/ets/view/FoundView.ets @@ -14,7 +14,7 @@ */ import { BreakpointConstants as Breakpoint, CommonConstants as BaseCommon, BreakpointType } from 'base'; -import { CommentBarView, MircoBlogView } from 'detail'; +import { CommentBarView, MicroBlogView } from 'detail'; import { CardArrayViewModel, CardArray } from 'detail'; import { CardItem } from 'detail'; import { CommonConstants as Common } from '../constants/CommonConstants'; @@ -28,7 +28,7 @@ export struct FoundView { @State tabIndexSelected: number = 0; jumpDetail() { - this.pageInfos.pushPath({name : 'detailPage'}); + this.pageInfos.pushPath({ name: 'detailPage' }); } @Builder @@ -104,7 +104,7 @@ export struct FoundView { ForEach(this.cardArrayViewModel.cardArray, (item: CardItem, index: number) => { FlowItem() { Column() { - MircoBlogView({ + MicroBlogView({ cardItem: item, // [StartExclude foundView] index: index, @@ -141,6 +141,7 @@ export struct FoundView { .borderRadius(this.currentBreakpoint === 'lg' ? '8vp' : '0vp') .backgroundColor('#FFFFFF') .margin(this.currentBreakpoint === 'lg' ? '6vp' : '0vp') + // [EndExclude foundView] } }, (item: CardItem, index: number) => index + JSON.stringify(item)) @@ -148,7 +149,7 @@ export struct FoundView { .columnsTemplate(this.currentBreakpoint !== 'lg' ? '1fr' : '1fr 1fr') // [End foundView] .backgroundColor(this.currentBreakpoint === 'lg' ? - $r('app.color.water_flow_bgc_lg') : $r('app.color.water_flow_bgc')) + $r('app.color.water_flow_bgc_lg') : $r('app.color.water_flow_bgc')) .linearGradient({ angle: Common.LINEAR_GRADIENT_ANGEL, colors: [ @@ -157,18 +158,18 @@ export struct FoundView { ] }) .rowsGap(this.currentBreakpoint === 'lg' ? - $r('app.float.zero') : $r('app.float.water_flow_rows_gap')) + $r('app.float.zero') : $r('app.float.water_flow_rows_gap')) .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) .padding({ left: this.currentBreakpoint === 'lg' ? $r('app.float.water_flow_padding_lg') : - $r('app.float.zero'), + $r('app.float.zero'), right: this.currentBreakpoint === 'lg' ? $r('app.float.water_flow_padding_lg') : - $r('app.float.zero'), + $r('app.float.zero'), top: this.currentBreakpoint === 'lg' ? $r('app.float.water_flow_padding_top_lg') : - $r('app.float.zero') + $r('app.float.zero') }) } } diff --git a/features/picture/src/main/ets/view/DetailVerticalView.ets b/features/picture/src/main/ets/view/DetailVerticalView.ets index 8227705..ae827f9 100644 --- a/features/picture/src/main/ets/view/DetailVerticalView.ets +++ b/features/picture/src/main/ets/view/DetailVerticalView.ets @@ -15,7 +15,7 @@ import { deviceInfo } from '@kit.BasicServicesKit'; import { CommonConstants as BaseCommon, BreakpointConstants as Breakpoint } from 'base' -import { MircoBlogView, CommentListView, CommentBarView, CardArrayViewModel, CardArray } from 'detail'; +import { MicroBlogView, CommentListView, CommentBarView, CardArrayViewModel, CardArray } from 'detail'; @Component export struct DetailVertical { @@ -27,7 +27,7 @@ export struct DetailVertical { Column() { Scroll() { Column() { - MircoBlogView({ + MicroBlogView({ cardItem: this.cardArrayViewModel.cardArray[this.selectCardIndex], index: this.selectCardIndex, showPicture: false, -- Gitee From bc03c69a2858053381c479faf553cc6840332049 Mon Sep 17 00:00:00 2001 From: lloyd <353627866@qq.com> Date: Thu, 18 Sep 2025 16:33:31 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E3=80=90=E5=A4=9A=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E8=AF=84=E8=AE=BA=E7=95=8C=E9=9D=A2=E3=80=91?= =?UTF-8?q?=E6=8B=BC=E5=86=99=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- features/detail/src/main/ets/view/DetailPage.ets | 4 ++-- features/detail/src/main/resources/base/element/float.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/features/detail/src/main/ets/view/DetailPage.ets b/features/detail/src/main/ets/view/DetailPage.ets index 178b496..c49c2f8 100644 --- a/features/detail/src/main/ets/view/DetailPage.ets +++ b/features/detail/src/main/ets/view/DetailPage.ets @@ -71,7 +71,7 @@ export struct DetailPage { }) // [StartExclude detail_page] .margin({ - top: $r('app.float.mirco_blog_mt') + top: $r('app.float.micro_blog_mt') }) // [EndExclude detail_page] } @@ -121,7 +121,7 @@ export struct DetailPage { }) // [StartExclude detail_page] .margin({ - top: $r('app.float.mirco_blog_mt') + top: $r('app.float.micro_blog_mt') }) // [EndExclude detail_page] } diff --git a/features/detail/src/main/resources/base/element/float.json b/features/detail/src/main/resources/base/element/float.json index 7c18f56..5bb4daf 100644 --- a/features/detail/src/main/resources/base/element/float.json +++ b/features/detail/src/main/resources/base/element/float.json @@ -341,7 +341,7 @@ "value": "32vp" }, { - "name": "mirco_blog_mt", + "name": "micro_blog_mt", "value": "16vp" }, { -- Gitee From 445d70a4935001d1e45f71ae2d089fa70bf24eb3 Mon Sep 17 00:00:00 2001 From: lloyd <353627866@qq.com> Date: Fri, 19 Sep 2025 17:15:46 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E3=80=90=E5=A4=9A=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E8=AF=84=E8=AE=BA=E7=95=8C=E9=9D=A2=E3=80=91?= =?UTF-8?q?=E6=8B=BC=E5=86=99=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- features/detail/Index.ets | 2 +- features/detail/src/main/ets/view/DetailPage.ets | 2 +- .../src/main/ets/view/{MicroBlogView.ets => MircoBlogView.ets} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename features/detail/src/main/ets/view/{MicroBlogView.ets => MircoBlogView.ets} (100%) diff --git a/features/detail/Index.ets b/features/detail/Index.ets index bab47fd..4552f5d 100644 --- a/features/detail/Index.ets +++ b/features/detail/Index.ets @@ -17,7 +17,7 @@ export { DetailPage } from './src/main/ets/view/DetailPage'; export { CommentBarView } from './src/main/ets/view/CommentBarView'; -export { MicroBlogView } from './src/main/ets/view/MicroBlogView'; +export { MicroBlogView } from './src/main/ets/view/MircoBlogView'; export { CommentListView } from './src/main/ets/view/CommentListView'; diff --git a/features/detail/src/main/ets/view/DetailPage.ets b/features/detail/src/main/ets/view/DetailPage.ets index c49c2f8..15e7678 100644 --- a/features/detail/src/main/ets/view/DetailPage.ets +++ b/features/detail/src/main/ets/view/DetailPage.ets @@ -15,7 +15,7 @@ import { BreakpointConstants as Breakpoint, CommonConstants as Common, BreakpointType } from 'base'; import { DetailTitleView } from './DetailTitleView'; -import { MicroBlogView } from './MicroBlogView'; +import { MicroBlogView } from './MircoBlogView'; import { CommentListView } from './CommentListView'; import { CommentBarView } from './CommentBarView'; import { CommentInputView } from './CommentInputView'; diff --git a/features/detail/src/main/ets/view/MicroBlogView.ets b/features/detail/src/main/ets/view/MircoBlogView.ets similarity index 100% rename from features/detail/src/main/ets/view/MicroBlogView.ets rename to features/detail/src/main/ets/view/MircoBlogView.ets -- Gitee