黑马健康——欢迎页面UI实现

 一，前言

        综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。

二.应用界面UI

页面展示：

代码：

import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
@Extend(Text) function opacityWhiteText(opacity:number,fontSize:number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
struct Welcome {
  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'
      })
    }, 10)
  }

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

  exitApp(){
    this.context.terminateSelf()
  }

  build() {
    Column({space:10}) {
      //中央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)
          .fontColor(Color.White)
          .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 }) //radius是边框的弧度
          .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'))
  }
}

三.总结
这段代码是一个使用了某种框架（可能是Flutter或类似UI构建框架）编写的组件，用于构建一个欢迎页面（WelcomePage）。下面是对代码的逐步解析：

        自定义扩展函数 opacityWhiteText:

这个函数通过装饰器 @Extend(Text) 声明，意味着它是为了扩展 Text 组件的功能。它接收两个参数：opacity 设置文本的不透明度，fontSize 设置文本的字号，默认值为10。函数内部链式调用 .fontSize, .opacity, 和 .fontColor(Color.White) 来设置文本的样式，使其变为白色且具有指定的透明度和字号。

        WelcomePage 组件定义:

使用 @Component 装饰器标记，表示这是一个可复用的UI组件。

@State message: string = 'Hello World' 定义了一个状态变量 message，初始值为 'Hello World'，在实际代码中似乎未被使用，可能是预留或示例性质的。

        build 方法:

构建欢迎页面的布局。主要使用了 Column, Row, Image, 和 Text 等组件来组织界面。

        中央slogan:

仅包含一个图片组件，展示slogan图像，宽度设为260，并通过 .layoutWeight(1) 控制行内布局权重。

        Logo:

单独的图片组件展示应用logo，宽度设为150。

        文字描述:

一个 Row 包含三个 Text 组件，分别显示“黑马健康支持”、“IPv6”（带边框和内边距以突出显示），和“网络”。所有文本都应用了 opacityWhiteText 函数设置样式。

        额外说明性文本:

两段说明性文字，分别解释了“减更多”的含义和展示了备案号，透明度分别设为0.6和0.4，最后一段有底部外边距。

        页面整体样式:

页面宽高均为100%，背景颜色由 $r('app.color.welcome_page_background') 提供，这应该是从资源或主题中引用的背景色值。

        总结，这段代码展示了如何使用组件化的方式构建一个包含图片、文本的欢迎页面，利用自定义扩展方法增强基础组件功能，并通过链式调用来简化样式设置，体现了现代UI开发框架的灵活性和高效性。