本章实现项目《黑马健康APP》的首页Index的实现。
一.运行效果
二.知识储备
(一)Tabs组件
目标:使用Tabs组件,实现页面内视角内容快速切换,完成UI界面。
(二)TabBuilder组件
目标:借助TabBuilder组件实现自定义tabBar,实现图标型的tabBar并且实现点击触发高亮。
三.实现步骤
(一)实现首页Index界面布局: TabContent
(记录 发现 我的)
tabBar
(二)编写内容区域Index的结构:
使用Tabs组件完成界面的TabContent部分和tabBar部分实现在不同的视图之间进行切换。由于tabBar只能接受字符串型,所以借助TabBuilder组件自定义为图片型并带有text符合界面要求;再由定义状态变量,根据当前角标点击状态的变化进行判断实现高亮。
import { CommonConstants } from '../common/constants/CommonConstants'
@Entry
@Component
struct Index {
@State currentIndex:number=0
@Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number) {
Column({ space: CommonConstants.SPACE_8 }) {
Image(image)
.width(22)
.fillColor(this.currentIndex==index? $r('app.color.primary_color'):$r('app.color.gray'))
Text(title)
.fontSize(14)
}
}
build() {
Tabs({barPosition: BarPosition.End}) {
TabContent(){
Text('饮食记录页面')
}
.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)
}
}
四.总结
此次在APP应用中创建一个具有自定义标签栏的多页面组件,通过利用状态管理、动态样式和资源引用等技术,提供了一个响应式和可定制的用户界面。