目录
前言
当前部分主要是完成首页的UI设计,学习并掌握Tabs组件的用法,可以完成页面内视图快速切换,包含TabBar和TabContent两部分
实现效果
项目代码
Tabs组件
代码
import { CommonConstants } from '../common/constants/CommonConstants'
@Entry
@Component
struct Index {
@State currentIndex:number = 0
// 自定义样式,title为String字符串类型
@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))
}
}
// 对颜色代码进行封装
selectColor(index:number){
return this.currentIndex === index?$r('app.color.primary_color'):$r('app.color.gray')
}
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%')
.vertical(false)
.onChange(index => this.currentIndex = index)
}
}
小结
(1)通过Tabs组件进行布局,三个值分别是文字title,图片image,角标index;
(2)因为在组件中的TabBar无法自行的设置样式,需要通过创建@Builder函数来定义样式,来实现图片样式的效果。
(3)在创建完样式并且进行应用后,为了判断此时所在界面,需要为下面设置颜色样式用来判断处于的是哪个界面,设置动态参数,利用角标(index)对参数进行“index=>this.动态参数 = index来获取此时所在界面”;
(4)最后通过设置函数selectColor改变图标的颜色,设置三目运算符判断是不是进行了转换然后进行改变颜色。
重点掌握
(1) vertical是不是水平布局,属于boolean值;
(2)Tabs({barPostition:BarPosition.End})"BarPosition."后面可以是End,Start。End代表的是水平和垂直方向上面分别是下面和右边,Start代表的是水平布局和垂直布局的左面和上面,两者相互结合进行判断)。
疑惑解决
1.如何来定义TabBar的样式(加图标)?通过@Builder函数定义;
2.如何获取角标的值?通过添加动态参数currentIndex:number = 0进行记录,在上面的Tabs组件中定义.onChange()参数获取改变的值为多少
顶部搜索
代码
// 首页Tab
TabContent(){
RecordIndex()
}
.tabBar(this.TabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))
// 创建单独顶部组件
import SearchHeader from './SearchHeader'
@Component
export default struct RecordIndex {
// export default是为了进行默认导出组件,如果不加无法进行组件的导出
build() {
Column(){
// 1.头部搜索栏
SearchHeader()
}
.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: 12}}){
Image($r('app.media.ic_public_email'))
.width(24)
}
}
.width(CommonConstants.THOUSANDTH_940)
}
}
小结
将代码进行分块化,可移植性更好,也能更快地查找出错误,调用时也更加方便快捷;
注意:export default一定不能忘记添加,如果忘记添加组件不能进行默认的导出会出现错误,导致组件无法正常的调用。
重点掌握(新的知识点)
1.search:代表的是创建搜索框文件,可以根据输入值然后进行搜索相似;
2.badge:代表的是显示邮件上面的数字,代表了邮箱上面有多少条数据,可以分为右上侧,左侧,右侧等属性,count代表的是信息的条数。
作者寄语
感谢大家的阅读,以上是做项目时的所感,希望能给需要的人带来帮助,谢谢大家的支持!!!