黑马健康应用开发(二)

一、欢迎界面UI实现思路:

1.页面用于展示应用的欢迎信息,并询问用户是否同意隐私政策。
2.使用Column和Row等布局容器来组织页面内容,确保页面结构清晰。
3.添加必要的元素,如标语、Logo、文本描述和版权信息等。
4.设计一个机制来检查用户是否已经同意隐私政策。
   如果用户尚未同意,显示一个对话框或提示,让用户确认他们的选择。
   在用户确认后,更新存储中的值,以便在后续启动时跳过此步骤。
5.设计统一的样式规范,确保页面元素在视觉上一致且易于识别。
6.使用适当的字体、颜色和间距。

二、欢迎界面UI设计:

1.欢迎页面的创建

首先在page下创建WelcomePage.ets文件
整个布局为column布局,宽高设置为100%,将背景色设为背景色。

1.中央slogan,logo

使用准备好的图片slogan,设置好宽度,布局权重为1.
使用准备好的图片logo,设置好宽度

2.文字描述

文字描述分为左中右三部分,需要用row容器,用text构建,调整好字体与颜色透明度
为文字套上边框,设置为实线圆弧颜色。

import common from '@ohos.app.ability.common'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivaryDialog'

@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
@Preview
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()
  }

  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'))
  }
}

二、欢迎界面弹窗业务设计:

判断用户是否同意用户协议,使用用户首选项来保存,用户协议使用自定义弹窗

新建组件文件在view/weilcome/UserPrivacyDiialog

声明CusttomDialogController

使用Column构建,第一行标题使用引用准备好的字符串,加粗加黑,第二行内容使用引用准备好的字符串,第三行使用两个按钮,使用准备好的按钮,调整宽度和背景,同意需要高亮。

设置按钮点击后的处理逻辑 ,在对话框中声明两个对话框的变量,再点击事件中实现处理逻辑

在欢迎页面声明conntroller,builer导包使用组件,在使用中传参,定义两个专门处理的函数

设置加载首选项,判断是否同意,通过提供的工具类,不需要单独设置首选项,调用函数加载首选项

//UserPrivacyDialog.ets
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)
  }
}

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值