前言
综合运用本学期所学内容及个人自学知识,使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新 性的移动应用软件。
一、项目介绍
黑马健康App是一款功能全面的健康管理应用,黑马健康App通过提供个性化的饮食记录、健康评估等功能,帮助用户轻松管理健康,改善饮食和生活习惯。 还提供个性化的推荐服务,确保用户能够获得最适合自己的健康和运动建议。总的来说,黑马健康App是一款功能全面、注重个性化推荐的健康管理应用,旨在为用户提供一站式的健康和运动解决方案。
二、具体页面实现
1.首页Tabs
(1)页面分析
整个首页是使用一个Tabs组件进行构建,Tabs组件可以实现页面内试图内容快速切换,包含TabBar和Tabcontent两个部分。
(2)代码
//首页
import BreakpointType from '../common/bean/BreanpointType'
import BreakpointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RecordIndex from '../view/record/RecordIndex'
@Entry
@Component
struct Index {
//状态变量,默认为0
@State currentIndex: number = 0
//
private breakpointSystem:BreakpointSystem=new BreakpointSystem()
@StorageProp('currentBreakpoint') currentBreakpoint:string=BreakpointConstants.BREAKPOINT_SM//只读且初始化为小屏幕
//自定义bar(参数:导航栏题目,图片,序号)
@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))
}
}
//生命周期函数
aboutToAppear(){
this.breakpointSystem.register()
}
aboutToDisappear(){
this.breakpointSystem.unregister()
}
//底部导航栏颜色
selectColor(index:number){
//状态变量与序号相同则变为主题色,不同则是灰的
return this.currentIndex===index?$r('app.color.primary_color'):$r('app.color.gray')
}
// chooseBarPosition(){
// return new BreakpointType({
// sm:BarPosition.End,
// md:BarPosition.Start,
// lg:BarPosition.Start,
// }).getValue(this.currentBreakpoint)
// }
build() {
Tabs({barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint)}) {//导航栏底部
TabContent(){
RecordIndex()//调用饮食记录页面
}
.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)//状态变量获取目前页面的序号
.vertical(new BreakpointType({
sm:false,
md:true,
lg:true
}).getValue(this.currentBreakpoint))//
}
}
(3)运行结果
总结
通过本次视频的学习,学会了Tabbar组件的含义与使用方法。