diff --git a/README.en.md b/README.en.md index 7de547a213e59ca48ed5475e9aebf791b75083f8..a61a50bbe854889d6c2ce88c7cbdb11d9723bd1a 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 ab9dc21bded927a124eeb6a04b6a8e5e224ca34c..fc65430fc96823dcc80d5332bb61e216a358fa38 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/features/detail/Index.ets b/features/detail/Index.ets index f7e4e71f1d25398916b2d4efa7ad1acf50289916..4552f5da7e22324c23a19b69fa0384272ce75848 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/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 1b06e5770a02a0895de83527e8cc6790663145c6..15e7678ab2460dd30dfb16419bf9bc2df9ec6562 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 './MircoBlogView'; 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,13 +65,13 @@ export struct DetailPage { .layoutWeight(1) // [EndExclude detail_page] } else { - MircoBlogView({ + MicroBlogView({ cardItem: this.cardItem, index: this.selectCardIndex }) // [StartExclude detail_page] .margin({ - top: $r('app.float.mirco_blog_mt') + top: $r('app.float.micro_blog_mt') }) // [EndExclude detail_page] } @@ -115,13 +115,13 @@ export struct DetailPage { Column() { Scroll() { - MircoBlogView({ + MicroBlogView({ cardItem: this.cardItem, index: this.selectCardIndex }) // [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/ets/view/MircoBlogView.ets b/features/detail/src/main/ets/view/MircoBlogView.ets index 2cdc3ea1b6f22bc1fe5e65373cf1ac80b557dfd3..beca022f78f97a2e4bd38205baebee3104afc26a 100644 --- a/features/detail/src/main/ets/view/MircoBlogView.ets +++ b/features/detail/src/main/ets/view/MircoBlogView.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/detail/src/main/resources/base/element/float.json b/features/detail/src/main/resources/base/element/float.json index 7c18f56efabaeeda900f7ea21ed43c675ac57242..5bb4daf687add1da21b1d13c18b4d4950efd0b30 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" }, { diff --git a/features/hot/src/main/ets/view/FoundView.ets b/features/hot/src/main/ets/view/FoundView.ets index a4e8b200d51c20109570ba1860c2d49e93c5dfa6..e900a8862cc296c11a2a6afaf4d1d40b0595d976 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 82277051c21fae62ad1f46ba27ad3df217321cc4..ae827f964a1f6c7bdc75dee58ffb0e8867909317 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, diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets index d7ad56a678171219b753afa3aa139376b9afdab2..2bbaa99db2d454581c19bb65940a853fb7d60130 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); } }