HarmonyOS 鸿蒙Next Tabbar官方最佳实践探讨，初学求教，附上简易实现，求分享实现方式
HarmonyOS 鸿蒙Next Tabbar官方最佳实践探讨，初学求教，附上简易实现，求分享实现方式
HarmonyOS的分布式技术真的让人眼前一亮，设备间的无缝协作太方便了！
关于HarmonyOS 鸿蒙Next Tabbar官方最佳实践探讨，初学求教，附上简易实现，求分享实现方式的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。
[@Component](/user/Component)
struct Find {
build() {
Column() {
Text('发现')
}
}
}
@Entry
@Component
struct Index {
@State currentIndex: number = 0
@State currentSubIndex: number = 0
@State tabs: TabBar[] = [
{
icon: $r(‘app.media.message’),
selectIcon: $r(‘app.media.message’),
},
{
icon: $r(‘app.media.contact’),
selectIcon: $r(‘app.media.contact’)
},
{
icon: $r(‘app.media.search’),
selectIcon: $r(‘app.media.search’)
},
{
icon: $r(‘app.media.me’),
selectIcon: $r(‘app.media.me’)
}
]
private controller: TabsController = new TabsController()
@Builder
tabBuilder(index: number, tabItem: TabBar) {
Column() {
Image(this.currentIndex === index ? tabItem.selectIcon : tabItem.icon)
.width(24)
.height(24)
.margin({ bottom: 4 })
}.width(‘100%’)
}
build() {
Column() {
Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {
ForEach(this.tabs, (item: TabBar, index) => {
TabContent() {
if (this.currentIndex === 0) {
Home()
} else if (this.currentIndex === 1) {
Contact()
} else if (this.currentIndex === 2) {
Find()
} else if (this.currentIndex === 3) {
MyInfo()
}
}.tabBar(this.tabBuilder(index, item))
})
}
.vertical(false)
.barMode(BarMode.Fixed)
.animationMode(AnimationMode.NO_ANIMATION)
.onChange((index: number) => {
this.currentIndex = index
})
.backgroundColor(’#F1F3F5’)
}.width(‘100%’).height(‘100%’)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
你好，鸿蒙开发者同僚
关于 tabBar 属性的使用，可以根据是否带有下划线分为两种情况，希望对你有所帮助：
- tabBar(value: string | Resource | CustomBuilder | { icon?: string | Resource; text?: string | Resource })
- 此方法用于设置 TabBar 上的显示内容。默认情况下，底部样式会带有标准的下划线效果。
- CustomBuilder：构造器，支持传入自定义组件
- tabBar(value: SubTabBarStyle | BottomTabBarStyle)
- 此方法同样用于设置 TabBar 上的显示内容，但底部样式不会带有下划线效果。如果 icon 出现异常，将显示灰色图块。
-
SubTabBarStyle: 子页签样式。
-
BottomTabBarStyle: 底部页签和侧边页签样式。
参考文档
TabContent-容器组件-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)
可以自定义tab bar.选项卡 (Tabs)-构建布局-开发布局-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)
[@Builder](/user/Builder) tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
Column() {
Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
.size({ width: 25, height: 25 })
Text(title)
.fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
}
.width('100%')
.height(50)
.justifyContent(FlexAlign.Center)
}
在TabContent对应tabBar属性中传入自定义函数组件，并传递相应的参数。
TabContent() {
Column(){
Text(‘我的内容’)
}
.width(‘100%’)
.height(‘100%’)
.backgroundColor(’#007DFF’)
}
.tabBar(this.tabBuilder(‘我的’, 0, $r(‘app.media.mine_selected’), $r('app.media.mine_norm
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
因为选项卡是固定的，我一般都是直接写。
TabContent() {
Home()
}.tabBar(this.tabBuilder(0, this.tabs[0]))
TabContent() {
Contact()
}.tabBar(this.tabBuilder(1, this.tabs[1]))
TabContent() {
MyInfo()
}.tabBar(this.tabBuilder(2, this.tabs[2]))<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
interface TabBar {
icon: Resource
selectIcon: Resource
}
[@Component](/user/Component)
struct Contact {
build() {
Column() {
Text('联系人')
}
}
}
[@Component](/user/Component)
struct MyInfo {
build() {
Column() {
Text('我的')
}
}
}
[@Component](/user/Component)
struct Home {
build() {
Column() {
Text('首页')
}
}
}
[@Component](/user/Component)
struct Find {
build() {
Column() {
Text('发现')
}
}
}