鸿蒙实战案例（个人期末项目）-----黑马健康（源自黑马程序员）#1

一，欢迎页面实现

实现黑马健康进入时的欢迎页面

1，欢迎页面的部分UI实现

实现黑马健康进入时的欢迎页面的部分UI布局

实现效果图：

UI结构：

此页面整体布局为从上到下的列式布局，依次为图片、图片、文本。

对应代码为：

@Extend(Text) function opacityWhiteText(opacity:number,fontSize:number = 10){
  .fontColor(Color.White)
  .fontSize(fontSize)
  .opacity(opacity)  //透明处理
}
const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
struct WelcomePage {
  build() {
    Column({space:12}) {
      //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('IPv6')
          .opacityWhiteText(0.8)
          .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:16})
          .padding({left:5,right:5})
        Text('网络').fontColor(Color.White).fontSize(12).opacity(0.8)
      }
      Text(`'减更多‘指黑马健康APP希望通过软件工具的形式，帮助更多用户实现身材管理`)
        .opacityWhiteText(0.6)
      Text('鲁ICP备000000号-36D')
        .opacityWhiteText(0.4)
        .margin({bottom:37})
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

2，欢迎页面的业务能力实现

实现黑马健康进入时的欢迎页面的部分业务能力

实现效果图：

业务实现：

即自定义弹窗功能，使用@CustomDialog装饰器声明弹窗组件，并利用其控制弹窗。

点击同意则继续进入应用，不同意则退出应用返回桌面。

对应代码为：

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export 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_gray'))
        .onClick(()=>{
          this.cancel()
          this.controller.close()
        })
    }
    .width('100%')
    .padding(10)
  }
}