华为鸿蒙应用–欢迎页SplashPage+倒计时跳过（自适应手机和平板）-ArkTs

鸿蒙ArkTS 开发欢迎页SplashPage+倒计时跳过，可自适应平板和手机：

一、SplashPage.ts

import { BreakpointSystem, BreakPointType, Logger, PageConstants, StyleConstants } from '@ohos/common';import router from '@ohos.router';@Entry@Componentstruct SplashPage {@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';private breakpointSystem = new BreakpointSystem();private intervalId: number = 0;@StatecountdownTime: number = PageConstants.DELAY_TIME;private splash: Resource[] = [$r('app.media.img_splash1'), $r('app.media.img_splash2'), $r('app.media.img_splash3')];// 获取min到max的随机正整数getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1) + min)}build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {Button(this.countdownTime + "秒 跳过", { type: ButtonType.Capsule, stateEffect: true }).alignSelf(ItemAlign.End).margin({ top: $r('app.float.vp_thirty_two'), right: $r('app.float.vp_sixteen') }).onClick(() => {this.routerMain();})Column() {Image(this.splash[this.getRandom(0, 2)])// 每次进入随机展示一张欢迎图片.width(new BreakPointType({sm: $r('app.float.splash_image_size'),md: $r('app.float.splash_image_size'),lg: $r('app.float.splash_image_size_lg')// 手机和平板使用不同的图片宽度}).getValue(this.currentBreakpoint)).aspectRatio(PageConstants.IMAGE_ASPECT_RATIO).objectFit(ImageFit.Contain)}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Center).flexGrow(StyleConstants.FLEX_GROW).margin({ top: new BreakPointType({sm: $r('app.float.vp_hundred'),md: $r('app.float.vp_hundred'),lg: $r('app.float.vp_fifty') // 手机和平板不同的margin}).getValue(this.currentBreakpoint) })Text($r('app.string.splash_desc')).fontColor($r('app.color.color_797979')).fontSize($r('app.float.small_font_size')).margin({ top: $r('app.float.vp_one'), bottom: $r('app.float.vp_one') })Text($r('app.string.splash_filings')).fontColor($r('app.color.color_797979')).fontSize($r('app.float.small_font_size')).margin({ top: $r('app.float.vp_one'), bottom: $r('app.float.empty_image_size') })}.height(StyleConstants.FULL_HEIGHT).width(StyleConstants.FULL_WIDTH).backgroundColor($r('app.color.page_background'))}// 倒计时countdown = () => {this.countdownTime -= 1;if (this.countdownTime == 0) {clearInterval(this.intervalId)this.routerMain();}}// 跳转首页routerMain = () => {router.replaceUrl({ url: PageConstants.MAIN_PAGE_URL }).catch((err: Error) => {Logger.error(JSON.stringify(err));})}aboutToAppear() {this.breakpointSystem.register();this.intervalId = setInterval(this.countdown, 1000);}aboutToDisappear() {this.breakpointSystem.unregister();clearInterval(this.intervalId);}}

工具：BreakpointSystem, BreakPointType, Logger, PageConstants, StyleConstants等工具见：华为鸿蒙应用–底部导航栏Tabs（自适应手机和平板）-CSDN博客