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>
更多关于HarmonyOS 鸿蒙Next Tabbar官方最佳实践探讨，初学求教，附上简易实现，求分享实现方式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
你好，鸿蒙开发者同僚
关于 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(‘我的内容’)<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
} .width(‘100%’) .height(‘100%’) .backgroundColor(’#007DFF’) } .tabBar(this.tabBuilder(‘我的’, 0, $r(‘app.media.mine_selected’), $r('app.media.mine_norm
因为选项卡是固定的，我一般都是直接写。
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('发现')
}
}
}