黑马健康APP期末项目1

黑马健康应用程序是一个综合性的健康监控和管理工具，它具备一系列定制化功能，旨在帮助用户轻松地跟踪和管理自己的健康状况。通过个性化的饮食追踪记录和全面的健康评估机制，该应用能够根据用户的具体情况提供针对性的建议和指导。无论是对于追求体型改善和体重管理的用户，还是那些希望优化日常饮食以满足营养需求的用户，黑马健康都能提供一套量身打造的解决方案。它通过简化健康管理流程，使用户能够以一种更加直观和易于操作的方式，实现健康目标的达成。此外，黑马健康应用程序还强调了用户日常生活习惯的改善，通过持续的健康教育和行为指导，鼓励用户形成更加健康的生活方式。通过这种方式，该应用程序不仅帮助用户在短期内实现健康目标，更致力于长期促进用户的身体健康和生活质量的提升。

二、应用运行

1.首页欢迎页面实现

这段代码主要代码定义了一个构建UI界面的方法，用于展示应用的logo、支持的网络协议、应用介绍和备案号等信息。

（1）页面整体架构分析

（2）运行效果

（3）详细代码

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

// 扩展Text组件，添加自定义的文本样式方法
@Extend(Text) 
function opacityWhiteText(opacity:number, fontSize:number = 10){
  .fontSize(fontSize) // 设置字体大小
    .opacity(opacity) // 设置透明度
    .fontColor(Color.White) // 设置字体颜色为白色
}

// 定义偏好设置的键名
const PREF_KEY = 'userPrivacyKey'

// 定义WelcomePage组件，作为应用的入口点
@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) // 延迟1秒后跳转
  }

  // 定义用户点击确认按钮后执行的方法
  onConfirm() {
    // 1. 保存用户同意隐私协议的偏好设置值
    preferenceUtil.putPreferenceValue(PREF_KEY, true)
    // 2. 跳转到首页
    this.jumpToIndex()
  }

  // 定义用户点击取消按钮后执行的方法
  exitApp() {
    // 退出应用
    this.context.terminateSelf()
  }

  // 定义组件的UI布局构建方法
  build() {
    Column() {
      // 居中显示的行
      Row() {
        Image($r('app.media.home_slogan')).width(260)
      }
      .layoutWeight(1) // 设置布局权重
      // 显示应用logo
      Image($r('app.media.home_logo')).width(150)
      // 显示应用支持的文本信息
      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.6)
      // 显示应用的备案号
      Text(`备案号10086`)
        .opacityWhiteText(0.4)
        .margin({bottom: 35})
    }
    .width('100%') // 设置组件宽度为100%
    .height('100%') // 设置组件高度为100%
    .backgroundColor($r('app.color.welcome_page_background')) // 设置背景颜色
  }
}

2.页面弹窗设计

这段代码主要负责用户隐私协议的确认。它首先检查用户是否已同意隐私政策，如果没有，则显示一个对话框让用户选择是否同意。如果用户同意，应用将保存用户的偏好设置并跳转到首页；如果用户不同意，则应用将退出。

（1）弹窗逻辑设计

（2）运行效果

（3）弹窗实现详细代码

// 创建自定义对话框控制器
controller: CustomDialogController = new CustomDialogController({
  builder: UserPrivacyDialog({
    // 确认按钮的回调函数
    confirm: () => this.onConfirm(),
    // 取消按钮的回调函数
    cancel: () => this.exitApp()
  })
})

// 页面即将显示时调用的方法
async aboutToAppear() {
  // ... 省略其他代码 ...
  // 2.2不同意，弹窗
  this.controller.open()
}

// 定义用户点击确认按钮后执行的方法
onConfirm() {
  // 1.保存首选项
  preferenceUtil.putPreferenceValue(PREF_KEY, true)
  // 2.跳转到首页
  this.jumpToIndex()
}

// 定义用户点击取消按钮后执行的方法
exitApp() {
  //退出App
  this.context.terminateSelf()
}

3.首页Tabs设计

（1）页面整体UI设计

（2）运行效果

（3）详细代码及分析

import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/RecordIndex'

// 定义Index组件作为应用的入口点
@Entry
@Component
struct Index {
  // 定义状态变量currentIndex，默认值为0，用于记录当前选中的Tab索引
  @State currentIndex: number = 0

  // 定义自定义TabBar的样式构建器
  @Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) {
    // 使用Column组件创建垂直布局
    Column({ space: CommonConstants.SPACE_8 }) {
      // 显示图标，使用selectColor方法设置图标颜色
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index)) // 必须是svg格式的图片才能使用fillColor
      // 显示标题，使用selectColor方法设置标题颜色
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }

  // 定义selectColor方法，用于根据当前索引选择颜色
  selectColor(index: number) {
    return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')
    // 如果当前索引等于传入的索引，则使用主色调；否则使用灰色
  }

  // 定义build方法，用于构建UI界面
  build() {
    // 使用Tabs组件创建TabBar，设置barPosition属性为BarPosition.End，表示TabBar位置在底部
    Tabs({ barPosition: BarPosition.End }) {
      // 定义第一个TabContent，使用RecordIndex组件
      TabContent() {
        RecordIndex() // 使用RecordIndex组件填充TabContent
      }
      // 为第一个Tab设置自定义的TabBar样式
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'), $r('app.media.ic_calendar'), 0))

      // 定义第二个TabContent，显示"发现页面"文本
      TabContent() {
        Text('发现页面')
      }
      // 为第二个Tab设置自定义的TabBar样式
      .tabBar(this.TabBarBuilder($r('app.string.tab_discover'), $r('app.media.discover'), 1))

      // 定义第三个TabContent，显示"我的主页"文本
      TabContent() {
        Text('我的主页')
      }
      // 为第三个Tab设置自定义的TabBar样式
      .tabBar(this.TabBarBuilder($r('app.string.tab_user'), $r('app.media.ic_user_portrait'), 2))
    }
    // 设置Tabs组件的宽度和高度
    .width('100%')
    .height('100%')
    // 设置Tabs组件的onChange事件，当Tab切换时更新currentIndex状态
    .onChange(index => this.currentIndex = index)
  }
}

这段代码定义了一个底部带有自定义TabBar的Tabs组件，其中包含了三个Tab页，每个Tab页都通过TabContent组件定义。每个TabBar的样式通过TabBarBuilder方法自定义，该方法根据当前选中的Tab索引来改变图标和文字的颜色。selectColor方法用于根据当前索引返回相应的颜色值。onChange事件用于在用户切换Tab时更新当前选中的索引。

总结

在本次开发过程中，我们成功构建了一个基于OHOS操作系统的应用程序，涵盖了用户隐私协议的确认、首页导航以及底部Tab导航的核心功能。首先，我们导入了必要的OHOS模块，包括应用能力通用模块、数据偏好设置、路由模块等，为应用提供了基础架构支持。通过扩展Text组件，我们实现了自定义文本样式方法`opacityWhiteText`，增强了样式的一致性和可复用性。

我们定义了`WelcomePage`组件作为应用的入口点，负责加载欢迎界面，并根据用户的隐私协议同意状态决定是跳转到首页还是显示协议对话框。通过异步加载用户的偏好设置，我们实现了对用户选择的尊重和界面的相应反馈。同时，我们为用户同意或退出应用提供了明确的逻辑处理。

在UI布局构建方面，我们使用Column和Row组件精心设计了欢迎页面的布局，包括居中显示的文本、应用logo、支持的网络协议信息，以及应用介绍和备案号的展示。此外，我们还定义了`Index`组件，实现了一个具有自定义TabBar和多个Tab页的导航界面。每个Tab页都通过`TabContent`组件实现不同的内容展示，而TabBar则通过`TabBarBuilder`方法自定义，根据当前选中的Tab来改变图标和文字的颜色。

整个开发过程中，我们注重用户体验，通过设置组件的宽度、高度和背景颜色，以及使用自定义的文本样式方法，优化了用户的视觉效果和阅读体验。同时，我们也实现了状态管理，通过`@State`装饰器定义了状态变量`currentIndex`来记录当前选中的Tab索引，并在Tab切换时更新状态，确保UI与状态同步。最后，我们通过`.onChange`事件监听用户切换Tab的操作，更新当前选中的索引状态，实现了一个响应式且用户友好的导航界面。

综上所述，本次开发不仅实现了应用的基础功能，还通过精心设计的UI和逻辑处理，提升了用户的交互体验，为后续的功能扩展和维护打下了坚实的基础。