HarmonyOS鸿蒙Next中实现tabbar选中凸起效果
HarmonyOS鸿蒙Next中实现tabbar选中凸起效果 如何实现在tabbar被选中后，凸起的效果
@Entry @Component struct onePage { @State fontColor: string = ‘#182431’ @State selectedFontColor: string = ‘#007DFF’ @State currentIndex: number = 0 private controller: TabsController = new TabsController() tabTitle: string[] = [‘健康’, ‘商城’, ‘预警中心’, ‘消息’, ‘我的’]
@Builder imgText(item: string, index: number) { if(this.currentIndex == index){ Column() { Column() { Image($r(‘app.media.startIcon’)) .height(50) .objectFit(ImageFit.Contain) .borderRadius(100) } .height(60) .width(60) .offset({ y: -20 }) .backgroundColor(Color.White) .borderRadius(100) } .width(‘20%’) .height(‘100%’) .backgroundColor(Color.Blue) .justifyContent(FlexAlign.Center) }else{ Column({ space: 10 }) { Image($r(‘app.media.startIcon’)) .height(40) .objectFit(ImageFit.Contain) Text(item) .fontSize(15) } .width(‘20%’) .height(‘100%’) .backgroundColor(Color.Blue) .onClick(() => { this.currentIndex = index this.controller.changeIndex(this.currentIndex) }) } }
@Builder bottomBuilder() { Row() { ForEach(this.tabTitle, (item: string, index: number) => { this.imgText(item, index) }) } .justifyContent(FlexAlign.SpaceEvenly) .width(‘100%’) .height(‘10%’) }
build() { Column() { Tabs({ index: this.currentIndex, controller: this.controller, barPosition: BarPosition.End }) { TabContent() { Column().width(‘100%’).height(‘100%’).backgroundColor(’#00CB87’) }
TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}
TabContent() {
Column().width('100%').height('100%').backgroundColor('#FFBF00')
}
TabContent() {
Column().width('100%').height('100%').backgroundColor('#cccccc')
}
}
.onChange((index: number) => {
this.currentIndex = index
})
.width('100%')
}
.overlay(this.bottomBuilder(), { align: Alignment.End, offset: { x: 0, y: 360 } })
.width('100%')
.height('100%')
} }
更多关于HarmonyOS鸿蒙Next中实现tabbar选中凸起效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中实现tabbar选中凸起效果，可以通过自定义组件和动画效果来实现。首先，使用TabContent组件创建基本的tabbar布局。然后，通过Shape组件定义凸起的形状，例如半圆形或矩形。使用State管理选中状态，并在选中时应用凸起效果。
具体步骤如下：
- 创建
TabContent组件，设置TabItem为每个tab的内容。 - 使用
Shape组件定义凸起形状，设置Path属性绘制所需形状。 - 在
TabContent的onChange事件中，根据选中的TabItem更新State。 - 使用
Animation组件为凸起效果添加动画，例如SpringAnimation或KeyframeAnimation。 - 在
State变化时，应用动画效果到Shape组件，实现凸起效果。
示例代码：
@Entry
@Component
struct TabBarWithBump {
@State selectedIndex: number = 0;
build() {
Column() {
TabContent({ barPosition: BarPosition.BOTTOM }) {
TabItem('Tab1').content(() => {
Text('Content 1')
})
TabItem('Tab2').content(() => {
Text('Content 2')
})
}
.onChange((index: number) => {
this.selectedIndex = index;
})
Shape() {
Path()
.commands('M 0 0 L 100 0 L 100 50 Q 50 70 0 50 Z')
.fill(Color.Blue)
.animation({
duration: 300,
curve: Curve.EaseInOut
})
}
.height(50)
.width(100)
.offset({ y: this.selectedIndex === 0 ? -10 : 0 })
}
}
}
该代码展示了如何在鸿蒙Next中实现tabbar选中时的凸起效果。通过Shape组件和Animation组件，可以实现平滑的凸起动画。
