上一期给大家分享了黑马健康登录欢迎界面的代码,欢迎界面完成之后便会来到主页界面,这一期给大家分享黑马健康主页界面的实现代码。
主页界面代码参照“黑马程序员—实战案例—首页Tabs”视频,完成以下效果。
效果图:
参照代码如下:
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 { @State currentIndex: number = 0 private breakpointSystem: BreakpointSystem = new BreakpointSystem() @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM @State isPageShow: boolean = false onPageShow(){ this.isPageShow = true } onPageHide(){ this.isPageShow = false } @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') } build() { Tabs({ barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint) }) { TabContent() { RecordIndex({isPageShow: this.isPageShow}) } .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)) } }
以上便是黑马健康软件主页界面视觉方面实现的代码。
这仅仅只是主页界面的视觉初步实现,下一期给大家分享主页界面的功能实现。