From 452b71e6992a76858799d657f612c6c9fe04c916 Mon Sep 17 00:00:00 2001 From: sfchu Date: Sat, 26 Jul 2025 14:26:26 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/ets/common/BreakpointSystem.ets | 2 +- entry/src/main/ets/common/Constants.ets | 39 ++++++++ entry/src/main/ets/common/MailContent.ets | 96 ++++++++++++++----- entry/src/main/ets/common/MailNavigation.ets | 89 ++++++++++++----- entry/src/main/ets/common/MailSideBar.ets | 42 +++++--- entry/src/main/ets/common/PhotoContent.ets | 51 +++++++--- entry/src/main/ets/common/PhotoSideBar.ets | 35 +++++-- entry/src/main/ets/common/SettingItem.ets | 55 ++++++----- entry/src/main/ets/common/WlanItem.ets | 77 ++++++++++----- 9 files changed, 351 insertions(+), 135 deletions(-) create mode 100644 entry/src/main/ets/common/Constants.ets diff --git a/entry/src/main/ets/common/BreakpointSystem.ets b/entry/src/main/ets/common/BreakpointSystem.ets index fd82cbe..1e21ec7 100644 --- a/entry/src/main/ets/common/BreakpointSystem.ets +++ b/entry/src/main/ets/common/BreakpointSystem.ets @@ -36,4 +36,4 @@ export class BreakpointType { } return undefined; } -} +} \ No newline at end of file diff --git a/entry/src/main/ets/common/Constants.ets b/entry/src/main/ets/common/Constants.ets new file mode 100644 index 0000000..9c9239e --- /dev/null +++ b/entry/src/main/ets/common/Constants.ets @@ -0,0 +1,39 @@ +/* + * Copyright (c) 2023 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. + */ + +export default class Constants { + /** + * Routes + */ + static readonly ROUTES: Route[] = [ + { + text: 'A+B+C', to: 'application/MailBox' + }, + { + text: 'A+C', to: 'application/PhotoAlbum' + }, + { + text: 'B+C', to: 'application/Settings' + } + ]; +} + +/** + * Route type define + */ +export interface Route { + text: string, + to: string +} diff --git a/entry/src/main/ets/common/MailContent.ets b/entry/src/main/ets/common/MailContent.ets index d9751ea..1395124 100644 --- a/entry/src/main/ets/common/MailContent.ets +++ b/entry/src/main/ets/common/MailContent.ets @@ -17,21 +17,21 @@ import { OperateTabs } from '../model/dataType'; @Component export struct MailContent { + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'sm'; @State buttonList: OperateTabs[] = [ new OperateTabs($r('app.media.reply'), $r('app.string.reply')), new OperateTabs($r('app.media.replyAll'), $r('app.string.replyAll')), new OperateTabs($r('app.media.forward'), $r('app.string.send')), new OperateTabs($r('app.media.ic_public_delete'), $r('app.string.delete')), - new OperateTabs($r('app.media.more'), $r('app.string.more')), + new OperateTabs($r('app.media.more'), $r('app.string.more')) ] - @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'md'; build() { NavDestination() { Column() { Column() { Row() { - if (this.currentBreakPoint === 'sm') { + if (this.currentWidthBreakpoint === 'sm') { Row().width(24).height(24) } else { Image($r('app.media.ic_expand')) @@ -43,51 +43,99 @@ export struct MailContent { .lineHeight(23) .margin({ left: 21 }) .fontWeight(FontWeight.Medium) - }.width('100%').height(56) + } + .width('100%') + .height(56) Row() { - Text($r('app.string.recUser')).fontSize(14).fontWeight(FontWeight.Regular) - Text($r('app.string.mailDesc')).padding({ left: 12 }).fontSize(16).fontWeight(FontWeight.Medium) + Text($r('app.string.recUser')) + .fontSize(14) + .fontWeight(FontWeight.Regular) + Text($r('app.string.mailDesc')) + .padding({ left: 12 }) + .fontSize(16) + .fontWeight(FontWeight.Medium) Blank() - Image($r('app.media.right_expend_grey')).width(24).height(12).opacity(0.8).rotate({ angle: 90 }) - }.width('100%').height(48) + Image($r('app.media.right_expend_grey')) + .width(24) + .height(12) + .opacity(0.8) + .rotate({ angle: 90 }) + } + .width('100%') + .height(48) - Text('PostMaster').fontSize(20).fontColor('#040404').lineHeight(23) - Text('09:42').margin({ top: 2 }).fontColor('#1818a').opacity(0.6) + Text('PostMaster') + .fontSize(20) + .fontColor('#040404') + .lineHeight(23) + Text('09:42') + .margin({ top: 2 }) + .fontColor('#1818a') + .opacity(0.6) Scroll() { Column() { - Text($r('app.string.textData')).fontSize(16).fontWeight(FontWeight.Regular).lineHeight(25) - Text($r('app.string.bodyTextPartOne')).fontSize(16).fontWeight(FontWeight.Regular).lineHeight(25) - Text('').lineHeight(25) - Image($r('app.media.orange')).width('100%').height(166).borderRadius(10) - Text('').lineHeight(25) - Text($r('app.string.bodyTextPartTwo')).fontSize(16).fontWeight(FontWeight.Regular).lineHeight(25) - Text($r('app.string.bodyTextPartThree')).fontSize(16).fontWeight(FontWeight.Regular).lineHeight(25) - }.alignItems(HorizontalAlign.Start) + Text($r('app.string.textData')) + .fontSize(16) + .fontWeight(FontWeight.Regular) + .lineHeight(25) + Text($r('app.string.bodyTextPartOne')) + .fontSize(16) + .fontWeight(FontWeight.Regular) + .lineHeight(25) + Text('') + .lineHeight(25) + Image($r('app.media.orange')) + .width('100%') + .height(166) + .borderRadius(10) + Text('') + .lineHeight(25) + Text($r('app.string.bodyTextPartTwo')) + .fontSize(16) + .fontWeight(FontWeight.Regular) + .lineHeight(25) + Text($r('app.string.bodyTextPartThree')) + .fontSize(16) + .fontWeight(FontWeight.Regular) + .lineHeight(25) + .padding({ right: 20 }) + } + .width('100%') + .alignItems(HorizontalAlign.Start) } .margin({ top: 20 }) .layoutWeight(1) .width('100%') .scrollBar(BarState.Off) - }.layoutWeight(1).padding({ left: 20, right: 20, top: 24 }).alignItems(HorizontalAlign.Start) + } + .layoutWeight(1) + .alignItems(HorizontalAlign.Start) + .padding({ left: 20, right: 20, top: 24 }) Row() { ForEach(this.buttonList, (item: OperateTabs) => { Column() { - Image(item.src).width(24).height(24) - Text(item.name).fontSize(10).margin({ top: 3 }).lineHeight(12) + Image(item.src) + .width(24) + .height(24) + Text(item.name) + .fontSize(10) + .margin({ top: 3 }) + .lineHeight(12) } }) } .width('100%') .height(56) .justifyContent(FlexAlign.SpaceBetween) - .padding(this.currentBreakPoint === 'sm' ? { left: 21, right: 21 } : { left: 46, right: 46 }) - .backgroundColor('#fff') + .padding(this.currentWidthBreakpoint === 'sm' ? + { left: 21, right: 21, bottom: 12 } : + { left: 46, right: 46, bottom: 12 }) + .backgroundColor($r('sys.color.gray_01')) } } - .width('100%') .height('100%') .hideTitleBar(true) } diff --git a/entry/src/main/ets/common/MailNavigation.ets b/entry/src/main/ets/common/MailNavigation.ets index 0746918..6322a89 100644 --- a/entry/src/main/ets/common/MailNavigation.ets +++ b/entry/src/main/ets/common/MailNavigation.ets @@ -21,17 +21,19 @@ export struct MailNavigation { notesNavMode: NavigationMode | undefined; @State pathInfo: NavPathStack = new NavPathStack(); @State currentIndex: number = 0; - @State mailList: string[] = ['1', '1', '1', '1', '1', '1']; - @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'md'; + @State mailList: string[] = ['1', '1', '1', '1', '1', '1', '1', '1']; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'md'; @Builder myRouter(name: string, param?: number | undefined) { - MailContent() + if (name === 'mailContent') { + MailContent() + } } @Builder NavigationMenus() { - if (this.currentBreakPoint !== 'md') { + if (this.currentWidthBreakpoint !== 'md') { Row() { Image($r('app.media.add')) .width(24) @@ -40,7 +42,9 @@ export struct MailNavigation { .width(24) .height(24) .margin({ left: 24, right: 0 }) - }.height(56).padding({ top: 48 }) + } + .height(56) + .padding({ top: 48, right: 24 }) } } @@ -48,7 +52,7 @@ export struct MailNavigation { NavigationTitle() { Column() { Text($r('app.string.recvBox')) - .fontColor('#000') + .fontColor('#000000') .fontSize(30) .lineHeight(41) .fontWeight(FontWeight.Medium) @@ -57,12 +61,19 @@ export struct MailNavigation { .fontSize(14) .lineHeight(20) .margin({ top: 2 }) - }.alignItems(HorizontalAlign.Start).height(162).width(138).padding({ top: 80, left: 24 }) + } + .width(138) + .height(162) + .alignItems(HorizontalAlign.Start) + .padding({ top: 80, left: 24 }) } aboutToAppear() { - this.pathInfo.pushPath({ name: 'one' }) + if (this.currentWidthBreakpoint !== 'sm') { + this.pathInfo?.pushPath({ name: 'mailContent' }); + } } + // [Start navigation_mode_build] build() { // [Start navigation_mode] @@ -72,55 +83,81 @@ export struct MailNavigation { Stack({ alignContent: Alignment.Start }) { Column() { Row() { - Search({ placeholder: $r('app.string.searchMail') }).margin({ left: 12, right: 12 }) - }.height(56) + Search({ placeholder: $r('app.string.searchMail') }) + } + .width('100%') + .margin(this.currentWidthBreakpoint === 'sm' ? { left: 18, right: 18 } : { left: 12, right: 12 }) + .height(56) List() { ForEach(this.mailList, (item: string, index: number | undefined) => { ListItem() { Column() { Row() { - - Text($r('app.string.nonSense')).fontSize(16).lineHeight(22).fontColor('#1818a') + Text($r('app.string.nonSense')) + .fontSize(16) + .lineHeight(22) + .fontColor('#1818a') Blank() - Text('4/12').fontSize(12).opacity(0.6) - }.width('100%') + Text('4/12') + .fontSize(12) + .opacity(0.6) + } + .width('100%') Column() { - Text($r('app.string.textPartOne')).lineHeight(19).fontSize(14).fontColor('#1818a') + Text($r('app.string.textPartOne')) + .lineHeight(19) + .fontSize(14) + .fontColor('#1818a') Text($r('app.string.textPartTwo')) .fontSize(14) .fontColor('#1818a') .opacity(0.6) .lineHeight(19) - }.width('100%').alignItems(HorizontalAlign.Start) - }.height(96).justifyContent(FlexAlign.Center) - }.padding({ left: 12, right: 12 }) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + .height(96) + .justifyContent(FlexAlign.Center) + } .backgroundColor(index === 2 ? '#19254ff7' : '') .borderRadius(10) + .padding({ left: 12, right: 12 }) }) - }.divider({ strokeWidth: 1, startMargin: 12, endMargin: 12 }) - .height('100%').width('100%') + } + .width('100%') + .height('100%') + .scrollBar(BarState.Off) .layoutWeight(1) - }.height('100%').width('100%') + .divider({ strokeWidth: 1, startMargin: 12, endMargin: 12 }) + .onClick(() => { + this.pathInfo?.pushPath({ name: 'mailContent' }); + }) + } + .width('100%') + .height('100%') .padding({ left: 12, right: 12 }) - if (this.currentBreakPoint !== 'lg') { - Image($r('app.media.ic_public_list_add_light')).width(48).height(48).position({ x: 240, y: 549 }) + if (this.currentWidthBreakpoint !== 'lg') { + Image($r('app.media.ic_public_list_add_light')) + .width(48) + .height(48) + .position(this.currentWidthBreakpoint === 'sm' ? { x: 320, y: 590 } : { x: 250, y: 550 }) } } // [EndExclude navigation_mode_build] // [EndExclude navigation_mode] } - .mode(this.currentBreakPoint === 'sm' ? NavigationMode.Stack : this.notesNavMode) + .mode(this.currentWidthBreakpoint === 'sm' ? NavigationMode.Stack : this.notesNavMode) // [End navigation_mode] .navDestination(this.myRouter) // [StartExclude navigation_mode_build] - .navBarWidth(new BreakpointType(321, 321, 390).GetValue(this.currentBreakPoint) as number | Length) + .navBarWidth(new BreakpointType(321, 321, 390).GetValue(this.currentWidthBreakpoint) as number | Length) .menus(this.NavigationMenus) .width('100%') .title({ builder: this.NavigationTitle, height: 162 }) - .hideBackButton(true) // [EndExclude navigation_mode_build] } // [End navigation_mode_build] diff --git a/entry/src/main/ets/common/MailSideBar.ets b/entry/src/main/ets/common/MailSideBar.ets index 5313b5a..f3dd0f1 100644 --- a/entry/src/main/ets/common/MailSideBar.ets +++ b/entry/src/main/ets/common/MailSideBar.ets @@ -15,9 +15,10 @@ import { MailType } from '../model/dataType'; -@Extend(Text) function TextStyle() { +@Extend(Text) +function TextStyle() { .backgroundColor('#254ff7') - .fontColor('#fff') + .fontColor($r('sys.color.white')) .fontSize(10) .textAlign(TextAlign.Center) } @@ -27,9 +28,9 @@ export struct MailSideBar { build() { Column() { AccountInfo() - MailStatusList() - }.width('100%') + } + .width('100%') } } @@ -40,7 +41,8 @@ struct AccountInfo { 'jiaozi@163.com', ] - @Builder accountInfo() { + @Builder + accountInfo() { Column() { Row() { Text($r('app.string.account')) @@ -74,8 +76,10 @@ struct AccountInfo { .margin({ left: 13 }) Blank() if (index === 0) { - Image($r('app.media.ic_confirm')).width(16) - .height(16).fillColor('#244ff7') + Image($r('app.media.ic_confirm')) + .width(16) + .height(16) + .fillColor('#244ff7') } else { Text('9') .width(18) @@ -89,6 +93,7 @@ struct AccountInfo { } .width('100%') .height('100%') + .scrollBar(BarState.Off) .padding({ left: 16, right: 16 }) .divider({ strokeWidth: 1 }) } @@ -102,9 +107,10 @@ struct MailStatusList { new MailType($r('app.string.unRead'), 5, $r('app.media.unread')), new MailType($r('app.string.sended'), 9, $r('app.media.ic_favourites')), new MailType($r('app.string.allFolders'), 0, $r('app.media.allFolders')) - ] + ]; - @Builder accountInfo() { + @Builder + accountInfo() { Column() { Row() { Text($r('app.string.account')).fontSize(14) @@ -112,7 +118,9 @@ struct MailStatusList { Text($r('app.string.addAccount')) .fontSize(14) .fontColor('#0a59f7') - }.width('100%').height(48) + } + .width('100%') + .height(48) } } @@ -120,7 +128,8 @@ struct MailStatusList { List() { ListItem() { this.accountInfo() - }.padding({ left: 9, right: 9 }) + } + .padding({ left: 9, right: 9 }) ForEach(this.mailState, (item: MailType, index: number | undefined) => { ListItem() { @@ -139,13 +148,18 @@ struct MailStatusList { .fontColor('#18181a') .fontSize(14) } - }.width('100%') - }.padding({ left: 14, right: 24 }) + } + .width('100%') + } + .padding({ left: 14, right: 24 }) .height(56) .backgroundColor(index === 0 ? '#19254ff7' : '') .borderRadius(16) }) - }.width('100%').height('100%') + } + .width('100%') + .height('100%') + .scrollBar(BarState.Off) .padding({ left: 7, right: 7 }) .margin({ top: 8 }) .divider({ strokeWidth: 1, startMargin: 12, endMargin: 12 }) diff --git a/entry/src/main/ets/common/PhotoContent.ets b/entry/src/main/ets/common/PhotoContent.ets index 0792553..e40f9ba 100644 --- a/entry/src/main/ets/common/PhotoContent.ets +++ b/entry/src/main/ets/common/PhotoContent.ets @@ -25,19 +25,19 @@ export struct PhotoContent { new photoType($r('app.string.avatar'), 223, $r('app.media.P5')), new photoType($r('app.string.address'), 125, $r('app.media.P6')), new photoType($r('app.string.category'), 234, $r('app.media.P7')), - new photoType($r('app.string.pictureType'), 22, $r('app.media.P8')), + new photoType($r('app.string.pictureType'), 22, $r('app.media.P8')) ] @State columnsTemplate: string = '1fr 1fr 1fr'; @Link @Watch('onStateChange') sideBarStatus: boolean; - @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'sm'; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'sm'; aboutToAppear() { - this.columnsTemplate = this.currentBreakPoint === 'sm' ? '1fr 1fr 1fr 1fr' : '1fr 1fr 1fr'; + this.columnsTemplate = this.currentWidthBreakpoint === 'sm' ? '1fr 1fr 1fr 1fr' : '1fr 1fr 1fr'; } onStateChange() { this.getUIContext().animateTo({ duration: 300 }, () => { - if (this.sideBarStatus === true && this.currentBreakPoint !== 'sm') { + if (this.sideBarStatus === true && this.currentWidthBreakpoint !== 'sm') { this.columnsTemplate = '1fr 1fr 1fr'; } else { this.columnsTemplate = '1fr 1fr 1fr 1fr'; @@ -48,12 +48,21 @@ export struct PhotoContent { build() { Column() { Row() { - Text($r('app.string.album')).fontSize(20).fontWeight(FontWeight.Medium) + Text($r('app.string.album')) + .fontSize(20) + .fontWeight(FontWeight.Medium) .margin({ left: this.sideBarStatus ? 0 : 36 }) Blank() - Image($r('app.media.add')).width(24).aspectRatio(1) - Image($r('app.media.more')).width(24).aspectRatio(1).margin({ left: 24 }) - }.height(56).width('100%') + Image($r('app.media.add')) + .width(24) + .aspectRatio(1) + Image($r('app.media.more')) + .width(24) + .aspectRatio(1) + .margin({ left: 24 }) + } + .width('100%') + .height(56) Grid() { ForEach(this.photoList, (item: photoType) => { @@ -61,16 +70,32 @@ export struct PhotoContent { Column() { Image(item.src).width('100%').aspectRatio(1).borderRadius(12) Column() { - Text(item.name).margin({ top: 8 }).fontSize(14).fontWeight(FontWeight.Regular) - Text(item.count.toString()).fontSize(12).fontWeight(FontWeight.Regular) - }.width('100%').alignItems(HorizontalAlign.Start).padding({ left: 8, right: 8 }) + Text(item.name) + .fontSize(14) + .fontWeight(FontWeight.Regular) + .margin({ top: 8 }) + Text(item.count.toString()) + .fontSize(12) + .fontWeight(FontWeight.Regular) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + .padding({ left: 8, right: 8 }) } } }) - }.columnsTemplate(this.columnsTemplate) + } + .scrollBar(BarState.Off) + .columnsTemplate(this.columnsTemplate) .columnsGap(22) .rowsGap(17) .margin({ top: 7 }) - }.padding({ left: 24, right: 18 }) + .padding({ bottom: AppStorage.get('naviIndicatorHeight') as number + 48 }) + } + .margin({ + left: 24, + right: 18, + top: AppStorage.get('statusBarHeight') + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/common/PhotoSideBar.ets b/entry/src/main/ets/common/PhotoSideBar.ets index e6a7ccd..192f1e2 100644 --- a/entry/src/main/ets/common/PhotoSideBar.ets +++ b/entry/src/main/ets/common/PhotoSideBar.ets @@ -32,8 +32,12 @@ export struct PhotoSideBar { build() { Column() { Row() { - Search({ placeholder: $r('app.string.placeholderText') }).backgroundColor('#fff').focusable(false) - }.height(56).width('100%') + Search({ placeholder: $r('app.string.placeholderText') }) + .backgroundColor($r('sys.color.white')) + .focusable(false) + } + .width('100%') + .height(56) List() { ListItem() { @@ -45,7 +49,9 @@ export struct PhotoSideBar { .opacity(0.9) .height(48) .margin({ left: 8 }) - }.padding({ left: 8 }).width('100%') + } + .width('100%') + .padding({ left: 8 }) } ListItem() { @@ -64,7 +70,9 @@ export struct PhotoSideBar { .height(12) .rotate({ angle: 90 }) .opacity(0.8) - }.padding({ left: 8 }).width('100%') + } + .width('100%') + .padding({ left: 8 }) .backgroundColor('#19254ff7') .borderRadius(10) } @@ -80,17 +88,26 @@ export struct PhotoSideBar { .margin({ left: 8 }) Blank() if (index === this.photoList.length - 1) { - Image($r('app.media.ic_public_lock_filled')).width(24).aspectRatio(1) + Image($r('app.media.ic_public_lock_filled')) + .width(24) + .aspectRatio(1) } else { - Text(item.count.toString()).fontSize(14).fontWeight(FontWeight.Regular) + Text(item.count.toString()) + .fontSize(14) + .fontWeight(FontWeight.Regular) } - }.padding({ left: 16, right: 24 }).width('100%') + } + .width('100%') + .padding({ left: 16, right: 24 }) } }) } + .width('100%') + .height('100%') .margin({ top: 16 }) - .width('100%').height('100%') - }.width('100%').height('100%') + } + .height('100%') + .width('100%') .padding({ left: 12, right: 12 }) } } \ No newline at end of file diff --git a/entry/src/main/ets/common/SettingItem.ets b/entry/src/main/ets/common/SettingItem.ets index 4db7ec4..39228f3 100644 --- a/entry/src/main/ets/common/SettingItem.ets +++ b/entry/src/main/ets/common/SettingItem.ets @@ -15,25 +15,31 @@ @Component export struct MainItem { - itemDesc: Resource = $r("app.string.nonSense"); - src: Resource = $r("app.media.icon"); + itemDesc: Resource = $r('app.string.nonSense'); + src: Resource = $r('app.media.icon'); isUserItem: boolean = false; - itemStatusDesc: Resource = $r("app.string.nonSense"); + itemStatusDesc: Resource = $r('app.string.nonSense'); build() { Row() { - Image(this.src).width(32).aspectRatio(1) - + Image(this.src) + .width(32) + .aspectRatio(1) if (this.isUserItem) { Column() { - Text($r('app.string.userInfo')).fontSize(16).fontWeight(FontWeight.Medium) + Text($r('app.string.userInfo')) + .fontSize(16) + .fontWeight(FontWeight.Medium) Text($r('app.string.aboutUserInfo')) .fontSize(14) .fontWeight(FontWeight.Regular) .opacity(0.6) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) - }.alignItems(HorizontalAlign.Start).margin({ left: 12 }).flexShrink(1) + } + .alignItems(HorizontalAlign.Start) + .flexShrink(1) + .margin({ left: 12 }) } else { Text(this.itemDesc) .fontSize(16) @@ -44,32 +50,33 @@ export struct MainItem { .align(Alignment.Start) .margin({ left: 16 }) } - Blank() - if (this.itemStatusDesc) { - Text(this.itemStatusDesc).fontWeight(FontWeight.Regular).fontSize(14) + Text(this.itemStatusDesc) + .fontSize(14) + .fontWeight(FontWeight.Regular) } Image($r('app.media.ic_settings_arrow')) .width(12) .height(24) .fillColor($r('sys.color.ohos_id_color_fourth')) .margin({ left: 4 }) - }.padding({ left: 12, right: 12 }) + } + .width('100%') .height(56) .borderRadius(20) - .width('100%') + .padding({ left: 12, right: 12 }) } } @Component export struct SubItem { - itemDesc: Resource = $r("app.string.nonSense"); - src: Resource = $r("app.media.icon"); + itemDesc: Resource = $r('app.string.nonSense'); + src: Resource = $r('app.media.icon'); isShowButton: boolean = false; isShowRightArrow: boolean = false; - itemStatusDesc: Resource = $r("app.string.nonSense"); - content: Resource = $r("app.string.nonSense"); + itemStatusDesc: Resource = $r('app.string.nonSense'); + content: Resource = $r('app.string.nonSense'); isLinkAddress: boolean = false; build() { @@ -86,12 +93,13 @@ export struct SubItem { Text(this.content) .fontWeight(FontWeight.Regular) .fontSize(14) - .fontColor('#99000000').margin({ top: 1.5 }) + .fontColor('#99000000') + .margin({ top: 1.5 }) } - }.alignItems(HorizontalAlign.Start) + } + .alignItems(HorizontalAlign.Start) Blank() - if (this.isShowButton) { Toggle({ type: ToggleType.Switch, isOn: true }) .id('ToggleSwitch') @@ -100,14 +108,15 @@ export struct SubItem { .selectedColor('#007DFF') } else if (this.isShowRightArrow) { if (this.itemStatusDesc) { - Text(this.itemStatusDesc).fontWeight(FontWeight.Regular).fontSize(14) + Text(this.itemStatusDesc) + .fontSize(14) + .fontWeight(FontWeight.Regular) } Image($r('app.media.ic_settings_arrow')) .width(12) .height(24) .fillColor($r('sys.color.ohos_id_color_fourth')) - .margin({ left: 4 - }) + .margin({ left: 4 }) } else { Image(this.src) .width(24) @@ -115,9 +124,9 @@ export struct SubItem { .fillColor($r('sys.color.ohos_id_color_primary')) } } + .width('100%') .height(56) .borderRadius(20) - .width('100%') .padding({ left: 12, right: 12 }) } } \ No newline at end of file diff --git a/entry/src/main/ets/common/WlanItem.ets b/entry/src/main/ets/common/WlanItem.ets index f062288..ca7bc3b 100644 --- a/entry/src/main/ets/common/WlanItem.ets +++ b/entry/src/main/ets/common/WlanItem.ets @@ -14,12 +14,12 @@ */ import { SubItem } from './SettingItem'; -import { router } from '@kit.ArkUI'; @Component export struct WlanItem { @State netWorkStatus: Resource = $r('app.string.closed'); - @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'md'; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'md'; + @Consume('pathInfo') pathInfo: NavPathStack; @Builder CustomDivider() { @@ -32,22 +32,37 @@ export struct WlanItem { build() { NavDestination() { Row() { - if (this.currentBreakPoint === 'sm') { - Image($r('app.media.ic_public_back')).width(24).height(24).margin({ right: 16 }) - .onClick(()=>{ - this.getUIContext().getRouter().back(); - }) + if (this.currentWidthBreakpoint === 'sm') { + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.chevron_left')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize(24) + } + .height(40) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) + .margin({ right: 16 }) + .onClick(() => { + this.pathInfo.pop(); + }) } - Text($r('app.string.WLAN')).fontSize(20).fontWeight(FontWeight.Medium) + Text($r('app.string.WLAN')) + .fontSize(20) + .fontWeight(FontWeight.Medium) Blank() - Image($r('app.media.ic_public_help')).width(24).aspectRatio(1) - }.width('100%').height(26).margin({ top: 38, bottom: 24 }) - .padding({ left: 24, right: 24 }) + Image($r('app.media.ic_public_help')) + .width(24) + .aspectRatio(1) + } + .width('100%') + .margin({ bottom: 24 }) + .padding({ top: 8, right: 16, left: 16 }) List({ space: 20 }) { ListItem() { SubItem({ itemDesc: $r('app.string.WLAN'), isShowButton: true }) - }.width('100%') + } + .width('100%') .borderRadius(16) .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) .padding({ top: 4, bottom: 4 }) @@ -58,21 +73,27 @@ export struct WlanItem { isShowRightArrow: true, itemStatusDesc: this.netWorkStatus }) - }.width('100%') + } + .width('100%') .borderRadius(16) .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) .padding({ top: 4, bottom: 4 }) ListItem() { SubItem({ itemDesc: $r('app.string.moreWLANSettings'), isShowRightArrow: true }) - }.width('100%') + } + .width('100%') .borderRadius(16) .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) .padding({ top: 4, bottom: 4 }) ListItem() { Column() { - Text($r('app.string.wlanConnected')).fontSize(16).fontColor('#66000000').width('100%').padding({ left: 12 }) + Text($r('app.string.wlanConnected')) + .fontSize(16) + .fontColor('#66000000') + .width('100%') + .padding({ left: 12 }) SubItem({ itemDesc: $r('app.string.wifiName'), content: $r('app.string.connected'), @@ -90,7 +111,11 @@ export struct WlanItem { ListItem() { Column() { Row() { - Text($r('app.string.wlanUseful')).fontSize(16).fontColor('#66000000').width('100%').padding({ left: 12 }) + Text($r('app.string.wlanUseful')) + .fontSize(16) + .fontColor('#66000000') + .width('100%') + .padding({ left: 12 }) } Column() { @@ -122,18 +147,20 @@ export struct WlanItem { ListItem() { SubItem({ itemDesc: $r('app.string.addNetWork'), isLinkAddress: true }) - }.width('100%') + } + .width('100%') .borderRadius(16) .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) .padding({ top: 4, bottom: 4 }) - + .margin({ bottom: AppStorage.get('naviIndicatorHeight') as number + 48 }) } - .padding({ left: 12, right: 12 }) - .width('100%').height('100%') - }.title('WLAN') + .width('100%') + .height('100%') + .scrollBar(BarState.Off) + .padding({ right: 12, left: 12 }) + } + .title('WLAN') .hideTitleBar(true) - .backgroundColor('#f1f3f5') + .backgroundColor($r('sys.color.gray_01')) } -} - - +} \ No newline at end of file -- Gitee From 846acb502c81dab9f8d3e4c7cac966cbeed77704 Mon Sep 17 00:00:00 2001 From: sfchu Date: Sat, 26 Jul 2025 14:40:39 +0800 Subject: [PATCH 2/7] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/application/MailBox.ets | 36 ++++----- entry/src/main/ets/application/PhotoAlbum.ets | 21 ++--- entry/src/main/ets/application/Settings.ets | 57 +++++++++----- .../main/ets/entryability/EntryAbility.ets | 76 +++++++++++++++++-- entry/src/main/ets/pages/Index.ets | 49 ++++++++---- .../main/resources/base/element/string.json | 4 + .../main/resources/en_US/element/string.json | 4 + .../main/resources/zh_CN/element/string.json | 4 + 8 files changed, 184 insertions(+), 67 deletions(-) diff --git a/entry/src/main/ets/application/MailBox.ets b/entry/src/main/ets/application/MailBox.ets index 2406b19..5e4e9a7 100644 --- a/entry/src/main/ets/application/MailBox.ets +++ b/entry/src/main/ets/application/MailBox.ets @@ -22,7 +22,7 @@ let storage = uiContext?.getSharedLocalStorage(); @Entry(storage) @Component struct MailBox { - @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'md'; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'sm'; @State isFold: boolean = false; @State sideBarWidth: number = 304; @@ -38,43 +38,45 @@ struct MailBox { } .width('100%') .height('100%') - .backgroundColor('#f1f3f5') + .backgroundColor($r('sys.color.gray_01')) // Area B+C Column() { Stack() { MailNavigation() + .margin({ top: 18 }) // [StartExclude set_show_side_bar] - if (this.isFold && this.currentBreakPoint !== 'lg') { - Column().width('100%').height('100%').backgroundColor('#33000000') + if (this.isFold && this.currentWidthBreakpoint !== 'lg') { + Column() + .width('100%') + .height('100%') + .backgroundColor('#33000000') } // [EndExclude set_show_side_bar] } } - .height('100%') .width('100%') + .height('100%') } - .showSideBar(this.currentBreakPoint === 'lg') + .showSideBar(this.currentWidthBreakpoint === 'lg') // [End set_show_side_bar] // [StartExclude set_show_side_bar_build] .sideBarWidth(this.sideBarWidth) .minSideBarWidth(240) - .minContentWidth(this.currentBreakPoint === 'sm' ? 360 : 600) - .controlButton({ left: 24, top: 40, width: 24, height: 24 }) + .minContentWidth(this.currentWidthBreakpoint === 'sm' ? 360 : 600) + .controlButton({ + left: 24, + top: AppStorage.get('statusBarHeight') as number + 18, + width: 24, + height: 24 + }) .onChange((value: boolean) => { this.isFold = value; }) + // [EndExclude set_show_side_bar_build] } } - // [StartExclude set_show_side_bar_build] - .onBreakpointChange((breakpoint: string) => { - this.currentBreakPoint = breakpoint; - }) - // [EndExclude set_show_side_bar_build] } // [End set_show_side_bar_build] -} - - - +} \ No newline at end of file diff --git a/entry/src/main/ets/application/PhotoAlbum.ets b/entry/src/main/ets/application/PhotoAlbum.ets index 6d93c29..215c45c 100644 --- a/entry/src/main/ets/application/PhotoAlbum.ets +++ b/entry/src/main/ets/application/PhotoAlbum.ets @@ -30,22 +30,25 @@ struct PhotoAlbum { GridCol({ span: { sm: 12, md: 12, lg: 12 } }) { SideBarContainer(SideBarContainerType.AUTO) { Column() { - PhotoSideBar().margin({ top: 64 }) - }.backgroundColor('#f1f3f5') + PhotoSideBar() + .margin({ top: AppStorage.get('statusBarHeight') as number + 44 }) + } + .backgroundColor($r('sys.color.gray_01')) Column() { PhotoContent({ sideBarStatus: $sideBarStatus }) } } - .controlButton({ left: 24, top: 16, width: 24, height: 24 }) + .controlButton({ + left: 24, + top: AppStorage.get('statusBarHeight') as number + 14, + width: 24, + height: 24 + }) .onChange((value: boolean) => { this.sideBarStatus = value; }) } - }.onBreakpointChange((breakpoint: string) => { - this.currentBreakPoint = breakpoint; - }) + } } -} - - +} \ No newline at end of file diff --git a/entry/src/main/ets/application/Settings.ets b/entry/src/main/ets/application/Settings.ets index 83ef452..65ae9b0 100644 --- a/entry/src/main/ets/application/Settings.ets +++ b/entry/src/main/ets/application/Settings.ets @@ -22,14 +22,18 @@ let storage = uiContext?.getSharedLocalStorage(); @Entry(storage) @Component struct Settings { - @State pathInfo: NavPathStack = new NavPathStack(); - @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'md'; + @Provide('pathInfo') pathInfo: NavPathStack = new NavPathStack(); + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'md'; - @Builder myRouter(name: string, param?: number | undefined) { - WlanItem() + @Builder + myRouter(name: string, param?: number | undefined) { + if (name === 'wlanItem') { + WlanItem() + } } - @Builder CustomDivider() { + @Builder + CustomDivider() { Divider() .strokeWidth('1px') .color($r('sys.color.ohos_id_color_list_separator')) @@ -37,7 +41,9 @@ struct Settings { } aboutToAppear() { - this.pathInfo.pushPath({ name: 'one' }); + if (this.currentWidthBreakpoint !== 'sm') { + this.pathInfo.pushPath({ name: 'wlanItem' }); + } } build() { @@ -47,15 +53,16 @@ struct Settings { List({ space: 10 }) { ListItem() { Search({ placeholder: $r('app.string.search') }) - .backgroundColor('#fff') + .backgroundColor($r('sys.color.white')) } - .padding({ top: 8, bottom: 8 }) .width('100%') + .padding({ top: 8, bottom: 8 }) ListItem() { MainItem({ isUserItem: true, src: $r('app.media.ic_mine_normal') }) - .backgroundColor('#fff') - .borderRadius(20).padding({ top: 12, bottom: 12 }) + .backgroundColor($r('sys.color.white')) + .borderRadius(20) + .padding({ top: 12, bottom: 12 }) } ListItem() { @@ -65,6 +72,9 @@ struct Settings { src: $r('app.media.wlan'), itemStatusDesc: $r('app.string.closed') }) + .onClick(() => { + this.pathInfo.pushPath({ name: 'wlanItem' }); + }) this.CustomDivider() MainItem({ itemDesc: $r('app.string.bluetooth'), @@ -78,7 +88,8 @@ struct Settings { itemDesc: $r('app.string.moreConnections'), src: $r('app.media.ic_settings_more_connections') }) - }.width('100%') + } + .width('100%') .borderRadius(24) .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) .padding({ top: 4, bottom: 4 }) @@ -89,7 +100,8 @@ struct Settings { MainItem({ itemDesc: $r('app.string.desktopAndWallpaper'), src: $r('app.media.desk') }) this.CustomDivider() MainItem({ itemDesc: $r('app.string.displayAndBrightness'), src: $r('app.media.displayAndBrightness') }) - }.width('100%') + } + .width('100%') .borderRadius(24) .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) .padding({ top: 4, bottom: 4 }) @@ -106,7 +118,8 @@ struct Settings { MainItem({ itemDesc: $r('app.string.safe'), src: $r('app.media.security') }) this.CustomDivider() MainItem({ itemDesc: $r('app.string.privacy'), src: $r('app.media.privacy') }) - }.width('100%') + } + .width('100%') .borderRadius(24) .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) .padding({ top: 4, bottom: 4 }) @@ -119,24 +132,26 @@ struct Settings { MainItem({ itemDesc: $r('app.string.system'), src: $r('app.media.system') }) this.CustomDivider() MainItem({ itemDesc: $r('app.string.aboutDevice'), src: $r('app.media.aboutDevice') }) - }.width('100%') + } + .width('100%') .borderRadius(24) .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) .padding(4) } } - .width('100%').height('100%') + .width('100%') + .height('100%') + .scrollBar(BarState.Off) .padding({ left: 12, right: 12 }) } - .navBarWidth(293) - .title($r('app.string.settings')) - .backgroundColor('#f1f3f5') .width('100%') .height('100%') + .navBarWidth(293) + .title($r('app.string.settings')) + .backgroundColor($r('sys.color.gray_01')) + .padding({ top: AppStorage.get('statusBarHeight') }) .navDestination(this.myRouter) } - }.onBreakpointChange((breakpoint: string) => { - this.currentBreakPoint = breakpoint; - }) + } } } \ No newline at end of file diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index a8504cb..ccc6874 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -13,11 +13,39 @@ * limitations under the License. */ -import { UIAbility,AbilityConstant,Want } from '@kit.AbilityKit'; -import { window } from '@kit.ArkUI'; +import { UIAbility, AbilityConstant, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; +import { UIContext, window } from '@kit.ArkUI'; +import { BusinessError } from '@kit.BasicServicesKit'; export default class EntryAbility extends UIAbility { + private windowObj?: window.Window; + private uiContext?: UIContext; + private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => { + let widthBp: WidthBreakpoint = this.uiContext!.getWindowWidthBreakpoint(); + let heightBp: HeightBreakpoint = this.uiContext!.getWindowHeightBreakpoint(); + + AppStorage.setOrCreate('currentWidthBreakpoint', + widthBp === 0 ? 'xs' : widthBp === 1 ? 'sm' : widthBp === 2 ? 'md' : widthBp === 3 ? 'lg' : 'xl'); + AppStorage.setOrCreate('currentHeightBreakpoint', + heightBp === 0 ? 'sm' : heightBp === 1 ? 'md' : heightBp === 2 ? 'md' : 'lg'); + this.setDefaultOrientation(); + } + + setDefaultOrientation(): void { + let windowRect: window.Rect = this.windowObj!.getWindowProperties().windowRect; + let windowWidthVp: number = this.uiContext!.px2vp(windowRect.width); + let windowHeightVp: number = this.uiContext!.px2vp(windowRect.height); + + if (Math.min(windowWidthVp, windowHeightVp) > 348) { + this.windowObj?.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); + AppStorage.setOrCreate('isPortrait', false); + } else { + this.windowObj?.setPreferredOrientation(window.Orientation.PORTRAIT); + AppStorage.setOrCreate('isPortrait', true); + } + } + onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); } @@ -29,7 +57,11 @@ export default class EntryAbility extends UIAbility { onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); - + windowStage.getMainWindow().then((windowObj) => { + this.windowObj = windowObj; + }).catch((err: BusinessError) => { + hilog.error(0x0000, 'testTag', 'Failed to obtain the main window. Cause: %{public}s', JSON.stringify(err) ?? ''); + }); windowStage.loadContent('pages/Index', (err, data) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); @@ -37,8 +69,27 @@ export default class EntryAbility extends UIAbility { } hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); - let uiContext: UIContext | undefined = windowStage.getMainWindowSync().getUIContext() + // Immersive Adaptation + this.immersionFuc(windowStage); + + let uiContext: UIContext | undefined = windowStage.getMainWindowSync().getUIContext(); AppStorage.setOrCreate('uiContext', uiContext); + + this.uiContext = this.windowObj!.getUIContext(); + this.setDefaultOrientation(); + + // The system interface depends on UIContext and needs to be invoked after the page is loaded. It needs to be written in the loadContent callback function. + windowStage.getMainWindow().then((data: window.Window) => { + let widthBp: WidthBreakpoint = this.uiContext!.getWindowWidthBreakpoint(); + let heightBp: HeightBreakpoint = this.uiContext!.getWindowHeightBreakpoint(); + AppStorage.setOrCreate('currentWidthBreakpoint', + widthBp === 0 ? 'xs' : widthBp === 1 ? 'sm' : widthBp === 2 ? 'md' : widthBp === 3 ? 'lg' : 'xl'); + AppStorage.setOrCreate('currentHeightBreakpoint', + heightBp === 0 ? 'sm' : heightBp === 1 ? 'md' : heightBp === 2 ? 'md' : 'lg'); + data.on('windowSizeChange', this.onWindowSizeChange); + }).catch((err: BusinessError) => { + console.error(`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`); + }); }); } @@ -56,4 +107,19 @@ export default class EntryAbility extends UIAbility { // Ability has back to background hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); } -} + + /** + * Page immersion. + */ + immersionFuc(windowStage: window.WindowStage): void { + let windowClass: window.Window = windowStage.getMainWindowSync(); + windowClass.setWindowLayoutFullScreen(true); + let navigationBarArea: window.AvoidArea = + windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR); + let area: window.AvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); + AppStorage.setOrCreate('naviIndicatorHeight', + windowClass.getUIContext().px2vp(navigationBarArea.bottomRect.height)); + AppStorage.setOrCreate('statusBarHeight', windowClass.getUIContext().px2vp(area.topRect.height)); + AppStorage.setOrCreate('windowClass', windowClass); + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index cb2552b..fc92965 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -13,26 +13,45 @@ * limitations under the License. */ -import { router } from '@kit.ArkUI'; +import Constants, { Route } from '../common/Constants'; @Entry @Component struct Index { + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = ''; + private routes: Route[] = Constants.ROUTES; + build() { - Column() { + Navigation() { Column() { - Button('A+B+C').onClick(() => { - this.getUIContext().getRouter().pushUrl({ url: "application/MailBox" }) - }).type(ButtonType.Normal).borderRadius(5).width(100).id('caseOne') - - Button('A+C').onClick(() => { - this.getUIContext().getRouter().pushUrl({ url: "application/PhotoAlbum" }) - }).type(ButtonType.Normal).borderRadius(5).width(100).id('caseTwo') - - Button('B+C').onClick(() => { - this.getUIContext().getRouter().pushUrl({ url: "application/Settings" }) - }).type(ButtonType.Normal).borderRadius(5).width(100).id('caseThree') - }.width('100%').height('50%').justifyContent(FlexAlign.SpaceAround) - }.width('100%').height('100%') + List({ space: 12 }) { + ForEach(this.routes, (item: Route) => { + ListItem() { + Column() { + Button(item.text) + .onClick(() => { + this.getUIContext().getRouter().pushUrl({ url: item.to }) + }) + .width(this.currentWidthBreakpoint === 'sm' ? '100%' : 448) + } + .padding(this.currentWidthBreakpoint === 'sm' ? { right: 16, left: 16 } : 0) + } + .width('100%') + }, (item: Route) => JSON.stringify(item)) + } + } + .height('100%') + .alignItems(HorizontalAlign.Center) + .justifyContent(FlexAlign.End) + } + .width('100%') + .height('100%') + .mode(NavigationMode.Stack) + .title($r('app.string.title')) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: AppStorage.get('statusBarHeight'), + bottom: AppStorage.get('naviIndicatorHeight') + }) } } \ 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 b258b82..9ebaeb6 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -259,6 +259,10 @@ { "name": "search", "value": "Searching for..." + }, + { + "name": "title", + "value": "Multi Columns" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json index b258b82..9ebaeb6 100644 --- a/entry/src/main/resources/en_US/element/string.json +++ b/entry/src/main/resources/en_US/element/string.json @@ -259,6 +259,10 @@ { "name": "search", "value": "Searching for..." + }, + { + "name": "title", + "value": "Multi Columns" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index 24a2b20..8893bdc 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -259,6 +259,10 @@ { "name": "search", "value": "搜索..." + }, + { + "name": "title", + "value": "一多分栏" } ] } \ No newline at end of file -- Gitee From 4f88093d9cda3b02bcd8cb6d0ce208b52f805c7f Mon Sep 17 00:00:00 2001 From: sfchu Date: Mon, 28 Jul 2025 15:14:45 +0800 Subject: [PATCH 3/7] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/application/MailBox.ets | 22 +++++- entry/src/main/ets/application/PhotoAlbum.ets | 62 ++++++++++----- entry/src/main/ets/application/Settings.ets | 25 +++++- entry/src/main/ets/common/Constants.ets | 54 +++++++++++++ entry/src/main/ets/common/PhotoSideBar.ets | 2 + .../main/ets/entryability/EntryAbility.ets | 16 ++++ entry/src/main/ets/pages/Index.ets | 76 ++++++++++++------- 7 files changed, 209 insertions(+), 48 deletions(-) diff --git a/entry/src/main/ets/application/MailBox.ets b/entry/src/main/ets/application/MailBox.ets index 5e4e9a7..979d535 100644 --- a/entry/src/main/ets/application/MailBox.ets +++ b/entry/src/main/ets/application/MailBox.ets @@ -13,8 +13,10 @@ * limitations under the License. */ +import { getBottom, getLeft, getRight, getTop } from '../common/Constants'; import { MailNavigation } from '../common/MailNavigation'; import { MailSideBar } from '../common/MailSideBar'; +import { LengthMetrics, window } from '@kit.ArkUI'; const uiContext: UIContext | undefined = AppStorage.get('uiContext'); let storage = uiContext?.getSharedLocalStorage(); @@ -22,10 +24,26 @@ let storage = uiContext?.getSharedLocalStorage(); @Entry(storage) @Component struct MailBox { + @State localPadding: LocalizedPadding = { top: LengthMetrics.vp(0), start: LengthMetrics.vp(0) }; + @StorageLink('cutout') @Watch('cutoutChange') avoidAreas: window.AvoidAreaOptions | undefined = undefined; + @StorageLink('windowHeight') windowHeight: number = 0; + @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'sm'; @State isFold: boolean = false; @State sideBarWidth: number = 304; + private cutoutChange() { + let topPX = getTop(this.avoidAreas); + let rightPX = getRight(this.avoidAreas, this.windowWidth); + let bottomPX = getBottom(this.avoidAreas, this.windowHeight); + let leftPX = getLeft(this.avoidAreas); + this.localPadding = { + top: LengthMetrics.px(topPX), + end: LengthMetrics.px(rightPX), + bottom: LengthMetrics.px(bottomPX), + start: LengthMetrics.px(leftPX) + } + } // [Start set_show_side_bar_build] build() { GridRow() { @@ -73,10 +91,12 @@ struct MailBox { .onChange((value: boolean) => { this.isFold = value; }) - // [EndExclude set_show_side_bar_build] } } + .width('100%') + .height('100%') + .padding(this.localPadding) } // [End set_show_side_bar_build] } \ No newline at end of file diff --git a/entry/src/main/ets/application/PhotoAlbum.ets b/entry/src/main/ets/application/PhotoAlbum.ets index 215c45c..12c4716 100644 --- a/entry/src/main/ets/application/PhotoAlbum.ets +++ b/entry/src/main/ets/application/PhotoAlbum.ets @@ -15,6 +15,8 @@ import { PhotoContent } from '../common/PhotoContent'; import { PhotoSideBar } from '../common/PhotoSideBar'; +import { LengthMetrics, window } from '@kit.ArkUI'; +import { getBottom, getLeft, getRight, getTop } from '../common/Constants'; const uiContext: UIContext | undefined = AppStorage.get('uiContext'); let storage = uiContext?.getSharedLocalStorage(); @@ -22,33 +24,55 @@ let storage = uiContext?.getSharedLocalStorage(); @Entry(storage) @Component struct PhotoAlbum { + @State localPadding: LocalizedPadding = { top: LengthMetrics.vp(0), start: LengthMetrics.vp(0) }; + @StorageLink('cutout') @Watch('cutoutChange') avoidAreas: window.AvoidAreaOptions | undefined = undefined; + @StorageLink('windowHeight') windowHeight: number = 0; + @StorageLink('windowWidth') windowWidth: number = 0; @State sideBarStatus: boolean = true; @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'sm'; + private cutoutChange() { + let topPX = getTop(this.avoidAreas); + let rightPX = getRight(this.avoidAreas, this.windowWidth); + let bottomPX = getBottom(this.avoidAreas, this.windowHeight); + let leftPX = getLeft(this.avoidAreas); + this.localPadding = { + top: LengthMetrics.px(topPX), + end: LengthMetrics.px(rightPX), + bottom: LengthMetrics.px(bottomPX), + start: LengthMetrics.px(leftPX) + } + } + build() { - GridRow() { - GridCol({ span: { sm: 12, md: 12, lg: 12 } }) { - SideBarContainer(SideBarContainerType.AUTO) { - Column() { - PhotoSideBar() - .margin({ top: AppStorage.get('statusBarHeight') as number + 44 }) - } - .backgroundColor($r('sys.color.gray_01')) + Column() { + GridRow() { + GridCol({ span: { sm: 12, md: 12, lg: 12 } }) { + SideBarContainer(SideBarContainerType.AUTO) { + Column() { + PhotoSideBar() + .margin({ top: AppStorage.get('statusBarHeight') as number + 44 }) + } + .backgroundColor($r('sys.color.gray_01')) - Column() { - PhotoContent({ sideBarStatus: $sideBarStatus }) + Column() { + PhotoContent({ sideBarStatus: $sideBarStatus }) + } } + .controlButton({ + left: 24, + top: AppStorage.get('statusBarHeight') as number + 14, + width: 24, + height: 24 + }) + .onChange((value: boolean) => { + this.sideBarStatus = value; + }) } - .controlButton({ - left: 24, - top: AppStorage.get('statusBarHeight') as number + 14, - width: 24, - height: 24 - }) - .onChange((value: boolean) => { - this.sideBarStatus = value; - }) } } + .width('100%') + .height('100%') + .padding(this.localPadding) } } \ No newline at end of file diff --git a/entry/src/main/ets/application/Settings.ets b/entry/src/main/ets/application/Settings.ets index 65ae9b0..3bfd4a5 100644 --- a/entry/src/main/ets/application/Settings.ets +++ b/entry/src/main/ets/application/Settings.ets @@ -13,8 +13,10 @@ * limitations under the License. */ +import { getBottom, getLeft, getRight, getTop } from '../common/Constants'; import { MainItem } from '../common/SettingItem'; import { WlanItem } from '../common/WlanItem'; +import { LengthMetrics, window } from '@kit.ArkUI'; const uiContext: UIContext | undefined = AppStorage.get('uiContext'); let storage = uiContext?.getSharedLocalStorage(); @@ -22,9 +24,26 @@ let storage = uiContext?.getSharedLocalStorage(); @Entry(storage) @Component struct Settings { + @State localPadding: LocalizedPadding = { top: LengthMetrics.vp(0), start: LengthMetrics.vp(0) }; + @StorageLink('cutout') @Watch('cutoutChange') avoidAreas: window.AvoidAreaOptions | undefined = undefined; + @StorageLink('windowHeight') windowHeight: number = 0; + @StorageLink('windowWidth') windowWidth: number = 0; @Provide('pathInfo') pathInfo: NavPathStack = new NavPathStack(); @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'md'; + private cutoutChange() { + let topPX = getTop(this.avoidAreas); + let rightPX = getRight(this.avoidAreas, this.windowWidth); + let bottomPX = getBottom(this.avoidAreas, this.windowHeight); + let leftPX = getLeft(this.avoidAreas); + this.localPadding = { + top: LengthMetrics.px(topPX), + end: LengthMetrics.px(rightPX), + bottom: LengthMetrics.px(bottomPX), + start: LengthMetrics.px(leftPX) + } + } + @Builder myRouter(name: string, param?: number | undefined) { if (name === 'wlanItem') { @@ -148,10 +167,14 @@ struct Settings { .height('100%') .navBarWidth(293) .title($r('app.string.settings')) - .backgroundColor($r('sys.color.gray_01')) + .backgroundColor($r('sys.color.background_secondary')) .padding({ top: AppStorage.get('statusBarHeight') }) .navDestination(this.myRouter) } } + .width('100%') + .height('100%') + .backgroundColor($r('sys.color.background_secondary')) + .padding(this.localPadding) } } \ No newline at end of file diff --git a/entry/src/main/ets/common/Constants.ets b/entry/src/main/ets/common/Constants.ets index 9c9239e..0adb22a 100644 --- a/entry/src/main/ets/common/Constants.ets +++ b/entry/src/main/ets/common/Constants.ets @@ -12,6 +12,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { window } from "@kit.ArkUI"; +import { hilog } from "@kit.PerformanceAnalysisKit"; export default class Constants { /** @@ -37,3 +39,55 @@ export interface Route { text: string, to: string } + + +export function getTop(avoidArea: window.AvoidAreaOptions | undefined): number { + let result: number = 0; + if (avoidArea !== undefined) { + if (avoidArea.area.topRect.height) { + result = avoidArea.area.topRect.top + avoidArea.area.topRect.height > 0 ? + avoidArea.area.topRect.top + avoidArea.area.topRect.height : 0; + } + } else { + hilog.error(0x0000, '3D', 'Can not get TopSafeAreaPixel, avoidArea visible false'); + } + return result; +} + +export function getBottom(avoidArea: window.AvoidAreaOptions | undefined, windowHeight: number): number { + let result: number = 0; + if (avoidArea !== undefined) { + if (avoidArea.area.bottomRect.height) { + result = windowHeight - avoidArea.area.bottomRect.top > 0 ? windowHeight - avoidArea.area.bottomRect.top : 0; + } + } else { + hilog.error(0x0000, '3D', 'Can not get BottomSafeAreaPixel, avoidArea visible false'); + } + return result; +} + +export function getLeft(avoidArea: window.AvoidAreaOptions | undefined): number { + let result: number = 0; + if (avoidArea !== undefined) { + if (avoidArea.area.leftRect.width) { + result = avoidArea.area.leftRect.left + avoidArea.area.leftRect.width > 0 ? + avoidArea.area.leftRect.left + avoidArea.area.leftRect.width : 0; + } + } else { + hilog.error(0x0000, '3D', 'Can not get LeftSafeAreaPixel, avoidArea visible false'); + } + return result; +} + +export function getRight(avoidArea: window.AvoidAreaOptions | undefined, windowWidth: number): number { + let result: number = 0; + if (avoidArea !== undefined) { + if (avoidArea.area.rightRect.width) { + result = windowWidth - avoidArea.area.rightRect.left > 0 ? windowWidth - avoidArea.area.rightRect.left : + avoidArea.area.rightRect.width * 1.5; + } + } else { + hilog.error(0x0000, '3D', 'Can not get RightSafeAreaPixel, avoidArea visible false'); + } + return result; +} \ No newline at end of file diff --git a/entry/src/main/ets/common/PhotoSideBar.ets b/entry/src/main/ets/common/PhotoSideBar.ets index 192f1e2..28bb119 100644 --- a/entry/src/main/ets/common/PhotoSideBar.ets +++ b/entry/src/main/ets/common/PhotoSideBar.ets @@ -104,7 +104,9 @@ export struct PhotoSideBar { } .width('100%') .height('100%') + .scrollBar(BarState.Off) .margin({ top: 16 }) + .padding({ bottom: AppStorage.get('naviIndicatorHeight') as number + 48 }) } .height('100%') .width('100%') diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index ccc6874..742fbbf 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -30,6 +30,12 @@ export default class EntryAbility extends UIAbility { AppStorage.setOrCreate('currentHeightBreakpoint', heightBp === 0 ? 'sm' : heightBp === 1 ? 'md' : heightBp === 2 ? 'md' : 'lg'); this.setDefaultOrientation(); + }; + public onAvoidAreaChange: (avoidArea: window.AvoidAreaOptions) => void = (avoidArea: window.AvoidAreaOptions) => { + if (avoidArea.type === window.AvoidAreaType.TYPE_CUTOUT) { + AppStorage.setOrCreate('cutout', avoidArea); + console.info(`csf---avoidArea：${JSON.stringify(avoidArea)}`) + } } setDefaultOrientation(): void { @@ -87,6 +93,16 @@ export default class EntryAbility extends UIAbility { AppStorage.setOrCreate('currentHeightBreakpoint', heightBp === 0 ? 'sm' : heightBp === 1 ? 'md' : heightBp === 2 ? 'md' : 'lg'); data.on('windowSizeChange', this.onWindowSizeChange); + + // Monitor changes in the location of the cutout area. + let avoidArea: window.AvoidArea = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_CUTOUT); + this.onAvoidAreaChange({ type: window.AvoidAreaType.TYPE_CUTOUT, area: avoidArea }); + data.on('avoidAreaChange', this.onAvoidAreaChange); + + // Window size acquisition and monitoring. + let properties = data.getWindowProperties(); + AppStorage.setOrCreate('windowHeight', properties.windowRect.height); + AppStorage.setOrCreate('windowWidth', properties.windowRect.width); }).catch((err: BusinessError) => { console.error(`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`); }); diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index fc92965..b8792a8 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -13,45 +13,67 @@ * limitations under the License. */ -import Constants, { Route } from '../common/Constants'; +import { LengthMetrics, window } from '@kit.ArkUI'; +import Constants, { getBottom, getLeft, getRight, getTop, Route } from '../common/Constants'; @Entry @Component struct Index { + @State localPadding: LocalizedPadding = { top: LengthMetrics.vp(0), start: LengthMetrics.vp(0) }; + @StorageLink('cutout') @Watch('cutoutChange') avoidAreas: window.AvoidAreaOptions | undefined = undefined; + @StorageLink('windowHeight') windowHeight: number = 0; + @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = ''; private routes: Route[] = Constants.ROUTES; + private cutoutChange() { + let topPX = getTop(this.avoidAreas); + let rightPX = getRight(this.avoidAreas, this.windowWidth); + let bottomPX = getBottom(this.avoidAreas, this.windowHeight); + let leftPX = getLeft(this.avoidAreas); + this.localPadding = { + top: LengthMetrics.px(topPX), + end: LengthMetrics.px(rightPX), + bottom: LengthMetrics.px(bottomPX), + start: LengthMetrics.px(leftPX) + }; + } + build() { - Navigation() { - Column() { - List({ space: 12 }) { - ForEach(this.routes, (item: Route) => { - ListItem() { - Column() { - Button(item.text) - .onClick(() => { - this.getUIContext().getRouter().pushUrl({ url: item.to }) - }) - .width(this.currentWidthBreakpoint === 'sm' ? '100%' : 448) + Column() { + Navigation() { + Column() { + List({ space: 12 }) { + ForEach(this.routes, (item: Route) => { + ListItem() { + Column() { + Button(item.text) + .onClick(() => { + this.getUIContext().getRouter().pushUrl({ url: item.to }) + }) + .width(this.currentWidthBreakpoint === 'sm' ? '100%' : 448) + } + .padding(this.currentWidthBreakpoint === 'sm' ? { right: 16, left: 16 } : 0) } - .padding(this.currentWidthBreakpoint === 'sm' ? { right: 16, left: 16 } : 0) - } - .width('100%') - }, (item: Route) => JSON.stringify(item)) + .width('100%') + }, (item: Route) => JSON.stringify(item)) + } } + .height('100%') + .alignItems(HorizontalAlign.Center) + .justifyContent(FlexAlign.End) } + .width('100%') .height('100%') - .alignItems(HorizontalAlign.Center) - .justifyContent(FlexAlign.End) + .mode(NavigationMode.Stack) + .title($r('app.string.title')) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: AppStorage.get('statusBarHeight'), + bottom: AppStorage.get('naviIndicatorHeight') + }) } - .width('100%') - .height('100%') - .mode(NavigationMode.Stack) - .title($r('app.string.title')) .backgroundColor($r('sys.color.background_secondary')) - .padding({ - top: AppStorage.get('statusBarHeight'), - bottom: AppStorage.get('naviIndicatorHeight') - }) + .padding(this.localPadding) } -} \ No newline at end of file +} -- Gitee From f5a5cd714b3f2daccbd508a6b58b8a61678a0829 Mon Sep 17 00:00:00 2001 From: sfchu Date: Tue, 29 Jul 2025 15:51:30 +0800 Subject: [PATCH 4/7] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/application/MailBox.ets | 5 +- entry/src/main/ets/application/PhotoAlbum.ets | 3 +- entry/src/main/ets/application/Settings.ets | 4 +- entry/src/main/ets/common/Constants.ets | 2 +- entry/src/main/ets/common/MailContent.ets | 42 ++++++++++++--- entry/src/main/ets/common/MailNavigation.ets | 52 +++++++++++++++---- entry/src/main/ets/common/PhotoContent.ets | 46 ++++++++++++---- entry/src/main/ets/common/PhotoSideBar.ets | 22 +++++++- entry/src/main/ets/common/WlanItem.ets | 11 +++- entry/src/main/ets/pages/Index.ets | 8 +-- entry/src/main/resources/base/media/add.svg | 22 -------- 11 files changed, 156 insertions(+), 61 deletions(-) delete mode 100644 entry/src/main/resources/base/media/add.svg diff --git a/entry/src/main/ets/application/MailBox.ets b/entry/src/main/ets/application/MailBox.ets index 979d535..4779f3a 100644 --- a/entry/src/main/ets/application/MailBox.ets +++ b/entry/src/main/ets/application/MailBox.ets @@ -32,7 +32,7 @@ struct MailBox { @State isFold: boolean = false; @State sideBarWidth: number = 304; - private cutoutChange() { + cutoutChange(): void { let topPX = getTop(this.avoidAreas); let rightPX = getRight(this.avoidAreas, this.windowWidth); let bottomPX = getBottom(this.avoidAreas, this.windowHeight); @@ -44,6 +44,7 @@ struct MailBox { start: LengthMetrics.px(leftPX) } } + // [Start set_show_side_bar_build] build() { GridRow() { @@ -63,6 +64,7 @@ struct MailBox { Stack() { MailNavigation() .margin({ top: 18 }) + .padding({ left: this.getUIContext().px2vp(getLeft(this.avoidAreas)) }) // [StartExclude set_show_side_bar] if (this.isFold && this.currentWidthBreakpoint !== 'lg') { Column() @@ -96,7 +98,6 @@ struct MailBox { } .width('100%') .height('100%') - .padding(this.localPadding) } // [End set_show_side_bar_build] } \ No newline at end of file diff --git a/entry/src/main/ets/application/PhotoAlbum.ets b/entry/src/main/ets/application/PhotoAlbum.ets index 12c4716..c0ea2ae 100644 --- a/entry/src/main/ets/application/PhotoAlbum.ets +++ b/entry/src/main/ets/application/PhotoAlbum.ets @@ -31,7 +31,7 @@ struct PhotoAlbum { @State sideBarStatus: boolean = true; @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'sm'; - private cutoutChange() { + cutoutChange(): void { let topPX = getTop(this.avoidAreas); let rightPX = getRight(this.avoidAreas, this.windowWidth); let bottomPX = getBottom(this.avoidAreas, this.windowHeight); @@ -73,6 +73,5 @@ struct PhotoAlbum { } .width('100%') .height('100%') - .padding(this.localPadding) } } \ No newline at end of file diff --git a/entry/src/main/ets/application/Settings.ets b/entry/src/main/ets/application/Settings.ets index 3bfd4a5..a4d7c1a 100644 --- a/entry/src/main/ets/application/Settings.ets +++ b/entry/src/main/ets/application/Settings.ets @@ -31,7 +31,7 @@ struct Settings { @Provide('pathInfo') pathInfo: NavPathStack = new NavPathStack(); @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'md'; - private cutoutChange() { + cutoutChange(): void { let topPX = getTop(this.avoidAreas); let rightPX = getRight(this.avoidAreas, this.windowWidth); let bottomPX = getBottom(this.avoidAreas, this.windowHeight); @@ -175,6 +175,6 @@ struct Settings { .width('100%') .height('100%') .backgroundColor($r('sys.color.background_secondary')) - .padding(this.localPadding) + .padding({ left: this.getUIContext().px2vp(getLeft(this.avoidAreas)) }) } } \ No newline at end of file diff --git a/entry/src/main/ets/common/Constants.ets b/entry/src/main/ets/common/Constants.ets index 0adb22a..8985300 100644 --- a/entry/src/main/ets/common/Constants.ets +++ b/entry/src/main/ets/common/Constants.ets @@ -45,7 +45,7 @@ export function getTop(avoidArea: window.AvoidAreaOptions | undefined): number { let result: number = 0; if (avoidArea !== undefined) { if (avoidArea.area.topRect.height) { - result = avoidArea.area.topRect.top + avoidArea.area.topRect.height > 0 ? + avoidArea.area.topRect.top + avoidArea.area.topRect.height > 0 ? avoidArea.area.topRect.top + avoidArea.area.topRect.height : 0; } } else { diff --git a/entry/src/main/ets/common/MailContent.ets b/entry/src/main/ets/common/MailContent.ets index 1395124..2958aee 100644 --- a/entry/src/main/ets/common/MailContent.ets +++ b/entry/src/main/ets/common/MailContent.ets @@ -13,10 +13,16 @@ * limitations under the License. */ +import { LengthMetrics, window } from '@kit.ArkUI'; import { OperateTabs } from '../model/dataType'; +import { getBottom, getLeft, getRight, getTop } from './Constants'; @Component export struct MailContent { + @State localPadding: LocalizedPadding = { top: LengthMetrics.vp(0), start: LengthMetrics.vp(0) }; + @StorageLink('cutout') @Watch('cutoutChange') avoidAreas: window.AvoidAreaOptions | undefined = undefined; + @StorageLink('windowHeight') windowHeight: number = 0; + @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'sm'; @State buttonList: OperateTabs[] = [ new OperateTabs($r('app.media.reply'), $r('app.string.reply')), @@ -24,7 +30,20 @@ export struct MailContent { new OperateTabs($r('app.media.forward'), $r('app.string.send')), new OperateTabs($r('app.media.ic_public_delete'), $r('app.string.delete')), new OperateTabs($r('app.media.more'), $r('app.string.more')) - ] + ]; + + cutoutChange(): void { + let topPX = getTop(this.avoidAreas); + let rightPX = getRight(this.avoidAreas, this.windowWidth); + let bottomPX = getBottom(this.avoidAreas, this.windowHeight); + let leftPX = getLeft(this.avoidAreas); + this.localPadding = { + top: LengthMetrics.px(topPX), + end: LengthMetrics.px(rightPX), + bottom: LengthMetrics.px(bottomPX), + start: LengthMetrics.px(leftPX) + } + } build() { NavDestination() { @@ -112,7 +131,11 @@ export struct MailContent { } .layoutWeight(1) .alignItems(HorizontalAlign.Start) - .padding({ left: 20, right: 20, top: 24 }) + .padding({ + left: 20, + right: 20 + this.getUIContext().px2vp(getRight(this.avoidAreas, this.windowWidth)), + top: 24 + }) Row() { ForEach(this.buttonList, (item: OperateTabs) => { @@ -128,11 +151,18 @@ export struct MailContent { }) } .width('100%') - .height(56) + .height(56 + this.getUIContext().px2vp(getBottom(this.avoidAreas, this.windowHeight))*0.8) .justifyContent(FlexAlign.SpaceBetween) - .padding(this.currentWidthBreakpoint === 'sm' ? - { left: 21, right: 21, bottom: 12 } : - { left: 46, right: 46, bottom: 12 }) + .alignItems(VerticalAlign.Top) + .padding(this.currentWidthBreakpoint === 'sm' ? ({ + top: 6, + right: 21, + left: 21 + }) : { + top: 6, + right: 46, + left: 46 + }) .backgroundColor($r('sys.color.gray_01')) } } diff --git a/entry/src/main/ets/common/MailNavigation.ets b/entry/src/main/ets/common/MailNavigation.ets index 6322a89..99cb0f1 100644 --- a/entry/src/main/ets/common/MailNavigation.ets +++ b/entry/src/main/ets/common/MailNavigation.ets @@ -13,17 +13,36 @@ * limitations under the License. */ +import { LengthMetrics, window } from '@kit.ArkUI'; +import { getBottom, getLeft, getRight, getTop } from './Constants'; import { BreakpointType } from './BreakpointSystem'; import { MailContent } from './MailContent'; @Component export struct MailNavigation { + @State localPadding: LocalizedPadding = { top: LengthMetrics.vp(0), start: LengthMetrics.vp(0) }; + @StorageLink('cutout') @Watch('cutoutChange') avoidAreas: window.AvoidAreaOptions | undefined = undefined; + @StorageLink('windowHeight') windowHeight: number = 0; + @StorageLink('windowWidth') windowWidth: number = 0; notesNavMode: NavigationMode | undefined; @State pathInfo: NavPathStack = new NavPathStack(); @State currentIndex: number = 0; @State mailList: string[] = ['1', '1', '1', '1', '1', '1', '1', '1']; @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'md'; + cutoutChange(): void { + let topPX = getTop(this.avoidAreas); + let rightPX = getRight(this.avoidAreas, this.windowWidth); + let bottomPX = getBottom(this.avoidAreas, this.windowHeight); + let leftPX = getLeft(this.avoidAreas); + this.localPadding = { + top: LengthMetrics.px(topPX), + end: LengthMetrics.px(rightPX), + bottom: LengthMetrics.px(bottomPX), + start: LengthMetrics.px(leftPX) + }; + } + @Builder myRouter(name: string, param?: number | undefined) { if (name === 'mailContent') { @@ -35,16 +54,30 @@ export struct MailNavigation { NavigationMenus() { if (this.currentWidthBreakpoint !== 'md') { Row() { - Image($r('app.media.add')) - .width(24) - .height(24) - Image($r('app.media.more')) - .width(24) - .height(24) - .margin({ left: 24, right: 0 }) + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.plus')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .height(40) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) + + Blank().width(16) + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.dot_grid_2x2')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .height(40) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) } .height(56) - .padding({ top: 48, right: 24 }) + .margin({ + top: 24, + right: 16 + }) } } @@ -132,13 +165,14 @@ export struct MailNavigation { .scrollBar(BarState.Off) .layoutWeight(1) .divider({ strokeWidth: 1, startMargin: 12, endMargin: 12 }) + .padding({ bottom: this.getUIContext().px2vp(getBottom(this.avoidAreas, this.windowHeight)) }) .onClick(() => { this.pathInfo?.pushPath({ name: 'mailContent' }); }) } .width('100%') .height('100%') - .padding({ left: 12, right: 12 }) + .padding({ right: 12, left: 12 }) if (this.currentWidthBreakpoint !== 'lg') { Image($r('app.media.ic_public_list_add_light')) diff --git a/entry/src/main/ets/common/PhotoContent.ets b/entry/src/main/ets/common/PhotoContent.ets index e40f9ba..2851572 100644 --- a/entry/src/main/ets/common/PhotoContent.ets +++ b/entry/src/main/ets/common/PhotoContent.ets @@ -13,10 +13,16 @@ * limitations under the License. */ +import { LengthMetrics, window } from '@kit.ArkUI'; +import { getLeft, getRight } from './Constants'; import { photoType } from '../model/dataType'; @Component export struct PhotoContent { + @State localPadding: LocalizedPadding = { top: LengthMetrics.vp(0), start: LengthMetrics.vp(0) }; + @StorageLink('cutout') avoidAreas: window.AvoidAreaOptions | undefined = undefined; + @StorageLink('windowHeight') windowHeight: number = 0; + @StorageLink('windowWidth') windowWidth: number = 0; @State photoList: photoType[] = [ new photoType($r('app.string.picture'), 1234, $r('app.media.P1')), new photoType($r('app.string.video'), 12, $r('app.media.P2')), @@ -26,7 +32,7 @@ export struct PhotoContent { new photoType($r('app.string.address'), 125, $r('app.media.P6')), new photoType($r('app.string.category'), 234, $r('app.media.P7')), new photoType($r('app.string.pictureType'), 22, $r('app.media.P8')) - ] + ]; @State columnsTemplate: string = '1fr 1fr 1fr'; @Link @Watch('onStateChange') sideBarStatus: boolean; @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'sm'; @@ -53,13 +59,24 @@ export struct PhotoContent { .fontWeight(FontWeight.Medium) .margin({ left: this.sideBarStatus ? 0 : 36 }) Blank() - Image($r('app.media.add')) - .width(24) - .aspectRatio(1) - Image($r('app.media.more')) - .width(24) - .aspectRatio(1) - .margin({ left: 24 }) + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.plus')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .height(40) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) + + Blank().width(24) + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.dot_grid_2x2')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .height(40) + .aspectRatio(1) + .backgroundColor($r('sys.color.comp_background_tertiary')) } .width('100%') .height(56) @@ -68,7 +85,10 @@ export struct PhotoContent { ForEach(this.photoList, (item: photoType) => { GridItem() { Column() { - Image(item.src).width('100%').aspectRatio(1).borderRadius(12) + Image(item.src) + .width('100%') + .aspectRatio(1) + .borderRadius(12) Column() { Text(item.name) .fontSize(14) @@ -90,8 +110,14 @@ export struct PhotoContent { .columnsGap(22) .rowsGap(17) .margin({ top: 7 }) - .padding({ bottom: AppStorage.get('naviIndicatorHeight') as number + 48 }) + .padding({ + bottom: AppStorage.get('naviIndicatorHeight') as number + 48 + }) } + .padding({ + right: this.getUIContext().px2vp(getRight(this.avoidAreas, this.windowWidth)), + left: this.columnsTemplate === '1fr 1fr 1fr 1fr' ? this.getUIContext().px2vp(getLeft(this.avoidAreas)) : 0 + }) .margin({ left: 24, right: 18, diff --git a/entry/src/main/ets/common/PhotoSideBar.ets b/entry/src/main/ets/common/PhotoSideBar.ets index 28bb119..89b2f15 100644 --- a/entry/src/main/ets/common/PhotoSideBar.ets +++ b/entry/src/main/ets/common/PhotoSideBar.ets @@ -13,10 +13,16 @@ * limitations under the License. */ +import { LengthMetrics, window } from '@kit.ArkUI'; +import { getBottom, getLeft, getRight, getTop } from './Constants'; import { photoType } from '../model/dataType'; @Component export struct PhotoSideBar { + @State localPadding: LocalizedPadding = { top: LengthMetrics.vp(0), start: LengthMetrics.vp(0) }; + @StorageLink('cutout') @Watch('cutoutChange') avoidAreas: window.AvoidAreaOptions | undefined = undefined; + @StorageLink('windowHeight') windowHeight: number = 0; + @StorageLink('windowWidth') windowWidth: number = 0; @State photoList: photoType[] = [ new photoType($r('app.string.picture'), 1234), new photoType($r('app.string.video'), 12), @@ -27,7 +33,19 @@ export struct PhotoSideBar { new photoType($r('app.string.category'), 234), new photoType($r('app.string.pictureType'), 22), new photoType($r('app.string.hidden'), 1), - ] + ]; + cutoutChange(): void { + let topPX = getTop(this.avoidAreas); + let rightPX = getRight(this.avoidAreas, this.windowWidth); + let bottomPX = getBottom(this.avoidAreas, this.windowHeight); + let leftPX = getLeft(this.avoidAreas); + this.localPadding = { + top: LengthMetrics.px(topPX), + end: LengthMetrics.px(rightPX), + bottom: LengthMetrics.px(bottomPX), + start: LengthMetrics.px(leftPX) + }; + } build() { Column() { @@ -110,6 +128,6 @@ export struct PhotoSideBar { } .height('100%') .width('100%') - .padding({ left: 12, right: 12 }) + .padding({ left: 12 + this.getUIContext().px2vp(getLeft(this.avoidAreas)), right: 12 }) } } \ No newline at end of file diff --git a/entry/src/main/ets/common/WlanItem.ets b/entry/src/main/ets/common/WlanItem.ets index ca7bc3b..f9fa950 100644 --- a/entry/src/main/ets/common/WlanItem.ets +++ b/entry/src/main/ets/common/WlanItem.ets @@ -13,10 +13,16 @@ * limitations under the License. */ +import { LengthMetrics, window } from '@kit.ArkUI'; import { SubItem } from './SettingItem'; +import { getRight } from './Constants'; @Component export struct WlanItem { + @State localPadding: LocalizedPadding = { top: LengthMetrics.vp(0), start: LengthMetrics.vp(0) }; + @StorageLink('cutout') avoidAreas: window.AvoidAreaOptions | undefined = undefined; + @StorageLink('windowHeight') windowHeight: number = 0; + @StorageLink('windowWidth') windowWidth: number = 0; @State netWorkStatus: Resource = $r('app.string.closed'); @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'md'; @Consume('pathInfo') pathInfo: NavPathStack; @@ -36,7 +42,7 @@ export struct WlanItem { Button({ type: ButtonType.Circle }) { SymbolGlyph($r('sys.symbol.chevron_left')) .fontColor([$r('sys.color.icon_primary')]) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) } .height(40) .aspectRatio(1) @@ -152,7 +158,7 @@ export struct WlanItem { .borderRadius(16) .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) .padding({ top: 4, bottom: 4 }) - .margin({ bottom: AppStorage.get('naviIndicatorHeight') as number + 48 }) + .margin({ bottom: AppStorage.get('naviIndicatorHeight') as number + 32 }) } .width('100%') .height('100%') @@ -162,5 +168,6 @@ export struct WlanItem { .title('WLAN') .hideTitleBar(true) .backgroundColor($r('sys.color.gray_01')) + .padding({ right: this.getUIContext().px2vp(getRight(this.avoidAreas, this.windowWidth)) }) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index b8792a8..b2f2674 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -26,7 +26,7 @@ struct Index { @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = ''; private routes: Route[] = Constants.ROUTES; - private cutoutChange() { + cutoutChange(): void { let topPX = getTop(this.avoidAreas); let rightPX = getRight(this.avoidAreas, this.windowWidth); let bottomPX = getBottom(this.avoidAreas, this.windowHeight); @@ -70,10 +70,12 @@ struct Index { .backgroundColor($r('sys.color.background_secondary')) .padding({ top: AppStorage.get('statusBarHeight'), - bottom: AppStorage.get('naviIndicatorHeight') + bottom: getBottom(this.avoidAreas, this.windowHeight) === 0 ? AppStorage.get('naviIndicatorHeight') : + this.getUIContext().px2vp(getBottom(this.avoidAreas, this.windowHeight)) + + AppStorage.get('naviIndicatorHeight')! as number, + left: this.getUIContext().px2vp(getLeft(this.avoidAreas)) }) } .backgroundColor($r('sys.color.background_secondary')) - .padding(this.localPadding) } } diff --git a/entry/src/main/resources/base/media/add.svg b/entry/src/main/resources/base/media/add.svg deleted file mode 100644 index 1885d67..0000000 --- a/entry/src/main/resources/base/media/add.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - ic/public/add - - - - - - - - - - - - - - - - - - - \ No newline at end of file -- Gitee From aad6506af2a4c461536d1f9dfc05743e02f5cfeb Mon Sep 17 00:00:00 2001 From: sfchu Date: Wed, 30 Jul 2025 09:38:25 +0800 Subject: [PATCH 5/7] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/common/MailNavigation.ets | 3 ++- entry/src/main/ets/common/PhotoContent.ets | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/entry/src/main/ets/common/MailNavigation.ets b/entry/src/main/ets/common/MailNavigation.ets index 99cb0f1..4ac9103 100644 --- a/entry/src/main/ets/common/MailNavigation.ets +++ b/entry/src/main/ets/common/MailNavigation.ets @@ -63,7 +63,8 @@ export struct MailNavigation { .aspectRatio(1) .backgroundColor($r('sys.color.comp_background_tertiary')) - Blank().width(16) + Blank() + .width(16) Button({ type: ButtonType.Circle }) { SymbolGlyph($r('sys.symbol.dot_grid_2x2')) .fontColor([$r('sys.color.icon_primary')]) diff --git a/entry/src/main/ets/common/PhotoContent.ets b/entry/src/main/ets/common/PhotoContent.ets index 2851572..1fe1d41 100644 --- a/entry/src/main/ets/common/PhotoContent.ets +++ b/entry/src/main/ets/common/PhotoContent.ets @@ -68,7 +68,8 @@ export struct PhotoContent { .aspectRatio(1) .backgroundColor($r('sys.color.comp_background_tertiary')) - Blank().width(24) + Blank() + .width(16) Button({ type: ButtonType.Circle }) { SymbolGlyph($r('sys.symbol.dot_grid_2x2')) .fontColor([$r('sys.color.icon_primary')]) -- Gitee From 1c35b80d203fb4bb031c44dd839618f787ba969d Mon Sep 17 00:00:00 2001 From: sfchu Date: Thu, 31 Jul 2025 18:59:16 +0800 Subject: [PATCH 6/7] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/common/BreakpointSystem.ets | 2 +- entry/src/main/ets/common/Constants.ets | 1 - entry/src/main/ets/common/MailContent.ets | 18 ++++++++---------- entry/src/main/ets/common/MailNavigation.ets | 14 +++++--------- entry/src/main/ets/common/MailSideBar.ets | 12 +++++++++--- .../src/main/ets/entryability/EntryAbility.ets | 4 ++-- entry/src/main/ets/pages/Index.ets | 5 ++++- 7 files changed, 29 insertions(+), 27 deletions(-) diff --git a/entry/src/main/ets/common/BreakpointSystem.ets b/entry/src/main/ets/common/BreakpointSystem.ets index 1e21ec7..1b22fca 100644 --- a/entry/src/main/ets/common/BreakpointSystem.ets +++ b/entry/src/main/ets/common/BreakpointSystem.ets @@ -24,7 +24,7 @@ export class BreakpointType { this.lg = lg; } - GetValue(currentBreakpoint: string) { + getValue(currentBreakpoint: string) { if (currentBreakpoint === 'sm') { return this.sm; } diff --git a/entry/src/main/ets/common/Constants.ets b/entry/src/main/ets/common/Constants.ets index 8985300..96c96c5 100644 --- a/entry/src/main/ets/common/Constants.ets +++ b/entry/src/main/ets/common/Constants.ets @@ -40,7 +40,6 @@ export interface Route { to: string } - export function getTop(avoidArea: window.AvoidAreaOptions | undefined): number { let result: number = 0; if (avoidArea !== undefined) { diff --git a/entry/src/main/ets/common/MailContent.ets b/entry/src/main/ets/common/MailContent.ets index 2958aee..93ca774 100644 --- a/entry/src/main/ets/common/MailContent.ets +++ b/entry/src/main/ets/common/MailContent.ets @@ -51,7 +51,9 @@ export struct MailContent { Column() { Row() { if (this.currentWidthBreakpoint === 'sm') { - Row().width(24).height(24) + Row() + .width(24) + .height(24) } else { Image($r('app.media.ic_expand')) .width(24) @@ -151,19 +153,15 @@ export struct MailContent { }) } .width('100%') - .height(56 + this.getUIContext().px2vp(getBottom(this.avoidAreas, this.windowHeight))*0.8) + .backgroundColor($r('sys.color.gray_01')) + .height(56 + this.getUIContext().px2vp(getBottom(this.avoidAreas, this.windowHeight)) * 0.8) .justifyContent(FlexAlign.SpaceBetween) .alignItems(VerticalAlign.Top) - .padding(this.currentWidthBreakpoint === 'sm' ? ({ - top: 6, - right: 21, - left: 21 - }) : { + .padding({ top: 6, - right: 46, - left: 46 + right: this.currentWidthBreakpoint === 'sm' ? 21 : 46, + left: this.currentWidthBreakpoint === 'sm' ? 21 : 46 }) - .backgroundColor($r('sys.color.gray_01')) } } .height('100%') diff --git a/entry/src/main/ets/common/MailNavigation.ets b/entry/src/main/ets/common/MailNavigation.ets index 4ac9103..1f73ac2 100644 --- a/entry/src/main/ets/common/MailNavigation.ets +++ b/entry/src/main/ets/common/MailNavigation.ets @@ -120,8 +120,11 @@ export struct MailNavigation { Search({ placeholder: $r('app.string.searchMail') }) } .width('100%') - .margin(this.currentWidthBreakpoint === 'sm' ? { left: 18, right: 18 } : { left: 12, right: 12 }) .height(56) + .margin({ + left: this.currentWidthBreakpoint === 'sm' ? 12 : 18, + right: this.currentWidthBreakpoint === 'sm' ? 12 : 18 + }) List() { ForEach(this.mailList, (item: string, index: number | undefined) => { @@ -174,13 +177,6 @@ export struct MailNavigation { .width('100%') .height('100%') .padding({ right: 12, left: 12 }) - - if (this.currentWidthBreakpoint !== 'lg') { - Image($r('app.media.ic_public_list_add_light')) - .width(48) - .height(48) - .position(this.currentWidthBreakpoint === 'sm' ? { x: 320, y: 590 } : { x: 250, y: 550 }) - } } // [EndExclude navigation_mode_build] // [EndExclude navigation_mode] @@ -189,7 +185,7 @@ export struct MailNavigation { // [End navigation_mode] .navDestination(this.myRouter) // [StartExclude navigation_mode_build] - .navBarWidth(new BreakpointType(321, 321, 390).GetValue(this.currentWidthBreakpoint) as number | Length) + .navBarWidth(new BreakpointType(321, 321, 390).getValue(this.currentWidthBreakpoint) as number | Length) .menus(this.NavigationMenus) .width('100%') .title({ builder: this.NavigationTitle, height: 162 }) diff --git a/entry/src/main/ets/common/MailSideBar.ets b/entry/src/main/ets/common/MailSideBar.ets index f3dd0f1..2ead473 100644 --- a/entry/src/main/ets/common/MailSideBar.ets +++ b/entry/src/main/ets/common/MailSideBar.ets @@ -54,8 +54,12 @@ struct AccountInfo { .fontSize(14) .fontColor('#0a59f7') .fontWeight(FontWeight.Medium) - }.width('100%').height(48) - }.margin({ top: 78 }).padding({ left: 16, right: 16 }) + } + .width('100%') + .height(48) + } + .margin({ top: 78 }) + .padding({ left: 16, right: 16 }) } build() { @@ -87,7 +91,9 @@ struct AccountInfo { .borderRadius(18) .TextStyle() } - }.width('100%').height(56) + } + .width('100%') + .height(56) } }) } diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index 742fbbf..e410c28 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -34,7 +34,6 @@ export default class EntryAbility extends UIAbility { public onAvoidAreaChange: (avoidArea: window.AvoidAreaOptions) => void = (avoidArea: window.AvoidAreaOptions) => { if (avoidArea.type === window.AvoidAreaType.TYPE_CUTOUT) { AppStorage.setOrCreate('cutout', avoidArea); - console.info(`csf---avoidArea：${JSON.stringify(avoidArea)}`) } } @@ -104,7 +103,8 @@ export default class EntryAbility extends UIAbility { AppStorage.setOrCreate('windowHeight', properties.windowRect.height); AppStorage.setOrCreate('windowWidth', properties.windowRect.width); }).catch((err: BusinessError) => { - console.error(`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`); + hilog.error(0x0000, 'testTag', '%{public}s', + `Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`); }); }); } diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index b2f2674..db9fba2 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -53,7 +53,10 @@ struct Index { }) .width(this.currentWidthBreakpoint === 'sm' ? '100%' : 448) } - .padding(this.currentWidthBreakpoint === 'sm' ? { right: 16, left: 16 } : 0) + .padding({ + right: this.currentWidthBreakpoint === 'sm' ? 16 : 0, + left: this.currentWidthBreakpoint === 'sm' ? 16 : 0 + }) } .width('100%') }, (item: Route) => JSON.stringify(item)) -- Gitee From 3090b185892bfc42f45f175bc8a5f961ec927294 Mon Sep 17 00:00:00 2001 From: sfchu Date: Fri, 1 Aug 2025 10:38:31 +0800 Subject: [PATCH 7/7] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/entryability/EntryAbility.ets | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index e410c28..6168cd3 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -29,6 +29,7 @@ export default class EntryAbility extends UIAbility { widthBp === 0 ? 'xs' : widthBp === 1 ? 'sm' : widthBp === 2 ? 'md' : widthBp === 3 ? 'lg' : 'xl'); AppStorage.setOrCreate('currentHeightBreakpoint', heightBp === 0 ? 'sm' : heightBp === 1 ? 'md' : heightBp === 2 ? 'md' : 'lg'); + // Application adaptation for horizontal and vertical screen switching. this.setDefaultOrientation(); }; public onAvoidAreaChange: (avoidArea: window.AvoidAreaOptions) => void = (avoidArea: window.AvoidAreaOptions) => { @@ -38,17 +39,7 @@ export default class EntryAbility extends UIAbility { } setDefaultOrientation(): void { - let windowRect: window.Rect = this.windowObj!.getWindowProperties().windowRect; - let windowWidthVp: number = this.uiContext!.px2vp(windowRect.width); - let windowHeightVp: number = this.uiContext!.px2vp(windowRect.height); - - if (Math.min(windowWidthVp, windowHeightVp) > 348) { - this.windowObj?.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); - AppStorage.setOrCreate('isPortrait', false); - } else { - this.windowObj?.setPreferredOrientation(window.Orientation.PORTRAIT); - AppStorage.setOrCreate('isPortrait', true); - } + this.windowObj?.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); } onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { -- Gitee