diff --git a/entry/src/main/ets/application/MailBox.ets b/entry/src/main/ets/application/MailBox.ets index 2406b1924026c96bd933204317f0a61d5ebd1d51..4779f3ad2c3dd325b1af09a9f9b35683af4079d3 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,27 @@ let storage = uiContext?.getSharedLocalStorage(); @Entry(storage) @Component struct MailBox { - @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'md'; + @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; + 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) + } + } + // [Start set_show_side_bar_build] build() { GridRow() { @@ -38,43 +57,47 @@ struct MailBox { } .width('100%') .height('100%') - .backgroundColor('#f1f3f5') + .backgroundColor($r('sys.color.gray_01')) // Area B+C Column() { Stack() { MailNavigation() + .margin({ top: 18 }) + .padding({ left: this.getUIContext().px2vp(getLeft(this.avoidAreas)) }) // [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] + .width('100%') + .height('100%') } // [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 6d93c29657be0e83f80a0122577430a4a7a79805..c0ea2ae8b9f84d1081fbcd7c59a22ba9f3981915 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,30 +24,54 @@ 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'; + 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() { - GridRow() { - GridCol({ span: { sm: 12, md: 12, lg: 12 } }) { - SideBarContainer(SideBarContainerType.AUTO) { - Column() { - PhotoSideBar().margin({ top: 64 }) - }.backgroundColor('#f1f3f5') + 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: 16, width: 24, height: 24 }) - .onChange((value: boolean) => { - this.sideBarStatus = value; - }) } - }.onBreakpointChange((breakpoint: string) => { - this.currentBreakPoint = breakpoint; - }) + } + .width('100%') + .height('100%') } -} - - +} \ 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 83ef452002b58396c7d572a1784a4437469c1dcb..a4d7c1ab8e09e6ca30b9e1553ddb9adf173dd737 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,14 +24,35 @@ let storage = uiContext?.getSharedLocalStorage(); @Entry(storage) @Component struct Settings { - @State pathInfo: NavPathStack = new NavPathStack(); - @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'md'; + @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'; - @Builder myRouter(name: string, param?: number | undefined) { - WlanItem() + 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 CustomDivider() { + @Builder + myRouter(name: string, param?: number | undefined) { + if (name === 'wlanItem') { + WlanItem() + } + } + + @Builder + CustomDivider() { Divider() .strokeWidth('1px') .color($r('sys.color.ohos_id_color_list_separator')) @@ -37,7 +60,9 @@ struct Settings { } aboutToAppear() { - this.pathInfo.pushPath({ name: 'one' }); + if (this.currentWidthBreakpoint !== 'sm') { + this.pathInfo.pushPath({ name: 'wlanItem' }); + } } build() { @@ -47,15 +72,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 +91,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 +107,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 +119,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 +137,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 +151,30 @@ 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.background_secondary')) + .padding({ top: AppStorage.get('statusBarHeight') }) .navDestination(this.myRouter) } - }.onBreakpointChange((breakpoint: string) => { - this.currentBreakPoint = breakpoint; - }) + } + .width('100%') + .height('100%') + .backgroundColor($r('sys.color.background_secondary')) + .padding({ left: this.getUIContext().px2vp(getLeft(this.avoidAreas)) }) } } \ No newline at end of file diff --git a/entry/src/main/ets/common/BreakpointSystem.ets b/entry/src/main/ets/common/BreakpointSystem.ets index fd82cbe0d89fa0608a5b77a9b746b81c28218972..1b22fca3731d45e93385d781193a434f49594ee2 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; } @@ -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 0000000000000000000000000000000000000000..96c96c5d778348074b2b776878ad4b49929b4e96 --- /dev/null +++ b/entry/src/main/ets/common/Constants.ets @@ -0,0 +1,92 @@ +/* + * 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. + */ +import { window } from "@kit.ArkUI"; +import { hilog } from "@kit.PerformanceAnalysisKit"; + +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 +} + +export function getTop(avoidArea: window.AvoidAreaOptions | undefined): number { + let result: number = 0; + if (avoidArea !== undefined) { + if (avoidArea.area.topRect.height) { + 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/MailContent.ets b/entry/src/main/ets/common/MailContent.ets index d9751ea769d04f0305b6e84975798fdaf1928096..93ca774c7f0b6694f3bea02c300604c6f4223445 100644 --- a/entry/src/main/ets/common/MailContent.ets +++ b/entry/src/main/ets/common/MailContent.ets @@ -13,26 +13,47 @@ * 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')), 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')), - ] - @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'md'; + 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() { Column() { Column() { Row() { - if (this.currentBreakPoint === 'sm') { - Row().width(24).height(24) + if (this.currentWidthBreakpoint === 'sm') { + Row() + .width(24) + .height(24) } else { Image($r('app.media.ic_expand')) .width(24) @@ -43,51 +64,106 @@ 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 + this.getUIContext().px2vp(getRight(this.avoidAreas, this.windowWidth)), + 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) + .backgroundColor($r('sys.color.gray_01')) + .height(56 + this.getUIContext().px2vp(getBottom(this.avoidAreas, this.windowHeight)) * 0.8) .justifyContent(FlexAlign.SpaceBetween) - .padding(this.currentBreakPoint === 'sm' ? { left: 21, right: 21 } : { left: 46, right: 46 }) - .backgroundColor('#fff') + .alignItems(VerticalAlign.Top) + .padding({ + top: 6, + right: this.currentWidthBreakpoint === 'sm' ? 21 : 46, + left: this.currentWidthBreakpoint === 'sm' ? 21 : 46 + }) } } - .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 07469186908f6275d916da0ef8fd47fb4a9ff763..1f73ac257788670674cca3206e1b5098722c2e6c 100644 --- a/entry/src/main/ets/common/MailNavigation.ets +++ b/entry/src/main/ets/common/MailNavigation.ets @@ -13,34 +13,72 @@ * 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']; - @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'md'; + @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) { - MailContent() + if (name === 'mailContent') { + MailContent() + } } @Builder NavigationMenus() { - if (this.currentBreakPoint !== 'md') { + 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 }) - }.height(56).padding({ top: 48 }) + 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) + .margin({ + top: 24, + right: 16 + }) } } @@ -48,7 +86,7 @@ export struct MailNavigation { NavigationTitle() { Column() { Text($r('app.string.recvBox')) - .fontColor('#000') + .fontColor('#000000') .fontSize(30) .lineHeight(41) .fontWeight(FontWeight.Medium) @@ -57,12 +95,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 +117,78 @@ 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%') + .height(56) + .margin({ + left: this.currentWidthBreakpoint === 'sm' ? 12 : 18, + right: this.currentWidthBreakpoint === 'sm' ? 12 : 18 + }) 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%') - .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 }) + .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({ right: 12, left: 12 }) } // [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 5313b5a503b67aa0a3938fe0ced9e73479bc5b6a..2ead47392725de74418f2cb71f8e8fd7f558b3bd 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')) @@ -52,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() { @@ -74,8 +80,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) @@ -83,12 +91,15 @@ struct AccountInfo { .borderRadius(18) .TextStyle() } - }.width('100%').height(56) + } + .width('100%') + .height(56) } }) } .width('100%') .height('100%') + .scrollBar(BarState.Off) .padding({ left: 16, right: 16 }) .divider({ strokeWidth: 1 }) } @@ -102,9 +113,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 +124,9 @@ struct MailStatusList { Text($r('app.string.addAccount')) .fontSize(14) .fontColor('#0a59f7') - }.width('100%').height(48) + } + .width('100%') + .height(48) } } @@ -120,7 +134,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 +154,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 07925536b9ed8ca48538ef71c8379711457c05d0..1fe1d414b2784bb67ea8e44e4ab3c676993cfcf7 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')), @@ -25,19 +31,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,29 +54,75 @@ 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%') + 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')) + } + .width('100%') + .height(56) Grid() { 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).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 + }) + } + .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, + 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 e6a7ccd0727735d7801f0be166c39736dac5a83a..89b2f15adc771dcf92b1a1bfe9088789b7d70eac 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,13 +33,29 @@ 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() { 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 +67,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 +88,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 +106,28 @@ 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%') + .scrollBar(BarState.Off) .margin({ top: 16 }) - .width('100%').height('100%') - }.width('100%').height('100%') - .padding({ left: 12, right: 12 }) + .padding({ bottom: AppStorage.get('naviIndicatorHeight') as number + 48 }) + } + .height('100%') + .width('100%') + .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/SettingItem.ets b/entry/src/main/ets/common/SettingItem.ets index 4db7ec4d6fa9ec06afe157033f3381f67ead445f..39228f3ce3dd769465382b185dc63ee5c11f2788 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 f062288aa8ae262ca94937b7c0f7f94df75ef287..f9fa95090178409a6c8fa7b9ddb19bd5f9712fc6 100644 --- a/entry/src/main/ets/common/WlanItem.ets +++ b/entry/src/main/ets/common/WlanItem.ets @@ -13,13 +13,19 @@ * limitations under the License. */ +import { LengthMetrics, window } from '@kit.ArkUI'; import { SubItem } from './SettingItem'; -import { router } from '@kit.ArkUI'; +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'); - @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'md'; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'md'; + @Consume('pathInfo') pathInfo: NavPathStack; @Builder CustomDivider() { @@ -32,22 +38,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($r('sys.float.Title_M')) + } + .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 +79,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 +117,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 +153,21 @@ 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 + 32 }) } - .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')) + .padding({ right: this.getUIContext().px2vp(getRight(this.avoidAreas, this.windowWidth)) }) } -} - - +} \ 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 a8504cba4c3b188d9d03351215647b76b9e7484e..6168cd3f9d16706254679ee154fd2b6ba0ff06bd 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -13,11 +13,35 @@ * 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'); + // Application adaptation for horizontal and vertical screen switching. + this.setDefaultOrientation(); + }; + public onAvoidAreaChange: (avoidArea: window.AvoidAreaOptions) => void = (avoidArea: window.AvoidAreaOptions) => { + if (avoidArea.type === window.AvoidAreaType.TYPE_CUTOUT) { + AppStorage.setOrCreate('cutout', avoidArea); + } + } + + setDefaultOrientation(): void { + this.windowObj?.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); + } + onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); } @@ -29,7 +53,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 +65,38 @@ 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); + + // 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) => { + hilog.error(0x0000, 'testTag', '%{public}s', + `Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`); + }); }); } @@ -56,4 +114,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 cb2552b0569b62fbde3bde2e775d184ac502624e..db9fba2fc7f7cca825618f85678bdaa83076c378 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -13,26 +13,72 @@ * limitations under the License. */ -import { router } from '@kit.ArkUI'; +import { LengthMetrics, window } from '@kit.ArkUI'; +import Constants, { getBottom, getLeft, getRight, getTop, Route } from '../common/Constants'; @Entry @Component struct Index { - build() { - Column() { - Column() { - Button('A+B+C').onClick(() => { - this.getUIContext().getRouter().pushUrl({ url: "application/MailBox" }) - }).type(ButtonType.Normal).borderRadius(5).width(100).id('caseOne') + @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; - Button('A+C').onClick(() => { - this.getUIContext().getRouter().pushUrl({ url: "application/PhotoAlbum" }) - }).type(ButtonType.Normal).borderRadius(5).width(100).id('caseTwo') + 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) + }; + } - 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%') + build() { + 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({ + right: this.currentWidthBreakpoint === 'sm' ? 16 : 0, + left: this.currentWidthBreakpoint === 'sm' ? 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: 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')) } -} \ 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 b258b8247b3393f32f96e2b7901f8cc3861a4664..9ebaeb63dda1aae75ae151f4166d95263734b222 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/base/media/add.svg b/entry/src/main/resources/base/media/add.svg deleted file mode 100644 index 1885d67d6c3dba8b7bc235d72e96f97017ce50bc..0000000000000000000000000000000000000000 --- a/entry/src/main/resources/base/media/add.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - ic/public/add - - - - - - - - - - - - - - - - - - - \ 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 b258b8247b3393f32f96e2b7901f8cc3861a4664..9ebaeb63dda1aae75ae151f4166d95263734b222 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 24a2b20c80f17c53694a7ff6ad4969402572777b..8893bdcaf39b8e59ca35e6bcb8e22020e526c8c9 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