鸿蒙实战案例——黑马健康app——DAY01

最新推荐文章于 2024-06-26 08:05:28 发布

爱敲代码的小阳

最新推荐文章于 2024-06-26 08:05:28 发布

阅读量1.4k

点赞数 21

文章标签：鸿蒙

本文链接：https://blog.csdn.net/m0_73644122/article/details/139970885

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

此篇任务：主要就是完成黑马健康app欢迎页面的整体布局UI实现以及业务的处理

一、欢迎页面布局细节实现

细节如图所示，可见页面整体是一个列容器排布的，中间有一个图片，下面有一个黑马健康的logo，再往下是三行字体。

具体的代码实现如下：

build() {
    Column({space:10}) {
     Row(){
       Image($r('app.media.home_slogan')).width(260)
     }.layoutWeight(1)
      Image($r('app.media.home_logo')).width(150)
      Row(){
        Text('黑马健康支持').textSx(0.8,12)

        Text('IPv6')
          .textSx(0.8)
          .border({style: BorderStyle.Solid,width:1,radius:15,color:Color.White})
          .padding({left:5,right:5})
        Text('网络').textSx(0.8,12)

      }
      Text('‘减更多’指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理').textSx(0.6)
      Text('浙ICP备0000000号-36D').textSx(0.4)
        .margin({bottom:35})
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

首先整体的排布是用column函数排布的，然后里面用的是个row包的第一个图片，然后用的layoutWeight(1)属性将图片放到理想的位置，并且用width属性将宽度调到适中。

Image($r('app.media.home_logo')).width(150)用放了一个黑马健康logo，采用width属性将图片宽度调到适中

然后又将一行文本分成三份，给其中的第二份加了一个边框

Text('IPv6')
.textSx(0.8)
.border({style: BorderStyle.Solid,width:1,radius:15,color:Color.White})
.padding({left:5,right:5})

给列容器设置的属性宽高拉到100%，又设置的背景颜色

.width('100%')
.height('100%')
.backgroundColor($r('app.color.welcome_page_background'))

二、欢迎页面弹窗设置

1.弹窗的布局细节实现

代码如下（示例）：

build() {
    Column({space:CommonConstants.SPACE_10}){
      //标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      //内容
      Text($r('app.string.user_privacy_content'))

       //按钮
      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)
  }
}

分为三部分，第一部分为标题，第二部分为内容，第三部分为两个按钮并且设置的onclick事件

2.业务的处理

 export default  struct UserPrivacyDialog {
   controller:CustomDialogController
    confirm:()=>void
     cancel:()=>void
}

 context= getContext(this) as common.UIAbilityContext //上下文
  controller:CustomDialogController=new CustomDialogController({
    builder:UserPrivacyDialog({
      confirm:()=>this.onConfirm(),
      cancel:()=>this.exitApp()
    })
  })
   async aboutToAppear(){
    //加载首选项
    let isAgree = await PreferenceUtil.getPreferenceValue( PREF_KEY,false)
    //判断是否同意
     if (isAgree) {
      //同意，跳转首页
       this.jumpToIndex()
     }
    else {
      //不同意，弹窗
      this.controller.open()
    }
  }
  jumpToIndex(){
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/Index'
      })
    },1000)
  }
   onConfirm(){
     //保存首选项
PreferenceUtil.putPreferenceValue(PREF_KEY,true)
     //跳转到首页
     this.jumpToIndex()
   }

exitApp(){
  //退出app
  this.context.terminateSelf()
}

首先在设置弹窗的组件文件中设置了一个controller:CustomDialogController控制器，并且设置了两个空函数： confirm:()=>void ；cancel:()=>void。并将其导出。

然后在欢迎页面引入了弹窗的控制器controller:CustomDialogController=new CustomDialogController({
builder:UserPrivacyDialog({
confirm:()=>this.onConfirm(),
cancel:()=>this.exitApp()
})
})

并将写好的两个函数：onConfirm和exitApp传给了confirm和cancel

并且在钩子函数中加载了首选项，如何首选项为同意则以后不会出现弹窗直接进入首页，否则就出现弹窗。