
如何写精华回答,获更多曝光?
发布
显示动画(正常): 当 barHeight 从 0 动画到 60 时,TabBar 连同其内部的文字内容会一起平滑地展开,效果符合预期。
隐藏动画(异常): 当 barHeight 从 60 动画到 0 时,TabBar 内部的文字内容会瞬间消失,只有 TabBar 的背景容器在执行一个高度从 60 慢慢变到 0 的收缩动画。
@Entry
@Component
struct ProblematicTabBarAnimationDemo {
@State activeIndex: number = 0;
@State tabBarHeight: number = 60;
private controller: TabsController = new TabsController();
@Builder
tabBarItem(index: number, title: string) {
Column({ space: 4 }) {
Text(title)
.fontSize(25)
.fontColor(this.activeIndex === index ? '#007DFF' : '#666666')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
build() {
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
TabContent() {
Column({ space: 20 }) {
Text("动画问题演示")
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(Color.White)
Text("点击“隐藏”按钮,观察TabBar的文字瞬间消失,只有背景区域在执行动画。")
.width('90%')
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.opacity(0.8)
Button("隐藏 TabBar ")
.onClick(() => {
this.getUIContext().animateTo({
duration: 5000,
curve: Curve.Ease
}, () => {
this.tabBarHeight = 0;
this.controller.setTabBarTranslate({ y: 60 })
});
})
Button("显示 TabBar")
.onClick(() => {
this.getUIContext().animateTo({
duration: 5000,
curve: Curve.Ease
}, () => {
this.tabBarHeight = 60;
this.controller.setTabBarTranslate({ y: 0 })
});
})
}
.width("100%").height("100%")
.justifyContent(FlexAlign.Center)
.backgroundColor("#C78D67")
}
.tabBar(this.tabBarItem(0, "首页"))
TabContent() {
Column() {
Text("评论页面")
.width("100%").height("100%")
.fontSize(30).textAlign(TextAlign.Center)
.backgroundColor("#F0DCB1")
}
}
.tabBar(this.tabBarItem(1, "评论"))
}
.width('100%')
.height('100%')
.barHeight(this.tabBarHeight)
.onChange((index: number) => {
this.activeIndex = index;
})
}
}