鸿蒙篇 - 启动图、引导页

前言

上一篇 鸿蒙篇 - DevEco Studio下载安装我们已经安装了鸿蒙开发工具并且创建了第一个项目，我们都知道一个APP启动我们第一眼看到的就是各种启动图和各式各样的引导页，那么本篇我们就带领大家简单实现启动图和引导页效果，正式开始。

效果图

启动图实现

实现启动图有个很简单的方法就是替换项目自带的图片即可，如图所示：

引导页实现

创建引导页文件，SplashPage.ets，如图：

详细代码如下：

// 引导页数据模型
export class GuidePage {
  title: string
  imageSrc: Resource

  constructor(title: string, img: Resource) {
    this.title = title
    this.imageSrc = img
  }
}

@HMRouter({ pageUrl: RouterPath.SPLASH_PAGE })

@ComponentV2
export struct SplashPage {
  // 轮播数据
  private guidePages: GuidePage[] = [
    new GuidePage(
      '选择XX方式\n比选择XX更重要',
      $r('app.media.ax_page_work')
    ),
    new GuidePage(
      '让XX\n成为一种享受',
      $r('app.media.ax_page_data')
    ),
    new GuidePage(
      '开启XX\n数据XX新时代',
      $r('app.media.ax_page_des')
    )
  ]

  @Local currentIndex: number = 0
  @Local buttonShow: boolean = false
  @Builder
  IndicatorBuilder() {
    Row({space:10}) {
      ForEach(this.guidePages, (item:GuidePage, index: number) => {
        Column()
          .width(15)
          .height(4)
          .borderRadius(2)
          .backgroundColor(index === this.currentIndex ? '#0056FF' : '#E1E4E8')
      })
    }
    .visibility(this.currentIndex==2 ? Visibility.None :Visibility.Visible)
    .justifyContent(FlexAlign.Center)
    .margin({ bottom: 66 })
  }

  @Builder
  ActionButton() {
    Button('开启')
      .width(240)
      .height(48)
      .backgroundColor('#0056FF')
      .fontColor(Color.White)
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .borderRadius(8)
      .opacity(this.buttonShow ? 1 : 0)
      .margin({bottom: this.buttonShow ? 46 : -100})
      .onClick(() => {
        HMRouterMgr.replace({
          pageUrl: RouterPath.LOGIN_MAIN_PAGE
        })
      })
      .animation({
        duration: 500,
        curve: Curve.EaseOut
      })
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Swiper() {
        ForEach(this.guidePages, (item: GuidePage) => {
          Column() {
            Text(item.title)
              .fontSize(34)
              .fontWeight(FontWeight.Bold)
              .textAlign(TextAlign.Center)
              .fontColor('#242934')
              .width('100%')
              .margin({top: 50+SafeAreaEdge.TOP})
            Image(item.imageSrc)
              .width(230)
              .height(230)
              .margin({top: 163})
          }
          .width('100%')
          .height('100%')
        })
      }
      .indicator(false)
      .loop(false)
      .onChange((index: number) => {
        this.currentIndex = index
        console.log('当前下标',this.currentIndex)
        if (index === 2) {
          this.buttonShow = true
        } else {
          this.buttonShow = false
        }
      })
      if (this.currentIndex==2) {
        this.ActionButton()
      } else  {
        this.IndicatorBuilder()
      }
    }
    .width('100%')
    .height('100%')
  }
}

首页路由跳转：HMRouter使用说明

最后

下篇文章：鸿蒙篇 - 登录注册页面