diff --git a/commons/base/src/main/ets/utils/AvPlayerUtil.ets b/commons/base/src/main/ets/utils/AvPlayerUtil.ets index becd2f1e353bb909f98ace07e793ae38e37a0a20..6020a5b26918657aabe307ff0bc596846dc16015 100644 --- a/commons/base/src/main/ets/utils/AvPlayerUtil.ets +++ b/commons/base/src/main/ets/utils/AvPlayerUtil.ets @@ -20,11 +20,9 @@ import { BusinessError } from '@kit.BasicServicesKit'; import Logger from './Logger'; import { CommonConstants } from '../constants/CommonConstants'; -const AppStorageUiContext: UIContext | undefined = AppStorage.get('uiContext'); - export class AvPlayerUtil { private avPlayer?: media.AVPlayer; - private context: common.UIAbilityContext = AppStorageUiContext?.getHostContext() as common.UIAbilityContext; + private context: common.UIAbilityContext; private url: resourceManager.RawFileDescriptor | null = null; private surfaceId: string = ''; private sliderBegin: number = 0; diff --git a/commons/base/src/main/ets/utils/DisplayUtil.ets b/commons/base/src/main/ets/utils/DisplayUtil.ets index 7d854299ea2b47aaad8e6831a29162cb2602be72..8036850fb2caa3ab82a154271b8ba42723ad4651 100644 --- a/commons/base/src/main/ets/utils/DisplayUtil.ets +++ b/commons/base/src/main/ets/utils/DisplayUtil.ets @@ -16,7 +16,6 @@ import { display } from '@kit.ArkUI'; // [Start display_util] - export class DisplayUtil { static getFoldCreaseRegion(uiContext: UIContext): void { if(canIUse('SystemCapability.Window.SessionManager')) { diff --git a/features/home/src/main/ets/view/BannerView.ets b/features/home/src/main/ets/view/BannerView.ets index 036227b69ce38b74ee1108f59e47996d7dec948b..d7b28e7af2d10fc7d91d6c14c598468a6bcf48e5 100644 --- a/features/home/src/main/ets/view/BannerView.ets +++ b/features/home/src/main/ets/view/BannerView.ets @@ -226,25 +226,17 @@ export struct BannerView { Text(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? `${this.bannerImgList[2].getDescription().getDescription()[0]}${this.bannerImgList[2].getDescription() .getDescription()[1]}` : this.bannerImgList[2].getDescription().getDescription()[0]) - .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'), - $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg')) - .getValue(this.currentWidthBreakpoint)) + .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'), $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg')).getValue(this.currentWidthBreakpoint)) .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[0]) - .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'), - $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')) - .getValue(this.currentWidthBreakpoint)) + .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'), $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')).getValue(this.currentWidthBreakpoint)) .fontColor(Color.White) .letterSpacing('1vp') .maxLines(1) Text(this.bannerImgList[2].getDescription().getDescription()[1]) - .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'), - $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg')) - .getValue(this.currentWidthBreakpoint)) + .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'), $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg')).getValue(this.currentWidthBreakpoint)) .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[0]) - .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'), - $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')) - .getValue(this.currentWidthBreakpoint)) + .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'), $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')).getValue(this.currentWidthBreakpoint)) .fontColor(Color.White) .letterSpacing('1vp') .maxLines(1) @@ -252,13 +244,9 @@ export struct BannerView { Visibility.None : Visibility.Visible) Text(this.bannerImgList[2].getDescription().getDescription()[2]) - .fontSize(new BreakpointType($r('app.float.immersive_text_2_font_sm'), - $r('app.float.immersive_text_2_font_md'), $r('app.float.immersive_text_2_font_lg')) - .getValue(this.currentWidthBreakpoint)) + .fontSize(new BreakpointType($r('app.float.immersive_text_2_font_sm'), $r('app.float.immersive_text_2_font_md'), $r('app.float.immersive_text_2_font_lg')).getValue(this.currentWidthBreakpoint)) .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[1]) - .lineHeight(new BreakpointType($r('app.float.immersive_text_2_line_sm'), - $r('app.float.immersive_text_2_line_md'), $r('app.float.immersive_text_2_line_lg')) - .getValue(this.currentWidthBreakpoint)) + .lineHeight(new BreakpointType($r('app.float.immersive_text_2_line_sm'), $r('app.float.immersive_text_2_line_md'), $r('app.float.immersive_text_2_line_lg')).getValue(this.currentWidthBreakpoint)) .fontColor(Color.White) .margin({ top: this.bannerImgList[2].getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1] @@ -267,12 +255,8 @@ export struct BannerView { .maxLines(1) } .padding({ - left: new BreakpointType($r('app.float.immersive_col_padding_left_sm'), - $r('app.float.immersive_col_padding_left_md'), $r('app.float.immersive_col_padding_left_lg')) - .getValue(this.currentWidthBreakpoint), - top: new BreakpointType($r('app.float.immersive_col_padding_top_sm'), - $r('app.float.immersive_col_padding_top_md'), $r('app.float.immersive_col_padding_top_lg')) - .getValue(this.currentWidthBreakpoint) + left: new BreakpointType($r('app.float.immersive_col_padding_left_sm'), $r('app.float.immersive_col_padding_left_md'), $r('app.float.immersive_col_padding_left_lg')).getValue(this.currentWidthBreakpoint), + top: new BreakpointType($r('app.float.immersive_col_padding_top_sm'), $r('app.float.immersive_col_padding_top_md'), $r('app.float.immersive_col_padding_top_lg')).getValue(this.currentWidthBreakpoint) }) .height('100%') .width('100%') @@ -288,26 +272,21 @@ export struct BannerView { left: $r('app.float.home_content_padding'), right: $r('app.float.home_content_padding') }) - .height(new BreakpointType($r('app.float.immersive_banner_height_sm'), $r('app.float.immersive_banner_height_md'), - $r('app.float.immersive_banner_height_lg')).getValue(this.currentWidthBreakpoint)) + .height(new BreakpointType($r('app.float.immersive_banner_height_sm'), $r('app.float.immersive_banner_height_md'), $r('app.float.immersive_banner_height_lg')).getValue(this.currentWidthBreakpoint)) .width('100%') .visibility(this.currentTopIndex === 2 ? Visibility.Visible : Visibility.None) } .width('100%') .padding({ - left: this.currentWidthBreakpoint === 'vp' && this.currentTopIndex === 2 ? - $r('app.float.side_bar_width') : 0 + left: this.currentWidthBreakpoint === 'vp' && this.currentTopIndex === 2 ? $r('app.float.side_bar_width') : 0 }) } getBannerNewHeight(windowWidth: number): string { // Obtain the window width and subtract the blank parts on both sides. - let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(32, - 48, 64).getValue(this.currentWidthBreakpoint) - - 96; + let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(32, 48, 64).getValue(this.currentWidthBreakpoint) - 96; // Calculate the width of a single image based on the percent. - result = (result - 12 * 2) * 4 / - 11; + result = (result - 12 * 2) * 4 / 11; // Calculate the total height of the grid layout. return result / 1.5 + 'vp'; } diff --git a/features/home/src/main/ets/view/DailyVideo.ets b/features/home/src/main/ets/view/DailyVideo.ets index 76ad521661bbcdae925a16c67044afb1a8ff96a9..f6868fe0733d24f03f51699d0e43687c656b3f88 100644 --- a/features/home/src/main/ets/view/DailyVideo.ets +++ b/features/home/src/main/ets/view/DailyVideo.ets @@ -13,15 +13,13 @@ * limitations under the License. */ -import { BreakpointConstants, CommonConstants } from '@ohos/commons'; import { BreakpointType } from '@ohos/commons'; -import { HomeConstants } from '../constants/HomeConstants'; import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel'; import { getTabIndex, SubtitleComponent, VideoImgComponent, VideoImgPlay, VideoImgRating } from './CommonView'; @Component export struct DailyVideo { - @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'lg'; @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; @State isShowingMainBorder: boolean = false; @@ -31,162 +29,121 @@ export struct DailyVideo { build() { // [Start sub_title_component] Column() { - SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[1] }) + SubtitleComponent({ title: '每日佳片' }) GridRow({ - columns: { - sm: BreakpointConstants.GRID_ROW_COLUMNS[2], - md: BreakpointConstants.GRID_ROW_COLUMNS[0], - lg: BreakpointConstants.GRID_ROW_COLUMNS[0] - }, - gutter: $r('app.float.grid_row_gutter') + columns: { sm: 4, md: 12, lg: 12 }, + gutter: '12vp' }) { // Main video section. - GridCol({ - span: { - sm: BreakpointConstants.GRID_COLUMN_SPANS[5], - md: BreakpointConstants.GRID_COLUMN_SPANS[1], - lg: BreakpointConstants.GRID_COLUMN_SPANS[1] - } - }) { + GridCol({ span: { sm: 4, md: 6, lg: 6 } }) { Column() { // [StartExclude sub_title_component] Stack({ alignContent: Alignment.Bottom }) { Image(this.mainDailyVideoImg.getImgSrc() ? this.mainDailyVideoImg.getImgSrc() : '') .focusable(true) .objectFit(ImageFit.Fill) - .width(CommonConstants.FULL_PERCENT) - .height(CommonConstants.FULL_PERCENT) + .width('100%') + .height('100%') .draggable(false) .borderRadius({ - topLeft: $r('app.float.daily_main_focus_radius'), - topRight: $r('app.float.daily_main_focus_radius') + topLeft: '18vp', + topRight: '18vp' }) VideoImgPlay() Row() { Text(this.mainDailyVideoImg.getTitle()) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_title_font_lg') : $r('app.float.main_daily_title_font')) + .fontSize(this.currentWidthBreakpoint === 'lg' ? '20fp' : '16fp') .fontColor(Color.White) - .fontWeight(CommonConstants.FONT_WEIGHT_700) - .margin({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_margin_lg') : $r('app.float.main_daily_margin') }) + .fontWeight(700) + .margin({ left: this.currentWidthBreakpoint === 'lg' ? '16vp' : '12vp' }) .layoutWeight(1) .maxLines(1) Text(this.mainDailyVideoImg.getRating()) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_rating_font_lg') : $r('app.float.main_daily_rating_font')) + .fontSize(this.currentWidthBreakpoint === 'lg' ? '12fp' : '8fp') .fontWeight(FontWeight.Normal) .fontColor(Color.White) - .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_rating_height_lg') : $r('app.float.main_daily_rating_height')) - .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_rating_width_lg') : $r('app.float.main_daily_rating_width')) + .height(this.currentWidthBreakpoint === 'lg' ? '18vp' : '12vp') + .width(this.currentWidthBreakpoint === 'lg' ? '30vp' : '20vp') .margin({ - right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG? - $r('app.float.main_daily_rating_right_lg') : $r('app.float.main_daily_rating_right'), - top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_rating_top_lg') : $r('app.float.main_daily_rating_top') + right: this.currentWidthBreakpoint === 'lg'? '16vp' : '12vp', + top: this.currentWidthBreakpoint === 'lg' ? '6vp' : '5vp' }) - .backgroundColor($r('app.color.main_daily_rating_background')) - .borderRadius(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_rating_radius_lg') : $r('app.float.main_daily_rating_radius')) + .backgroundColor('#4D000000') + .borderRadius(this.currentWidthBreakpoint === 'lg' ? '3vp' : '2vp') .textAlign(TextAlign.Center) } .alignItems(VerticalAlign.Top) .justifyContent(FlexAlign.Start) - .width(CommonConstants.FULL_PERCENT) - .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_row_height_lg') : $r('app.float.main_daily_row_height')) + .width('100%') + .height(this.currentWidthBreakpoint === 'lg' ? '46vp' : '33vp') } - .width(CommonConstants.FULL_PERCENT) + .width('100%') .layoutWeight(5) Row() { // [Start daily_small_video] Image($r('app.media.daily_small_video')) - .height(new BreakpointType($r('app.float.small_daily_image_height_sm'), - $r('app.float.small_daily_image_height_md'), $r('app.float.small_daily_image_height_lg')) - .getValue(this.currentWidthBreakpoint)) - .width(new BreakpointType($r('app.float.small_daily_image_width_sm'), - $r('app.float.small_daily_image_width_md'), $r('app.float.small_daily_image_width_lg')) - .getValue(this.currentWidthBreakpoint)) - .borderRadius($r('app.float.daily_small_img_radius')) + .height(new BreakpointType('40vp', '44vp', '68vp').getValue(this.currentWidthBreakpoint)) + .width(new BreakpointType('76vp', '84vp', '129vp').getValue(this.currentWidthBreakpoint)) + .borderRadius('8vp') // [End daily_small_video] Column() { // [Start dd_main_daily_video_img] Text(this.mainDailyVideoImg.getOtherInfo()) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_other_font_lg') : $r('app.float.main_daily_other_font')) + .fontSize(this.currentWidthBreakpoint === 'lg' ? '16vp' : '14vp') // [End dd_main_daily_video_img] .fontWeight(FontWeight.Normal) .maxLines(1) Text(this.mainDailyVideoImg.getContent()) - .opacity(CommonConstants.TEXT_OPACITY[0]) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_content_font_lg') : $r('app.float.main_daily_content_font')) + .opacity(0.4) + .fontSize(this.currentWidthBreakpoint === 'lg' ? '14vp' : '12vp') .fontWeight(FontWeight.Normal) .maxLines(1) } .margin({ - left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.small_daily_column_margin_lg'): $r('app.float.small_daily_column_margin'), - right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.small_daily_column_margin_lg'): $r('app.float.small_daily_column_margin') + left: this.currentWidthBreakpoint === 'lg' ? '16vp': '12vp', + right: this.currentWidthBreakpoint === 'lg' ? '16vp': '12vp' }) .alignItems(HorizontalAlign.Start) .layoutWeight(1) - Button(HomeConstants.HOME_BUTTON_TEXT[0]) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_button_font_lg'): $r('app.float.main_daily_button_font')) - .fontColor($r('app.color.tab_sel_color')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) - .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_button_height_lg') : $r('app.float.main_daily_button_height_lg')) - .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.main_daily_button_width_lg') : $r('app.float.main_daily_button_width_lg')) - .borderRadius($r('app.float.main_daily_button_radius')) - .backgroundColor($r('app.color.button_background')) + Button('关注') + .fontSize(this.currentWidthBreakpoint === 'lg' ? '14fp': '12fp') + .fontColor('#ED6F21') + .fontWeight(500) + .height(this.currentWidthBreakpoint === 'lg' ? '34vp' : '34vp') + .width(this.currentWidthBreakpoint === 'lg' ? '77vp' : '77vp') + .borderRadius('16vp') + .backgroundColor('#0D000000') } .alignItems(VerticalAlign.Center) .padding({ - left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.small_daily_row_padding_lg') : $r('app.float.small_daily_row_padding'), - right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.small_daily_row_padding_lg') : $r('app.float.small_daily_row_padding') + left: this.currentWidthBreakpoint === 'lg' ? '16vp' : '12vp', + right: this.currentWidthBreakpoint === 'lg' ? '16vp' : '12vp' }) .layoutWeight(2) // [EndExclude sub_title_component] } - .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[6])) - .width(CommonConstants.FULL_PERCENT) + .tabIndex(getTabIndex('DailyVideoOne')) + .width('100%') // Dynamically setting the height at different breakpoints. .height(this.getDailyVideoHeight(this.currentWidthBreakpoint, this.windowWidth, true)) - .borderRadius($r('app.float.card_radius')) - .backgroundColor($r('app.color.home_component_background')) + .borderRadius('36vp') + .backgroundColor('#F1F3F5') } .padding({ - top: $r('app.float.sub_title_row_margin'), - bottom: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.sub_title_row_margin') : 0, - left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), - right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.home_content_padding_sm') : 0 + top: '13vp', + bottom: this.currentWidthBreakpoint !== 'sm' ? '13vp' : 0, + left: new BreakpointType('16vp', '24vp', '36vp').getValue(this.currentWidthBreakpoint), + right: this.currentWidthBreakpoint === 'sm' ? '16vp' : 0 }) // Sub video section. - GridCol({ - span: { - sm: BreakpointConstants.GRID_COLUMN_SPANS[5], - md: BreakpointConstants.GRID_COLUMN_SPANS[1], - lg: BreakpointConstants.GRID_COLUMN_SPANS[1] - } - }) { + GridCol({ span: { sm: 4, md: 6, lg: 6 } }) { Grid() { ForEach(this.dailyVideoImgList, (item: VideoImage) => { GridItem() { @@ -196,88 +153,79 @@ export struct DailyVideo { VideoImgPlay() VideoImgRating({ rating: item.getRating() }) } - .width(CommonConstants.FULL_PERCENT) + .width('100%') // The width and height vary with the container assembly and the aspect ratio remains unchanged. - .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO) + .aspectRatio(1.74) // [StartExclude sub_title_component] Text(item.getTitle()) - .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.daily_title_font_lg') : $r('app.float.daily_title_font')) + .fontSize(this.currentWidthBreakpoint === 'lg' ? '16fp' : '14fp') .fontWeight(FontWeight.Normal) - .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.video_title_line_lg') : $r('app.float.video_title_line')) - .margin({ top: $r('app.float.daily_title_margin') }) - .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color')) + .lineHeight(this.currentWidthBreakpoint === 'lg' ? '24vp' : '21vp') + .margin({ top: '4vp' }) + .fontColor(this.currentTopIndex === 2 ? Color.White : '#182431') Text(item.getContent()) - .fontSize($r('app.float.daily_content_font')) + .fontSize('12fp') .fontWeight(FontWeight.Normal) - .lineHeight($r('app.float.video_content_line')) - .margin({ top: $r('app.float.daily_content_margin') }) - .opacity(CommonConstants.TEXT_OPACITY[0]) - .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color')) - .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible : - Visibility.None) + .lineHeight('18vp') + .margin({ top: '2vp' }) + .opacity(0.4) + .fontColor(this.currentTopIndex === 2 ? Color.White : '#182431') + .visibility(this.currentWidthBreakpoint === 'sm' ? Visibility.Visible : Visibility.None) // [EndExclude sub_title_component] } .alignItems(HorizontalAlign.Start) } }, (item: VideoImage, index: number) => index + JSON.stringify(item)) } - .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[7])) + .tabIndex(getTabIndex('DailyVideoTwo')) // Dynamically setting the height at different breakpoints. .height(this.getDailyVideoHeight(this.currentWidthBreakpoint, this.windowWidth, false)) - .width(CommonConstants.FULL_PERCENT) + .width('100%') // Sets the number of grid layout columns and evenly divides the height. - .columnsTemplate(CommonConstants.VIDEO_GRID_COLUMNS[0]) - .rowsTemplate(CommonConstants.VIDEO_GRID_COLUMNS[0]) - .rowsGap($r('app.float.daily_grid_gap')) - .columnsGap($r('app.float.daily_grid_gap')) + .columnsTemplate('1fr 1fr') + .rowsTemplate('1fr 1fr') + .rowsGap('12vp') + .columnsGap('12vp') .padding({ - top: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.sub_title_row_margin') : $r('app.float.focus_more_size'), - bottom: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.sub_title_row_margin') : $r('app.float.focus_more_size'), - left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.home_content_padding_sm') : $r('app.float.focus_more_size'), - right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint) + top: this.currentWidthBreakpoint !== 'sm' ? '13vp' : '6vp', + bottom: this.currentWidthBreakpoint !== 'sm' ? '13vp' : '6vp', + left: this.currentWidthBreakpoint === 'sm' ? '16vp' : '6vp', + right: new BreakpointType('16vp', '24vp', '36vp').getValue(this.currentWidthBreakpoint) }) } } } - .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? - $r('app.float.side_bar_width') : 0 }) - .margin({ top: $r('app.float.main_daily_margin') }) + .padding({ left: this.currentWidthBreakpoint === 'lg' && this.currentTopIndex === 2 ? '96vp' : 0 }) + .margin({ top: '12vp' }) // [End sub_title_component] } getDailyVideoHeight(currentWidthBreakpoint: string, windowWidth: number, isMain: boolean): string { // Obtain the window width and subtract the blank parts on both sides. - let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], - HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) - - HomeConstants.VIDEO_GRID_ITEM_SPACE; + let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(32, + 48, 64).getValue(this.currentWidthBreakpoint) - 12; // Calculate the width of a single image based on the number of grid columns. - if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { - result = (result - HomeConstants.LG_SIDEBAR_WIDTH) / HomeConstants.TWO; - } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { - result /= HomeConstants.TWO; + if (currentWidthBreakpoint === 'lg') { + result = (result - 96) / 2; + } else if (currentWidthBreakpoint === 'md') { + result /= 2; } else { result /= 1; } // Calculate the height of a single image and title, and calculate the total height of the grid layout. - result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE) / HomeConstants.VIDEO_DIALOG_ASPECT_RATIO; - if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) { + result = (result - 12) / 1.74; + if (currentWidthBreakpoint === 'sm') { if (isMain) { - return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[0] + HomeConstants.HEIGHT_UNIT); + return (result + 103 + 'vp'); } else { - return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[2] + HomeConstants.HEIGHT_UNIT); + return (result + 115 + 'vp'); } } else { if (!isMain) { - return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[1] + HomeConstants.HEIGHT_UNIT); + return (result + 88 + 'vp'); } else { - return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[3] + HomeConstants.HEIGHT_UNIT); + return (result + 62 + 'vp'); } } } diff --git a/features/home/src/main/ets/view/Home.ets b/features/home/src/main/ets/view/Home.ets index 0e98c3dbaf453fe9c6c72aa9d93c3611cce19188..8f5f03ac6dc06c5d17f8b73a279272f6fbb7565b 100644 --- a/features/home/src/main/ets/view/Home.ets +++ b/features/home/src/main/ets/view/Home.ets @@ -19,7 +19,7 @@ import { deviceInfo } from '@kit.BasicServicesKit'; import { SearchView } from '@ohos/search'; -import { BreakpointConstants, CommonConstants } from '@ohos/commons'; +import { CommonConstants } from '@ohos/commons'; import { FooterTab, FooterTabViewModel } from '../viewmodel/FooterTabViewModel'; import { HomeHeader } from './HomeHeader'; import { HomeContent } from './HomeContent'; @@ -30,7 +30,7 @@ export struct Home { @State isSearching: boolean = false; @StorageLink('scrollHeight') scrollHeight: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; - @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'lg'; private tabList: FooterTab[] = new FooterTabViewModel().getTabList(); private scroller: Scroller = new Scroller(); private sideScroller: Scroller = new Scroller(); @@ -40,28 +40,28 @@ export struct Home { Column() { Image(index !== this.currentBottomIndex ? (this.currentTopIndex === 2 && this.currentBottomIndex === 0 && !this.isSearching ? item.getIconWhite() : item.getIcon()) : item.getIconSelected()) - .width($r('app.float.icon_tab_width')) - .height($r('app.float.icon_tab_height')) + .width('24vp') + .height('24vp') Text(item.getName()) - .fontSize($r('app.float.tab_font_size')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) - .fontColor(index === this.currentBottomIndex ? $r('app.color.tab_sel_color') : (this.currentTopIndex === 2 && + .fontSize('10fp') + .fontWeight(500) + .fontColor(index === this.currentBottomIndex ? '#ED6F21' : (this.currentTopIndex === 2 && this.currentBottomIndex === 0 && !this.isSearching ? Color.White : Color.Black)) - .margin({ top: $r('app.float.tab_top_margin') }) - .opacity(index === this.currentBottomIndex ? CommonConstants.TEXT_OPACITY[3] : CommonConstants.TEXT_OPACITY[0]) + .margin({ top: '4vp' }) + .opacity(index === this.currentBottomIndex ? 1 : 0.4) } - .padding({ bottom: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG && deviceInfo.deviceType !== - CommonConstants.DEVICE_TYPE ? $r('app.float.bottom_navigation') : 0 }) - .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.tab_height_lg') : - CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) + .padding({ bottom: this.currentWidthBreakpoint !== 'lg' && deviceInfo.deviceType !== + '2in1' ? '24vp' : 0 }) + .height(this.currentWidthBreakpoint === 'lg' ? '100vp' : + '100%') + .width('100%') .justifyContent(FlexAlign.Center) } build() { // [Start tabs_barposition] Tabs({ - barPosition: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End + barPosition: this.currentWidthBreakpoint === 'lg' ? BarPosition.Start : BarPosition.End }) { // [StartExclude tabs_barposition] // [Start tab_content] @@ -77,10 +77,10 @@ export struct Home { SearchView({ isSearching: $isSearching }) .visibility(!this.isSearching ? Visibility.None : Visibility.Visible) } - .width(CommonConstants.FULL_PERCENT) + .width('100%') } .scrollBar(BarState.Off) - .height(CommonConstants.FULL_PERCENT) + .height('100%') // Obtains the sliding offset on the y axis during sliding. .onScrollFrameBegin((offset: number) => { this.scrollHeight = this.sideScroller.currentOffset().yOffset; @@ -89,11 +89,10 @@ export struct Home { HomeHeader({ isSearching: $isSearching }) .visibility(!this.isSearching ? Visibility.Visible : Visibility.None) - .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? - $r('app.float.side_bar_width') : 0 }) + .padding({ left: this.currentWidthBreakpoint === 'lg' ? '96vp' : 0 }) } - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) + .height('100%') + .width('100%') .alignContent(Alignment.Top) } else { // Non-immersive design for the home page. @@ -109,13 +108,13 @@ export struct Home { SearchView({ isSearching: $isSearching }) .visibility(!this.isSearching ? Visibility.None : Visibility.Visible) } - .width(CommonConstants.FULL_PERCENT) + .width('100%') } .layoutWeight(1) .scrollBar(BarState.Off) } - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) + .height('100%') + .width('100%') } } .tabBar(this.BottomTabBuilder(this.tabList[0], 0)) @@ -138,27 +137,22 @@ export struct Home { // [EndExclude tabs_barposition] } // Change the position and size of the tab at the bottom. - .barWidth(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_tab_bar_width_lg') : - CommonConstants.FULL_PERCENT) - .barHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? CommonConstants.FULL_PERCENT : - (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.tab_size_lg') : - $r('app.float.tab_size'))) - .barMode(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarMode.Scrollable : BarMode.Fixed, + .barWidth(this.currentWidthBreakpoint === 'lg' ? '96vp' : '100%') + .barHeight(this.currentWidthBreakpoint === 'lg' ? '100%' : (deviceInfo.deviceType === '2in1' ? '56vp' : '76vp')) + .barMode(this.currentWidthBreakpoint === 'lg' ? BarMode.Scrollable : BarMode.Fixed, { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER }) - .vertical(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) + .vertical(this.currentWidthBreakpoint === 'lg') // [End tabs_barposition] - .barOverlap(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? true : - false) + .barOverlap(this.currentWidthBreakpoint === 'lg' && this.currentTopIndex === 2 ? true : false) .barBackgroundBlurStyle(BlurStyle.NONE) .barBackgroundColor(this.currentTopIndex === 2 && this.currentBottomIndex === 0 ? - (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.color.side_bar_background') : - $r('app.color.home_content_background')) : $r('app.color.tab_background_color')) + (this.currentWidthBreakpoint === 'lg' ? '#0DFFFFFF' : '#222A3E') : '#F1F3F5') .onChange((index: number) => { this.currentBottomIndex = index; }) .scrollable(false) .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) + .height('100%') + .width('100%') } } \ No newline at end of file diff --git a/features/home/src/main/ets/view/HomeContent.ets b/features/home/src/main/ets/view/HomeContent.ets index d338b0f256610bc4f41d70b7ba90a1c4924d67ee..6e8a43880c2c47ba96f65e5257614e70455f4a26 100644 --- a/features/home/src/main/ets/view/HomeContent.ets +++ b/features/home/src/main/ets/view/HomeContent.ets @@ -55,15 +55,12 @@ export struct HomeContent { $r('app.media.immersive_background_sm'), $r('app.media.immersive_background_md'), $r('app.media.immersive_background_lg')).getValue(this.currentWidthBreakpoint) : $r('app.media.white_background')) // Set the size of the background image. - .backgroundImageSize({ width: CommonConstants.FULL_PERCENT, height: new BreakpointType( - $r('app.float.immersive_background_height_sm'), $r('app.float.immersive_background_height_md'), - $r('app.float.immersive_background_height_lg')).getValue(this.currentWidthBreakpoint) }) + .backgroundImageSize({ width: '100%', height: new BreakpointType('384vp','420vp', '720vp').getValue(this.currentWidthBreakpoint) }) // Set the uniform background color. .backgroundColor(this.currentTopIndex === 2 && !this.isSearching ? (this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_MD ? - $r('app.color.home_content_background') : $r('app.color.home_content_background_md')) : Color.White) - .width(CommonConstants.FULL_PERCENT) + '#222A3E' : '#273148') : Color.White) + .width('100%') // [End banner_view] - .padding({ bottom: deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE && this.currentWidthBreakpoint === - BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_navigation') : 0 }) + .padding({ bottom: deviceInfo.deviceType !== '2in1' && this.currentWidthBreakpoint === 'lg' ? $r('app.float.bottom_navigation') : 0 }) } } \ No newline at end of file diff --git a/features/home/src/main/ets/view/HomeHeader.ets b/features/home/src/main/ets/view/HomeHeader.ets index 56965126e55b8b218d5e5411e2d8b0032551b4b3..c14737b9b17c698082d4897f2d71bdb18c69d3a8 100644 --- a/features/home/src/main/ets/view/HomeHeader.ets +++ b/features/home/src/main/ets/view/HomeHeader.ets @@ -35,41 +35,18 @@ export struct HomeHeader { // [Start build_column] build() { Column() { - GridRow({ - columns: { - sm: 4, - md: 12, - lg: 12 - } - }) { - GridCol({ - span: { - sm: 4, - md: 7, - lg: 7 - } - }) { + GridRow({ columns: { sm: 4, md: 12, lg: 12 } }) { + GridCol({ span: { sm: 4, md: 7, lg: 7 } }) { this.TopTabBar() } - .padding({ - top: deviceInfo.deviceType === '2in1' ? 0 : $r('app.float.search_top_padding_top') - }) - .height(deviceInfo.deviceType === '2in1' ? $r('app.float.search_top_height') : - $r('app.float.search_top_height_more')) + .padding({ top: deviceInfo.deviceType === '2in1' ? 0 : $r('app.float.search_top_padding_top') }) + .height(deviceInfo.deviceType === '2in1' ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more')) - GridCol({ - span: { - sm: 4, - md: 5, - lg: 5 - } - }) { + GridCol({ span: { sm: 4, md: 5, lg: 5 } }) { this.searchBar() } - .padding({ top: this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === - '2in1' ? 0 : $r('app.float.search_top_padding_top') }) - .height(this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === - '2in1' ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more')) + .padding({ top: this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === '2in1' ? 0 : $r('app.float.search_top_padding_top') }) + .height(this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === '2in1' ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more')) } // The background color of the top tab bar is changed during the slide-down process. .backgroundColor(this.scrollHeight >= new BreakpointType(HomeConstants.BACKGROUND_CHANGE_HEIGHT[0], @@ -92,26 +69,20 @@ export struct HomeHeader { ForEach(HomeConstants.TOP_TOPIC_LIST, (item: string, index: number) => { ListItem() { Text(item) - .fontSize(this.currentTopIndex === index ? $r('app.float.search_tab_font_selected') : - $r('app.float.search_tab_font')) - .fontWeight(this.currentTopIndex === index ? 700 : - 500) - .width(this.currentTopIndex === index ? $r('app.float.top_text_width_selected') : - $r('app.float.top_text_width')) + .fontSize(this.currentTopIndex === index ? $r('app.float.search_tab_font_selected') : $r('app.float.search_tab_font')) + .fontWeight(this.currentTopIndex === index ? 700 : 500) + .width(this.currentTopIndex === index ? $r('app.float.top_text_width_selected') : $r('app.float.top_text_width')) .textAlign(TextAlign.Center) .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color')) - .lineHeight(index === this.currentTopIndex ? $r('app.float.top_tab_list_height_selected') : - $r('app.float.top_tab_list_height')) + .lineHeight(index === this.currentTopIndex ? $r('app.float.top_tab_list_height_selected') : $r('app.float.top_tab_list_height')) .focusable(true) .groupDefaultFocus(index === 0 ? true : false) .borderRadius($r('app.float.text_focus_radius')) } .align(Alignment.Center) .margin({ - top: this.currentTopIndex === index ? $r('app.float.top_tab_list_top_selected') : - $r('app.float.top_tab_list_top'), - bottom: this.currentTopIndex === index ? $r('app.float.top_tab_list_bottom_selected') : - $r('app.float.top_tab_list_bottom') + top: this.currentTopIndex === index ? $r('app.float.top_tab_list_top_selected') : $r('app.float.top_tab_list_top'), + bottom: this.currentTopIndex === index ? $r('app.float.top_tab_list_bottom_selected') : $r('app.float.top_tab_list_bottom') }) .padding({ left: new BreakpointType(8, 12, 18).getValue(this.currentWidthBreakpoint), diff --git a/features/home/src/main/ets/view/RecommendedVideo.ets b/features/home/src/main/ets/view/RecommendedVideo.ets index a0bfa1cb4b90f1165c4280718dd2884d603e56f3..dd35caadc99ba4aabd66bf42f934ea975326a7ac 100644 --- a/features/home/src/main/ets/view/RecommendedVideo.ets +++ b/features/home/src/main/ets/view/RecommendedVideo.ets @@ -19,7 +19,6 @@ import { componentUtils } from '@kit.ArkUI'; import { deviceInfo } from '@kit.BasicServicesKit'; -import { BreakpointConstants, CommonConstants } from '@ohos/commons'; import { BreakpointType, Logger, WindowUtil } from '@ohos/commons'; import { HomeConstants } from '../constants/HomeConstants'; import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel'; @@ -28,8 +27,8 @@ import { RightClickMenu, VideoDialog } from './VideoDialog'; @Component export struct RecommendedVideo { - @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; - @StorageLink('videoGridColumn') videoGridColumn: string = CommonConstants.VIDEO_GRID_COLUMNS[0]; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'lg'; + @StorageLink('videoGridColumn') videoGridColumn: string = '1fr 1fr'; @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; @State isShowingRecommendBorder: boolean = false; @@ -52,7 +51,6 @@ export struct RecommendedVideo { Stack({ alignContent: Alignment.Center }) { // [StartExclude aligncontent] // [StartExclude build_grid] - // [Start jh_get_img_src] Image(item.getImgSrc()) .objectFit(ImageFit.Fill) @@ -63,7 +61,7 @@ export struct RecommendedVideo { .focusable(true) .groupDefaultFocus(index === 0 ? true : false) .draggable(false) - .borderRadius($r('app.float.banner_focus_radius')) + .borderRadius('16vp') .id(JSON.stringify(item)) Column() { VideoImgRating({ rating: item.getRating() }) @@ -104,7 +102,7 @@ export struct RecommendedVideo { let topHeightNeeded: number = new BreakpointType(HomeConstants.VIDEO_DIALOG_HEIGHTS[0], HomeConstants.VIDEO_DIALOG_HEIGHTS[1], HomeConstants.VIDEO_DIALOG_HEIGHTS[2]) .getValue(this.currentWidthBreakpoint) + rectTop - rectTop2; - if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) { + if (this.currentWidthBreakpoint === 'sm') { topHeightNeeded += HomeConstants.HOME_HEADER_HEIGHT_SM; } let dialogYOffset: number; @@ -121,7 +119,7 @@ export struct RecommendedVideo { let mainWindow = this.windowUtil!.getMainWindow(); isLayoutFullScreen = mainWindow!.getWindowProperties().isLayoutFullScreen; // Subtract the width and height of the window in the PC/2in1 device. - if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE && !isLayoutFullScreen) { + if (deviceInfo.deviceType === '2in1' && !isLayoutFullScreen) { dialogYOffset -= HomeConstants.WINDOW_UNDEFINED_TOP; rectLeft -= HomeConstants.WINDOW_UNDEFINED_LEFT; } else { @@ -157,25 +155,21 @@ export struct RecommendedVideo { .editMode(false) // Sets the number of grid layout columns and evenly divides the width. .columnsTemplate(this.videoGridColumn) - .rowsTemplate(CommonConstants.VIDEO_GRID_COLUMNS[0]) + .rowsTemplate('1fr 1fr') .width('100%') - .rowsGap($r('app.float.video_grid_gap')) - .columnsGap($r('app.float.video_grid_gap')) + .rowsGap('12vp') + .columnsGap('12vp') // Dynamically calculates the total height based on the following numbers of breakpoints. .height(this.getGridHeight(this.videoGridColumn, this.currentWidthBreakpoint, this.windowWidth)) .padding({ - left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? - new BreakpointType($r('app.float.home_recommended_padding_sm'), $r('app.float.home_recommended_padding_md'), - $r('app.float.home_recommended_padding_lg')).getValue(this.currentWidthBreakpoint) : - new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), - right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), - top: $r('app.float.recommended_video_padding_top'), - bottom: $r('app.float.recommended_video_padding_bottom') - } - // [EndExclude grid_foreach] - ) + left: this.currentWidthBreakpoint === 'lg' && this.currentTopIndex === 2 ? + new BreakpointType('112vp', '120vp', '132vp').getValue(this.currentWidthBreakpoint) : + new BreakpointType('16vp', '24vp', '36vp').getValue(this.currentWidthBreakpoint), + right: new BreakpointType('16vp', '24vp', '36vp').getValue(this.currentWidthBreakpoint), + top: '12vp', + bottom: '6vp' + }) + // [EndExclude grid_foreach] // [EndExclude build_grid] // Zooming and pinching functions of the grid. // [EndExclude jh_tabindex_gettabindex] @@ -220,16 +214,16 @@ export struct RecommendedVideo { // Obtain the window width and subtract the blank parts on both sides. let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint); - if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + if (currentWidthBreakpoint === 'lg') { result = result - HomeConstants.LG_SIDEBAR_WIDTH; } // Calculate the width of a single image based on the number of grid columns. - if (videoGridColumn === CommonConstants.VIDEO_GRID_COLUMNS[0]) { + if (videoGridColumn === '1fr 1fr') { result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 1) / HomeConstants.TWO; - } else if (videoGridColumn === CommonConstants.VIDEO_GRID_COLUMNS[1]) { - result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 2) / CommonConstants.THREE; - } else if (videoGridColumn === CommonConstants.VIDEO_GRID_COLUMNS[2]) { - result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 3) / CommonConstants.FOUR; + } else if (videoGridColumn === '1fr 1fr 1fr') { + result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 2) / 3; + } else if (videoGridColumn === '1fr 1fr 1fr 1fr') { + result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 3) / 4; } else { result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 4) / HomeConstants.FIVE; } diff --git a/features/home/src/main/ets/view/VideoDaily.ets b/features/home/src/main/ets/view/VideoDaily.ets index 64f0271b885ff576f8fa2a7e7c91179cb1a6fb16..5938f5ed8e45d74119a2c55bfd11a95cbee18e6c 100644 --- a/features/home/src/main/ets/view/VideoDaily.ets +++ b/features/home/src/main/ets/view/VideoDaily.ets @@ -64,8 +64,8 @@ export struct DailyVideo { if (aspectRatio < 1.2 && aspectRatio >= 0.8) { this.mainWindowClass?.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); } - // [Start dd_windowrect_rect] + // [Start dd_windowrect_rect] // [Start dd_isfullscreen] if (this.isFullScreen) { if (deviceInfo.deviceType !== '2in1') { diff --git a/features/search/src/main/ets/view/SearchContent.ets b/features/search/src/main/ets/view/SearchContent.ets index 0eec1ded59222d44108dbc0e1642e2df5d328b00..e5ccfbb55cd316937cdfaf54d4091e6645550504 100644 --- a/features/search/src/main/ets/view/SearchContent.ets +++ b/features/search/src/main/ets/view/SearchContent.ets @@ -84,42 +84,41 @@ export struct SearchContent { @Builder searchDiscovery() { Row() { - Text(SearchConstants.SEARCH_SUB_TITLES[2]) - .fontSize($r('app.float.search_history_title_font')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) + Text('搜索发现') + .fontSize('20fp') + .fontWeight(500) Blank() Image($r('app.media.ic_public_rotate')) - .height($r('app.float.search_discovery_img_size')) - .width($r('app.float.search_discovery_img_size')) - .margin({ right: $r('app.float.search_discovery_img_margin') }) - .fillColor($r('app.color.type_tabs_font_selected')) + .height('16vp') + .width('16vp') + .margin({ right: '24vp' }) + .fillColor('#ED6F21') } - .height($r('app.float.search_discovery_row_height')) - .width(CommonConstants.FULL_PERCENT) - .margin({ top: $r('app.float.search_discovery_img_margin') }) + .height('24vp') + .width('100%') + .margin({ top: '24vp' }) List() { - ForEach(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_DISCOVERY_LARGE : + ForEach(this.currentWidthBreakpoint === 'lg' ? SearchConstants.SEARCH_DISCOVERY_LARGE : SearchConstants.SEARCH_DISCOVERY_LARGE.slice(0, 6), (item: string, index: number) => { ListItem() { // [StartExclude search_discovery] Column() { Text(item) - .fontSize($r('app.float.search_discovery_list_font')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) + .fontSize('16vp') + .fontWeight(500) } .padding({ right: this.getDividerPadding(this.currentWidthBreakpoint, index) }) - .height($r('app.float.search_discovery_list_column_height')) - .width(CommonConstants.FULL_PERCENT) - .margin({ top: $r('app.float.search_discovery_list_column_margin') }) + .height('21vp') + .width('100%') + .margin({ top: '12vp' }) .alignItems(HorizontalAlign.Start) // [EndExclude search_discovery] } }, (item: string, index: number) => index + JSON.stringify(item)) } - .width(CommonConstants.FULL_PERCENT) - .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[0] : - SearchConstants.SEARCH_LIST_LANES[1]) + .width('100%') + .lanes(this.currentWidthBreakpoint === 'lg' ? 3 : 2) } // [End search_discovery] diff --git a/features/search/src/main/ets/view/SearchForHua.ets b/features/search/src/main/ets/view/SearchForHua.ets index 7d65b7a56e91b4da2ec04fa6b699ede0f189cbcf..73036ae6fc0d204178d9764392ae3262c4e10a2e 100644 --- a/features/search/src/main/ets/view/SearchForHua.ets +++ b/features/search/src/main/ets/view/SearchForHua.ets @@ -17,7 +17,7 @@ * 最佳实践: 平板开发实践 */ -import { BreakpointConstants, CommonConstants } from '@ohos/commons'; +import { BreakpointConstants } from '@ohos/commons'; import { Logger } from '@ohos/commons'; import { SearchConstants } from '../constants/SearchConstants'; @@ -35,22 +35,21 @@ export struct SearchForHua { ListItem() { Column() { Text(item) - .fontSize($r('app.float.search_hua_list_font')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) - .height($r('app.float.search_hua_list_text_height')) + .fontSize('16fp') + .fontWeight(500) + .height('47.5vp') Divider() .color(Color.Black) - .height($r('app.float.search_hua_divider_height')) - .opacity(CommonConstants.DIVIDER_OPACITY) - .width(CommonConstants.FULL_PERCENT) + .height('1vp') + .opacity(0.05) + .width('100%') } .alignItems(HorizontalAlign.Start) - .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && index % - SearchConstants.SEARCH_INDEX[0] === 0 ? $r('app.float.search_hua_column_margin_lg') : 0 }) - .height($r('app.float.search_hua_column_height')) + .margin({ right: this.currentWidthBreakpoint === 'lg' && index % 2 === 0 ? '12vp' : 0 }) + .height('48vp') .onClick(() => { - if (index === SearchConstants.SEARCH_INDEX[1]) { + if (index === 3) { this.searchInput = item; } else { Logger.info(`Please click on the third list item`); @@ -60,8 +59,7 @@ export struct SearchForHua { }) // [EndExclude searchForHua] } - .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[1] : - SearchConstants.SEARCH_LIST_LANES[2]) + .lanes(this.currentWidthBreakpoint === 'lg' ? 2 : 1) // [End searchForHua] } .layoutWeight(1) diff --git a/features/videoDetail/src/main/ets/view/AllComments.ets b/features/videoDetail/src/main/ets/view/AllComments.ets index e5a3c1abd866120b67e831219344d799d9c0943b..e581b0c8678495f2ae6dd227eb1048a513577d56 100644 --- a/features/videoDetail/src/main/ets/view/AllComments.ets +++ b/features/videoDetail/src/main/ets/view/AllComments.ets @@ -67,11 +67,9 @@ export struct AllComments { Row() { // [Start get_comment_image_src] Image(item.getCommentImageSrc()) - .width(new BreakpointType('227vp', '254vp', - this.commentImgWidth).getValue(this.currentWidthBreakpoint)) - .height(new BreakpointType('227vp', - '254vp', this.commentImgHeight).getValue(this.currentWidthBreakpoint)) - .borderRadius( $r('app.float.all_comments_img_radius')) + .width(new BreakpointType('227vp', '254vp', this.commentImgWidth).getValue(this.currentWidthBreakpoint)) + .height(new BreakpointType('227vp', '254vp', this.commentImgHeight).getValue(this.currentWidthBreakpoint)) + .borderRadius('8vp') .aspectRatio(1.46) // [End get_comment_image_src] } diff --git a/features/videoDetail/src/main/ets/view/VideoDetail.ets b/features/videoDetail/src/main/ets/view/VideoDetail.ets index 34589e6b376546ddf862bc549dd8f4bd90f481eb..f21057edcb739023a39f40875ecc29feef823850 100644 --- a/features/videoDetail/src/main/ets/view/VideoDetail.ets +++ b/features/videoDetail/src/main/ets/view/VideoDetail.ets @@ -37,8 +37,8 @@ import { DetailConstants } from '../constants/DetailConstants'; @Component export struct VideoDetail { - @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; - @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'lg'; + @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = 'lg'; @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('isHalfFolded') @Watch('onHalfFoldedChange') isHalfFolded: boolean = false; @StorageLink('avplayerState') avplayerState: string = ''; @@ -55,25 +55,22 @@ export struct VideoDetail { // [Start on_window_size_change] private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => { // [StartExclude on_window_size_change] - if (this.pageInfo.getPageName() !== CommonConstants.PAGE_NAMES[1]) { + if (this.pageInfo.getPageName() !== 'videoDetail') { return; } // [EndExclude on_window_size_change] - if (((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint !== - BreakpointConstants.BREAKPOINT_SM) || this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && - !this.isHalfFolded) { + if (((this.currentWidthBreakpoint === 'md' && this.currentHeightBreakpoint !== 'sm') || + this.currentWidthBreakpoint === 'lg') && !this.isHalfFolded) { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); } // [StartExclude on_window_size_change] - else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint === - BreakpointConstants.BREAKPOINT_SM) { + else if (this.currentWidthBreakpoint === 'md' && this.currentHeightBreakpoint === 'sm') { if (this.isFullScreen) { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); } else { this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); } - } else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM && this.currentHeightBreakpoint === - BreakpointConstants.BREAKPOINT_LG) { + } else if (this.currentWidthBreakpoint === 'sm' && this.currentHeightBreakpoint === 'lg') { if (this.isFullScreen) { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); } else { @@ -87,8 +84,8 @@ export struct VideoDetail { if (this.isHalfFolded) { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); } else { - if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint === - BreakpointConstants.BREAKPOINT_MD) { + if (this.currentWidthBreakpoint === 'md' && this.currentHeightBreakpoint === + 'md') { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); } } @@ -97,14 +94,12 @@ export struct VideoDetail { // [Start on_full_screen_change] private onFullScreenChange(): void { // Large folding screen (X series) in unfolded state and tablet state, supporting rotation && large folding screen (X series) in hover state requires landscape display and does not support rotation. - if (((this.currentWidthBreakpoint === 'md' && this.currentHeightBreakpoint !== - 'sm') || this.currentWidthBreakpoint === 'lg') && - !this.isHalfFolded) { + if (((this.currentWidthBreakpoint === 'md' && this.currentHeightBreakpoint !== 'sm') || + this.currentWidthBreakpoint === 'lg') && !this.isHalfFolded) { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); } // Phone and large folding screen (X series) in portrait mode. - else if (this.currentWidthBreakpoint === 'sm' && this.currentHeightBreakpoint === - 'lg') { + else if (this.currentWidthBreakpoint === 'sm' && this.currentHeightBreakpoint === 'lg') { // In full-screen mode, the layout is displayed in landscape mode. Otherwise, the layout is displayed in portrait mode. if (this.isFullScreen) { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); @@ -113,8 +108,7 @@ export struct VideoDetail { } } // When the mobile phone and large folding screen (X series) are folded in landscape mode and the playback is not in full screen mode, the vertical display layout is displayed. - else if (this.currentWidthBreakpoint === 'md' && this.currentHeightBreakpoint === - 'sm' && !this.isFullScreen) { + else if (this.currentWidthBreakpoint === 'md' && this.currentHeightBreakpoint === 'sm' && !this.isFullScreen) { this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); } // The navigation bar is not hidden on a 2in1 device. @@ -136,7 +130,7 @@ export struct VideoDetail { // [EndExclude on_window_size_change] this.mainWindow = this.windowUtil!.getMainWindow(); this.mainWindow?.on('windowSizeChange', this.onWindowSizeChange); - if (this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM) { + if (this.currentWidthBreakpoint !== 'sm') { this.windowUtil!.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); } } @@ -147,7 +141,7 @@ export struct VideoDetail { this.avPlayerUtil?.offTimeUpdate(); await this.avPlayerUtil?.release(); - if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + if (this.currentWidthBreakpoint === 'lg') { this.windowUtil!.setMainWindowOrientation(window.Orientation.LANDSCAPE); } else { this.windowUtil!.setMainWindowOrientation(window.Orientation.PORTRAIT); @@ -176,36 +170,28 @@ export struct VideoDetail { // Sidebar area. Scroll() { AllComments({ commentImgHeight: $commentImgHeight, commentImgWidth: $commentImgWidth }) - .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : - Visibility.None) + .visibility(this.currentWidthBreakpoint === 'lg' ? Visibility.Visible : Visibility.None) } .align(Alignment.Top) .scrollBar(BarState.Off) .layoutWeight(1) - .width(CommonConstants.FULL_PERCENT) - .padding({ bottom: $r('app.float.side_scroll_padding') }) + .width('100%') + .padding({ bottom: '12vp' }) SelfComment() - .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : - Visibility.None) + .visibility(this.currentWidthBreakpoint === 'lg' ? Visibility.Visible : Visibility.None) } .justifyContent(FlexAlign.Start) - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) + .height('100%') + .width('100%') .backgroundColor(Color.White) .onAreaChange((newValue: Area) => { if (newValue.width !== 0) { // Handling when the width of the sidebar changes. - let height: number = DetailConstants.COMMENT_IMAGE_MIN_HEIGHT_NUMBER + (Number(newValue.width) - - DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) / - (this.getUIContext().px2vp(this.windowWidth) * DetailConstants.COMMENTS_AREA_PERCENT - - DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) * (DetailConstants.COMMENT_IMAGE_MAX_HEIGHT_NUMBER - - DetailConstants.COMMENT_IMAGE_MIN_HEIGHT_NUMBER); - let width: number = DetailConstants.COMMENT_IMAGE_MIN_WIDTH_NUMBER + (Number(newValue.width) - - DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) / - (this.getUIContext().px2vp(this.windowWidth) * DetailConstants.COMMENTS_AREA_PERCENT - - DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) * (DetailConstants.COMMENT_IMAGE_MAX_WIDTH_NUMBER - - DetailConstants.COMMENT_IMAGE_MIN_WIDTH_NUMBER); + let height: number = 150 + (Number(newValue.width) - 320) / + (this.getUIContext().px2vp(this.windowWidth) * 0.4 - 320) * (182 - 150); + let width: number = 219 + (Number(newValue.width) - 320) / + (this.getUIContext().px2vp(this.windowWidth) * 0.4 - 320) * (266 - 219); this.commentImgHeight = JSON.stringify(height); this.commentImgWidth = JSON.stringify(width); } @@ -219,32 +205,31 @@ export struct VideoDetail { videoHeight: this.videoHeight }) .layoutWeight(1) + SelfComment() - .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG || this.isFullScreen ? - Visibility.None : Visibility.Visible) + .visibility(this.currentWidthBreakpoint === 'lg' || this.isFullScreen ? Visibility.None : Visibility.Visible) } - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) + .height('100%') + .width('100%') } - .showSideBar(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && !this.isFullScreen ? true : - false) + .showSideBar(this.currentWidthBreakpoint === 'lg' && !this.isFullScreen ? true : false) .showControlButton(false) .autoHide(false) .sideBarPosition(SideBarPosition.End) .sideBarWidth($r('app.float.side_bar_min_width')) .minSideBarWidth($r('app.float.side_bar_min_width')) - .maxSideBarWidth(this.getUIContext().px2vp(this.windowWidth * DetailConstants.COMMENTS_AREA_PERCENT)) + .maxSideBarWidth(this.getUIContext().px2vp(this.windowWidth * 0.4)) // [End side_bar_container] } - .height(CommonConstants.FULL_PERCENT) + .height('100%') } - .width(CommonConstants.FULL_PERCENT) - .height(CommonConstants.FULL_PERCENT) + .width('100%') + .height('100%') .onBreakpointChange((breakPoints) => { - if (breakPoints !== BreakpointConstants.BREAKPOINT_LG && + if (breakPoints !== 'lg' && this.videoHeight < DetailConstants.INITIAL_VIDEO_HEIGHT) { this.relatedVideoHeight = 0; - } else if (breakPoints === BreakpointConstants.BREAKPOINT_LG) { + } else if (breakPoints === 'lg') { this.relatedVideoHeight = DetailConstants.INITIAL_RELATED_VIDEO_HEIGHT; } else { Logger.info(`No specific function`); @@ -257,7 +242,7 @@ export struct VideoDetail { this.avPlayerUtil!.playerStateControl(); } if (canIUse('SystemCapability.Window.SessionManager')) { - if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { + if (this.currentWidthBreakpoint === 'md' && display.isFoldable()) { this.isHalfFolded = false; } } diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets index b208a06c808db4ca4367e6a9cb3fcdb0260a4629..6a4215db7972e346172c7808bf36509baa3d310f 100644 --- a/products/phone/src/main/ets/entryability/EntryAbility.ets +++ b/products/phone/src/main/ets/entryability/EntryAbility.ets @@ -68,7 +68,6 @@ export default class EntryAbility extends UIAbility { // [StartExclude EntryAbility] // [StartExclude multi_entryAbility] windowStage.loadContent('pages/Index', (err, data) => { - AppStorage.setOrCreate('uiContext', windowStage.getMainWindowSync().getUIContext()); if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; diff --git a/products/phone/src/main/ets/entryability/EntryAbilityNew.ets b/products/phone/src/main/ets/entryability/EntryAbilityNew.ets index 032d56f45e32c80cff63cbd353fcbfc68638564e..cf67bd164477adf7757f6e9953c6662a20599901 100644 --- a/products/phone/src/main/ets/entryability/EntryAbilityNew.ets +++ b/products/phone/src/main/ets/entryability/EntryAbilityNew.ets @@ -32,11 +32,11 @@ export default class EntryAbility extends UIAbility { let heightBp: HeightBreakpoint = this.uiContext!.getWindowHeightBreakpoint(); AppStorage.setOrCreate('currentHeightBreakpoint', heightBp); }; + onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); - windowStage.loadContent('pages/Index', (err) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');