鸿蒙作业HealthApp第二期
文章目录
前言
这一期主要实现页面UI的实现和饮食记录UI中的顶部搜索栏的初步实现
一、首页UI设计
1.1首页UI结构分析
1.2首页UI初步实现
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 {
@State currentIndext : number = 0
private breakpointSystem : BreakpointSystem= new BreakpointSystem()
@StorageProp('currentBreakpoint')currentBreakpoint:string=BreakpointConstants.BREAKPOINT_SM
@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.currentIndext===index?$r('app.color.primary_color'):$r('app.color.gray')
}
chooseBarPosition(){
let p={
sm:BarPosition.End,
md:BarPosition.Start,
lg:BarPosition.Start
}
return p[this.currentBreakpoint]
}
build() {
Tabs({barPosition:this.chooseBarPosition()}){
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.currentIndext=index)
.vertical({
sm:false,
md:true,
lg:true
}[this.currentBreakpoint])
}
}
二、饮食记录UI设计
2.1饮食记录UI-顶部搜索栏
2.1.1首先创建一个RecordIndex etc文件在建立一个ResearchHeader etc文件
代码及显示如下:
2.1.2进一步实现右上角的消息提示框
代码及显示如下:
RecordIndex etc文件代码如下(示例):
import RecordList from './RecordList'
import SearchHeader from './SearchHeader'
import StatsCard from './StatsCard'
@Component
export default struct RecordIndex{
build(){
Column(){
//1、头部搜索栏
SearchHeader()
//2、统计卡片
StatsCard()
//3、记录列表
RecordList()
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.index_page_background'))
}
}
消息提示框代码如下(示例):
import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct SearchHeader{
build(){
Row({space:CommonConstants.SPACE_6}){
Search({placeholder:'搜索饮食或运动信息'})
.textFont({size:18})
.layoutWeight(1)
Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:14}}){
Image($r('app.media.ic_public_email'))
.width(24)
}
}
.width(CommonConstants.THOUSANDTH_940)
}
}
总结
注意通过Badge 组件来显示一个带有徽章的图像,并设置徽章的数量、位置和样式。在徽章内部使用 Image 组件来显示图像,并设置图像的宽度。可以利用查询其API了解其用法。