黑马健康应用的初步实现

今天我写这篇文章是为了庆祝鸿蒙应用开发的初期阶段的完成，其主要内容包括：1、欢迎页面UI的实现，2、欢迎页面业务初步完成，3、首页Tabs的实现。

就这三个内容，主要是通过一些基本HarmonyOS组件来实现如：image、button、text等和一些容器组件如column、row、Tabs等来实现操作的，还有controller来实现欢迎页面弹窗的构建。

下面是index主页代码实现：

import { CommonConstants } from '../common/constants/CommonConstants'
import Recordindex from '../view/record/Recordindex'
@Entry
@Component
struct Index {
  @State currentIndex: number = 0

  @Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index:number){
    Column({space: CommonConstants.SPACE_8}){
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }

  selectColor(index: number){
    return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.light_gray')
  }

  build() {
    Tabs({barPosition: BarPosition.End}){  //Tabs组件可以实现页面内视图内容快速切换，其包含TabBar和TabContent两个内容。
      TabContent(){
        
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))

      TabContent(){
        Text('发现页面')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_discover'),$r('app.media.discover'),1))

      TabContent(){
        Text('我的主页')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))
    }
    .width('100%')
    .height('100%')
    .onChange(index => this.currentIndex = index)
  }
}

下面是欢迎页面的代码实现：

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 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({  //placeUrl使用时需要压栈，而欢迎页面只是开始时调用一次即可，所以使用replaceUrl
        url:'pages/Index'
      })
    },1000) //添加延迟时间
  }

  onConfirm(){
    //1.保存首选项
    PreferenceUtil.putPreferenceValue(PREF_KEY, true)
    //2.跳转到首页
    this.jumpToIndex()
  }
  exitApp(){
    //退出App      //停止当前的Ability
    this.context.terminateSelf()
  }

  build() {
      Column() {
        //1.中央Slogan
        Row(){
          Image($r('app.media.home_slogan')).width(260)
        }
        .layoutWeight(1)//布局权重
        //2.loge
        Image($r('app.media.home_logo')).width(150)
        //3.文字描述
        Row(){                            //透明度
          Text('黑马健康支持').opacityWhiteText(0.8,12)
          Text('IPv6')
            .opacityWhiteText(0.8,12)
            .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.8,10)
        Text('浙ICP备0000000号-36D')
          .opacityWhiteText(0.5,10)
          .margin({bottom: 35})
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.welcome_page_background'))
  }
}

下面是用户弹窗的相关代码：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Preview
@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)
  }
}

下面是运用华为手机模拟器来运行实现的截图：