barHeight 动画异常

显示动画(正常): 当 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;
    })
  }
}
Tab
2025-07-14 18:03:33
浏览
收藏 0
回答 0
待解决
相关问题
HarmonyOS 上传图片异常
839浏览 • 1回复 待解决
HarmonyOS 弹窗显示异常
948浏览 • 1回复 待解决
HarmonyOS bindSheet高度异常
1129浏览 • 1回复 待解决
HarmonyOS xml解析异常
1006浏览 • 1回复 待解决
HarmonyOS Text显示异常
669浏览 • 1回复 待解决
HarmonyOS router回退异常
711浏览 • 1回复 待解决
ErrorManager捕获js异常
1631浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
3238浏览 • 1回复 待解决
HarmonyOS 关于属性动画显示动画的控制
1039浏览 • 1回复 待解决
HarmonyOS 弹窗异常问题
1465浏览 • 1回复 待解决
HarmonyOS json解析异常
1403浏览 • 1回复 待解决
Redistemplate报nullpointer异常
5682浏览 • 1回复 待解决
HarmonyOS 异常堆栈获取
1087浏览 • 1回复 待解决
如何应用属性动画实现宽高的动画
1294浏览 • 1回复 待解决
HarmonyOS canvas动画如何实现逐帧动画
1176浏览 • 1回复 待解决
HarmonyOS RN reject异常问题
854浏览 • 1回复 待解决
HarmonyOS sim.getDefaultVoiceSlotId异常
614浏览 • 1回复 待解决
Rect设置渐变显示异常
1118浏览 • 1回复 待解决
@Builder使用引用时异常
1628浏览 • 1回复 待解决
HarmonyOS 组件尺寸显示异常
864浏览 • 1回复 待解决
import Sample 里异常显示
7853浏览 • 1回复 待解决