Hongmeng tabbar ArkTS
I made a tabbar imitating the current application.
Official document address
reference document
sure
One of the more important points is the reference to image resources.
The pictures are in the base directory under the resources directory.
The resources of pictures in the media directory cannot be added to folders, but can only be files, and the naming rules for files are that they can only contain uppercase and lowercase letters and underscores.
In addition {method of resource reference](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-types-0000001477981241-V3)
The content of the required resource definition must be determined during the coding stage and cannot be changed in the middle. Therefore, judgments such as if cannot be added, and the entire resource reference can only be passed in as a parameter.
The implementation code is as follows:
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@State selectedIndex: number = 0
@Builder TabBuider(index: number, name: string, selectedImage: Resource, normalImage: Resource) {
Column() {
if ( this.selectedIndex == index) {
Image(selectedImage)
.objectFit(ImageFit.Contain)
.width(24)
.height(24)
.margin({
bottom: '4lpx'})
} else {
Image(normalImage)
.objectFit(ImageFit.Contain)
.width(24)
.height(24)
.margin({
bottom: '4lpx'})
}
Text(name)
.fontSize(16)
}
.border({
width: {
top: '2lpx'},
color: '#efefef',
style: BorderStyle.Solid
})
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
build() {
Tabs({
barPosition: BarPosition.End}) {
TabContent() {
Text(this.message)
}
.tabBar(this.TabBuider(0, "首页", $r('app.media.tabbar_home_selected'), $r('app.media.tabbar_home')))
TabContent() {
Text(this.message)
}
.tabBar(this.TabBuider(1, "数据", $r('app.media.tabbar_data_selected'), $r('app.media.tabbar_data')))
TabContent() {
Text(this.message)
}
.tabBar(this.TabBuider(2, "我的", $r('app.media.tabbar_mine_selected'), $r('app.media.tabbar_mine')))
}.onChange(index=>{
this.selectedIndex = index
})
}
}