鸿蒙个人项目-欢迎页面UI及业务实现

首先需要完成欢迎页面,通过添加图片与文字完成黑马健康的进入页面.以下是流程图：

将字体大小、透明度、字体颜色进行抽取 ，定义opacityWhiteText ，在使用统一样式时方便使用：

@Extend(Text) function 
opacityWhiteText(opacity:number,fontsize:number=10){
  .fontSize(fontsize)
  .opacity(opacity)
  .fontColor(Color.White)
}

 

通过Column 布局，放入需要的图片以及插入Text() 完成后的WelcomePage 用来展示页面效果：

struct WelcomePage {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column({space:10}) {
        //1.中央slogan
        Row() {
          Image($r('app.media.home_slogan')).width(260)
        }
        .layoutWeight(1)//布局权重
        //2.logo
        Image($r('app.media.home_logo')).width(150)
        //3.文字描述
        Row() {
          Text('黑马健康支持').opacityWhiteText(0.8,12)
          Text('TPv6')
            .opacityWhiteText(0.8)
            .fontColor(Color.White)
            .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 }) //边框样式
            .padding({ left: 5, right: 5 }) //内边距
          Text('网络').opacityWhiteText(0.8,12)
        }
        Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
          .opacityWhiteText(0.6)
        Text('浙ICP备0000000号-36D')
          .opacityWhiteText(0.4)
          .margin({bottom:35})
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.welcome_page_background'))
    }

  }
}

页面效果：

再此基础上，需要完成同意协议弹窗的实现。

在 UserPrivacyDialog 中使用了@CustomDialog 装饰器声明弹窗组件，通过controller 控制弹窗的出现，添加了Button 按钮，用来实现首页的跳转与退出。

export default struct UserPrivacyDialog {//对话框
  controller:CustomDialogController
   confirm:()=> void//声明，无参无返回值,由使用者定义
   cancel:()=> void

  build() {
    Column({space:CommonConstants.SPACE_10}){
      //1.标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      //2.内容
      Text($r('app.string.user_privacy_content'))
      //3.按钮
      Button($r('app.string.agree_label'))
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(()=>{
          this.confirm()
          this.controller.close()
        })
      Button($r('app.string.refuse_label'))
        .width(150)
        .backgroundColor($r('app.color.lightest_primary_color'))
        .fontColor($r('app.color.light_primary_color'))
        .onClick(()=>{
          this.cancel()
          this.controller.close()
        })

    }
    .width('100%')
    .padding(10)
  }
}


WelcomePage:

实现效果如下：

完善Welcome,在页面中声明弹窗控制器，并利用它控制弹窗，其中builder 用来定义跳转与退出，aboutToAppear 显示弹出页面，onconfirm 首先会保存用户选择，然后进入首页，exitApp 则会退出页面：

controller:CustomDialogController = new CustomDialogController({//声明控制器
  builder:UserPrivacyDialog({
    confirm:()=>this.onConfirm(),
    cancel:()=>this.exitApp()
  })
})

aboutToAppear(){
  this.controller.open()
}

onConfirm(){
  //1.保存首选项
  //2.跳转到首页
}
exitApp(){
  //退出APP
}

最终达到欢迎页面的效果：