黑马健康过程记录1

一、欢迎页面UI的实现

欢迎页面时首页之前的一个页面，在pages下建立WelcomePage页面完成欢迎页面的编写。

欢迎页面如下：

经过对欢迎页面的分析可知欢迎页面是一个从上到下的Column布局，从上到下分别由两个Image三个Text组成，背景色由绿色铺满整个屏幕。

代码如下：

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


build() {
    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('IPv6')
          .opacityWhiteText(0.8)
          .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'))
  }

二、欢迎业务逻辑的开发

判断用户是否同意隐私服务协议，同意与否的状态需要持久化保存起来，下次打开应用时作判断，如果同意直接进入首页，如果没同意，再次询问用户是否同意，同意进入首页并保存首选项，不同意退出APP。

实现效果如下图所示：

新建view目录放置应用组件，一个应用有很多页面，进行细分，在view下建立一个welcome目录，在welcome目录下建立UserPrivacyDialog定义弹窗。

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

在欢迎页面使用对话框：

const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
struct WelcomePage {
  context = getContext(this) as common.UIAbilityContext//上下文
  controller: CustomDialogController = new CustomDialogController({//自定义弹窗控制器
    builder: UserPrivacyDialog({//使用自定义弹闯
      confirm: () => this.onConfirm(),
      cancel: () => this.exitApp()
    })
  })

  async aboutToAppear(){//页面一加载就弹出
    // 1.加载首选项
    let isAgree = await PreferenceUtil.getPreferenceValue(PREF_KEY, false)//异部读取过程
    // 2.判断是否同意
    if(isAgree){
      // 2.1.同意，跳转首页
      this.jumpToIndex()
    }else{
      // 2.2.不同意，弹窗
      this.controller.open()
    }
  }

  jumpToIndex(){
    setTimeout(() => {//延迟时间
      router.replaceUrl({//不需要压栈
        url: 'pages/Index'
      })
    }, 1000)
  }

  onConfirm(){//同意
    // 1.保存首选项
    PreferenceUtil.putPreferenceValue(PREF_KEY, true)
    // 2.跳转到首页
    this.jumpToIndex()
  }

  exitApp(){//不同意
    // 退出APP
    this.context.terminateSelf()
  }

总结

1.欢迎页面UI的实现

这段代码构建了一个具有图片、文本和装饰性边框的欢迎页面。页面使用了透明度和白色字体来增强视觉效果，同时保持了内容的可读性。布局考虑了视觉层次和美观性，通过合理的间距和边距确保了元素之间的协调性。整体上，这是一个典型的应用启动页或欢迎页的设计，旨在向用户展示应用的品牌形象和基本信息。

`opacityWhiteText`函数用于设置文本的透明度、字体大小和颜色。默认字体大小为10，颜色为白色。`Column`用于垂直布局，`Row`用于水平布局。 `space`: 在`Column`中，指定子元素之间的间距。`layoutWeight`: 用于指定元素在布局中的权重，影响其在可用空间中的占比。`Image`: 用于显示图片，可以指定图片的资源路径和宽度。 `Text`: 用于显示文本，可以设置字体大小、透明度等。

2.欢迎业务逻辑的开发

这段代码实现了一个隐私协议同意的弹窗功能，如果用户同意，则跳转到首页；如果用户不同意，则关闭应用程序。代码中使用了异步操作来读取用户的选择，并通过本地存储来保存用户的决定。

`CustomDialogController`是一个自定义控制器，用于控制弹窗的打开和关闭`UserPrivacyDialog`的`build`方法定义了弹窗的UI布局，包括标题、内容和两个按钮。

按钮样式和事件：为同意和拒绝按钮设置样式，并绑定点击事件，分别调用`confirm`和`cancel`方法。