纯血鸿蒙APP开发实战—启动页面

最新推荐文章于 2024-07-20 22:05:50 发布

码牛程序猿

最新推荐文章于 2024-07-20 22:05:50 发布

阅读量628

点赞数 4

分类专栏： HarmonyOS 鸿蒙鸿蒙工程师文章标签： harmonyos 华为鸿蒙开发 HarmonyOS 鸿蒙鸿蒙系统鸿蒙应用开发

本文链接：https://blog.csdn.net/2401_82546228/article/details/139354846

版权

鸿蒙同时被 3 个专栏收录

567 篇文章 2 订阅

订阅专栏

鸿蒙工程师

567 篇文章 5 订阅

订阅专栏

HarmonyOS

555 篇文章 0 订阅

订阅专栏

启动页面整体效果如下：

1，布局代码，头部一个logo 使用Image ，底部一个名称图片使用Image，最后一个描述是一个文本Text 组成

代码如下：


Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}){
Column() {
Image($r('app.media.ic_eshop'))
.width(100)
.aspectRatio(1)
.objectFit(ImageFit.Contain)
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.flexGrow(1)
Image($r('app.media.ic_title'))
.width($r('app.float.text_image_width'))
.height($r('app.float.text_image_height'))
.objectFit(ImageFit.Contain)
Text($r('app.string.splash_desc'))
.fontColor('#66000000')
.fontSize($r('app.float.bigger_font_size'))
.letterSpacing(16)
.margin({ top: $r('app.float.vp_twelve'), bottom: $r('app.float.splash_text_margin_bottom') })
}
.height('100%')
.width('100%')
.backgroundColor('#f1f3f5')

2，启动页进入下一页是自动进入，需要在aboutToAppear添加一个定时器，通过定时器定点时间做跳转，通过设置路由进入下一页 router.replaceUrl({ url: 'pages/MainPage' })


aboutToAppear() {
  this.timeOutId = setTimeout(() => {
  router.replaceUrl({ url: 'pages/MainPage' })
  .catch((err: Error) => {
    console.error(JSON.stringify(err));
  })
  }, 2000);
}

3，销毁定时器，在aboutToDisappear中销毁定时器


aboutToDisappear() {
  clearTimeout(this.timeOutId);
}

4，完整代码如下


import router from '@ohos.router';
@Entry
@Component
struct Index {
private timeOutId: number = 0;
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center}){
Column() {
Image($r('app.media.ic_eshop'))
.width(100)
.aspectRatio(1)
.objectFit(ImageFit.Contain)
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.flexGrow(1)
Image($r('app.media.ic_title'))
.width($r('app.float.text_image_width'))
.height($r('app.float.text_image_height'))
.objectFit(ImageFit.Contain)
Text($r('app.string.splash_desc'))
.fontColor('#66000000')
.fontSize($r('app.float.bigger_font_size'))
.letterSpacing(16)
.margin({ top: $r('app.float.vp_twelve'), bottom: $r('app.float.splash_text_margin_bottom') })
}
.height('100%')
.width('100%')
.backgroundColor('#f1f3f5')
}
aboutToAppear() {
this.timeOutId = setTimeout(() => {
router.replaceUrl({ url: 'pages/MainPage' })
.catch((err: Error) => {
console.error(JSON.stringify(err));
})
}, 2000);
}
aboutToDisappear() {
clearTimeout(this.timeOutId);
}
}