diff --git a/commons/base/src/main/ets/utils/BreakpointType.ets b/commons/base/src/main/ets/utils/BreakpointType.ets index b68f78da60d28f14c18b90a26f13dff73ad294a8..72ea97ff2748896538d443fb821a7d861087c660 100644 --- a/commons/base/src/main/ets/utils/BreakpointType.ets +++ b/commons/base/src/main/ets/utils/BreakpointType.ets @@ -13,8 +13,13 @@ * limitations under the License. */ +/* +* 最佳实践: 一多断点开发实践 +*/ + import { BreakpointConstants } from '../constants/BreakpointConstants'; +// [Start breakpointtype] export class BreakpointType { sm: T; md: T; @@ -36,4 +41,5 @@ export class BreakpointType { return this.sm; } } -} \ No newline at end of file +} +// [End breakpointtype] \ No newline at end of file diff --git a/commons/base/src/main/ets/utils/WindowUtil.ets b/commons/base/src/main/ets/utils/WindowUtil.ets index a659c245802d05f46c70c9cddd32c75bea62ffdf..ae17fd954ba925b21abaabb1e38ae1bc8cad4f24 100644 --- a/commons/base/src/main/ets/utils/WindowUtil.ets +++ b/commons/base/src/main/ets/utils/WindowUtil.ets @@ -13,6 +13,10 @@ * limitations under the License. */ +/* +* 最佳实践: 一多断点开发实践 +*/ + import { BusinessError, deviceInfo } from '@kit.BasicServicesKit'; import { display, window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; @@ -136,6 +140,7 @@ export class WindowUtil { } } + // [Start update_widthbp] updateWidthBp(): void { let mainWindow: window.WindowProperties = this.mainWindowClass!.getWindowProperties(); let windowWidth: number = mainWindow.windowRect.width; @@ -161,7 +166,9 @@ export class WindowUtil { AppStorage.setOrCreate('currentWidthBreakpoint', widthBp); AppStorage.setOrCreate('videoGridColumn', videoGridColumn); } + // [End update_heightbp] + // [Start update_heightbp] updateHeightBp(): void { let mainWindow: window.WindowProperties = this.mainWindowClass!.getWindowProperties(); let windowHeight: number = mainWindow.windowRect.height; @@ -179,4 +186,5 @@ export class WindowUtil { } AppStorage.setOrCreate('currentHeightBreakpoint', heightBp); } + // [End update_heightbp] } \ No newline at end of file diff --git a/features/home/src/main/ets/view/BannerView.ets b/features/home/src/main/ets/view/BannerView.ets index 2fce5e9259888b7bc6dcb5b9bf3800d822375b05..093cbb33cd5f93522aa0cf40b8f2bf8c6541addf 100644 --- a/features/home/src/main/ets/view/BannerView.ets +++ b/features/home/src/main/ets/view/BannerView.ets @@ -13,6 +13,10 @@ * limitations under the License. */ +/* +* 最佳实践: 一多交互事件开发实践 +*/ + import { BreakpointConstants, CommonConstants } from '@ohos/commons'; import { BreakpointType } from '@ohos/commons'; import { HomeConstants } from '../constants/HomeConstants'; @@ -58,10 +62,13 @@ export struct BannerView { // Banner layout. Row() { // [Start bannerView] + // [Start swiper1] Swiper() { // [StartExclude bannerView] LazyForEach(this.bannerDataSource, (item: Banner, index: number) => { + // [StartExclude swiper1] Stack() { + // [EndExclude swiper1] Image(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? item.getBannerImg().getImgSrcSm() : item.getBannerImg().getImgSrc()) .objectFit(ImageFit.Fill) @@ -70,7 +77,7 @@ export struct BannerView { .width(CommonConstants.FULL_PERCENT) .focusable(true) .zIndex(1) - + // [StartExclude swiper1] Column() { Text(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? `${item.getDescription().getDescription()[0]}${item.getDescription().getDescription()[1]}` : @@ -130,9 +137,11 @@ export struct BannerView { left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : 0, right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : 0 }) + // [EndExclude swiper1] }, (item: Banner, index: number) => index + JSON.stringify(item)) // [EndExclude bannerView] } + // [End swiper1] .displayCount(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 1 : HomeConstants.TWO) // Interval between banner images .itemSpace(HomeConstants.SWIPER_ITEM_SPACE) @@ -160,8 +169,9 @@ export struct BannerView { .effectMode(EdgeEffect.None) // The sizes of the front and rear banners on the MD and LG devices are different. .index(2) + // [Start swiper1] .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[2])) - + // [End swiper1] // Switch the tab to switch the banner display effect. Row({ space: HomeConstants.BANNER_ROW_SPACE }) { BannerText({ @@ -308,11 +318,14 @@ struct BannerText { build() { Stack() { + // [Start fill] Image(((this.index === 0) || (this.index === 1)) ? this.banner.getBannerImg().getImgSrcSm() : this.banner.getBannerImg().getImgSrc()) .width(CommonConstants.FULL_PERCENT) .height(CommonConstants.FULL_PERCENT) .objectFit(ImageFit.Fill) + .hoverEffect(HoverEffect.Scale) + // [Start fill] .borderRadius($r('app.float.banner_img_border_radius')) Column() { diff --git a/features/home/src/main/ets/view/Home.ets b/features/home/src/main/ets/view/Home.ets index 9ae0fac3965ef2e1567436f8d80008a20cc5472c..a457b38f4adf6c56ecb0240da96f79e8b808351b 100644 --- a/features/home/src/main/ets/view/Home.ets +++ b/features/home/src/main/ets/view/Home.ets @@ -13,6 +13,10 @@ * limitations under the License. */ +/* +* 最佳实践: 平板开发实践 +*/ + import { deviceInfo } from '@kit.BasicServicesKit'; import { SearchView } from '@ohos/search'; import { BreakpointConstants, CommonConstants } from '@ohos/commons'; diff --git a/features/home/src/main/ets/view/HomeHeader.ets b/features/home/src/main/ets/view/HomeHeader.ets index 09e731a9f7767691ac7db2abbbb3617d63c26178..25874c8822b4e67889727608d37f5253df6d4be4 100644 --- a/features/home/src/main/ets/view/HomeHeader.ets +++ b/features/home/src/main/ets/view/HomeHeader.ets @@ -13,6 +13,10 @@ * limitations under the License. */ +/* +* 最佳实践: 平板开发实践 +*/ + import { deviceInfo } from '@kit.BasicServicesKit'; import { BreakpointConstants, CommonConstants } from '@ohos/commons'; import { BreakpointType } from '@ohos/commons'; diff --git a/features/home/src/main/ets/view/RecommendedVideo.ets b/features/home/src/main/ets/view/RecommendedVideo.ets index bca7aa4d93b3270b0fe1763348067319ead71d1a..228999b7a28e171f31ec741a0a0091c0b1eca22d 100644 --- a/features/home/src/main/ets/view/RecommendedVideo.ets +++ b/features/home/src/main/ets/view/RecommendedVideo.ets @@ -13,6 +13,10 @@ * limitations under the License. */ +/* +* 最佳实践: 一多交互事件开发实践 +*/ + import { componentUtils } from '@kit.ArkUI'; import { deviceInfo } from '@kit.BasicServicesKit'; import { BreakpointConstants, CommonConstants } from '@ohos/commons'; @@ -37,7 +41,9 @@ export struct RecommendedVideo { build() { // Video grid layout. // [Start RecommendedVideo] + // [Start grid1] Grid() { + // [StartExclude grid1] ForEach(this.videoImgList, (item: VideoImage, index: number) => { GridItem() { Column() { @@ -134,7 +140,9 @@ export struct RecommendedVideo { .alignItems(HorizontalAlign.Start) } }, (item: VideoImage, index: number) => index + JSON.stringify(item)) + // [EndExclude grid1] } + // [End grid1] // [StartExclude RecommendedVideo] .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[4])) .editMode(false) @@ -160,6 +168,7 @@ export struct RecommendedVideo { bottom: $r('app.float.recommended_video_padding_bottom') }) // Zooming and pinching functions of the grid. + // [Start grid1] .gesture(PinchGesture({ fingers: 2 }).onActionUpdate((event: GestureEvent) => { if (event.scale > 1 && this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM) { if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { @@ -193,6 +202,7 @@ export struct RecommendedVideo { Logger.info(`Two-finger operation is not supported`); } })) + // [End grid1] } getGridHeight(videoGridColumn: string, currentWidthBreakpoint: string, windowWidth: number): string { diff --git a/features/search/src/main/ets/view/SearchForHua.ets b/features/search/src/main/ets/view/SearchForHua.ets index 42c20b9a230c29d09dda49f6f4b73d3578469d79..7d65b7a56e91b4da2ec04fa6b699ede0f189cbcf 100644 --- a/features/search/src/main/ets/view/SearchForHua.ets +++ b/features/search/src/main/ets/view/SearchForHua.ets @@ -13,6 +13,10 @@ * limitations under the License. */ +/* +* 最佳实践: 平板开发实践 +*/ + import { BreakpointConstants, CommonConstants } from '@ohos/commons'; import { Logger } from '@ohos/commons'; import { SearchConstants } from '../constants/SearchConstants'; diff --git a/features/videoDetail/src/main/ets/view/VideoDetail.ets b/features/videoDetail/src/main/ets/view/VideoDetail.ets index a5db64fed2ee1d9a71b3adeedc05cc6ea7403ac8..652c7ad0222126bcd4cd348c889f12bf5fb627ad 100644 --- a/features/videoDetail/src/main/ets/view/VideoDetail.ets +++ b/features/videoDetail/src/main/ets/view/VideoDetail.ets @@ -13,6 +13,10 @@ * limitations under the License. */ +/* +* 最佳实践: 一多交互事件开发实践,一多断点开发实践 +*/ + import { KeyCode } from '@kit.InputKit'; import { deviceInfo } from '@kit.BasicServicesKit'; import { display, window } from '@kit.ArkUI'; @@ -84,6 +88,7 @@ export struct VideoDetail { } } + // [Start on_full_screen_change] private onFullScreenChange(): void { if (((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint !== BreakpointConstants.BREAKPOINT_SM) || this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && @@ -108,6 +113,7 @@ export struct VideoDetail { } } } + // [End on_full_screen_change] aboutToAppear() { DisplayUtil.getFoldCreaseRegion(); @@ -251,22 +257,29 @@ export struct VideoDetail { } } }) + // [Start key_event] .onKeyEvent((event?: KeyEvent) => { + //If the key type is pressed, the subsequent code will not be executed, and the specific key logic will be executed when released. if (!event || event.type !== KeyType.Down) { return; } + // Space key controls pause/play. if (event.keyCode === KeyCode.KEYCODE_SPACE) { this.avPlayerUtil!.playerStateControl(); } + //press ESC to exit full screen. if (event.keyCode === KeyCode.KEYCODE_ESCAPE) { this.windowUtil!.recover(); } + //Right-click fast forward if (event.keyCode === KeyCode.KEYCODE_DPAD_RIGHT) { this.avPlayerUtil!.fastForward(); } + //Left click to go back quickly if (event.keyCode === KeyCode.KEYCODE_DPAD_LEFT) { this.avPlayerUtil!.rewind(); } }) + // [End key_event] } } \ No newline at end of file diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets index 3cfea5175347ddc0fc175a732025bad35d188e8c..72bfc4ab41cfc4ce3f2eb66ad94caaed13f84d32 100644 --- a/products/phone/src/main/ets/entryability/EntryAbility.ets +++ b/products/phone/src/main/ets/entryability/EntryAbility.ets @@ -13,6 +13,10 @@ * limitations under the License. */ +/* +* 最佳实践: 平板开发实践,一多断点开发实践 +*/ + import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; @@ -25,7 +29,9 @@ export default class EntryAbility extends UIAbility { private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => { this.windowUtil!.updateHeightBp(); this.windowUtil!.updateWidthBp(); + // [StartExclude setorcreate] AppStorage.setOrCreate('windowWidth', windowSize.width); + // [EndExclude setorcreate] }; // [StartExclude EntryAbility] onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {