@ObservedObject更改时文本框的SwiftUI高度动画

问题描述

当NetStatus发生变化时，我尝试制作平滑的动画，但是它无法按照我的要求工作。

我希望获得与使用切换动画按下按钮时相同的效果。带注释的按钮动画效果很好，我尝试使用文本框的高度缩放来复制它。

注释的按钮代码仅是我想要的动画效果的一个工作示例（优雅地展开和关闭），我不需要此代码。

我该怎么做？

import SwiftUI

struct NoNetwork: View {
  let screenSize: CGRect = UIScreen.main.bounds
  
  @Observedobject var online = NetStatus()
  
  var body: some View {
    
    vstack{
      Text("NoNetworkTitle")
        .fontWeight(.bold)
        .foregroundColor(Color.white)
        .frame(width: screenSize.width,height: self.online.connected ? 0 : 40,alignment: .center)
        // .animation(.easeIn(duration: 5))
        .background(Color.red)
      
//      Button(action: {
//        withAnimation {
//          self.online.connected.toggle()
//        }
//      },label: {
//        Text("Animate")
//      })
      
    }
  }
}

struct NoNetwork_Previews: PreviewProvider {
  static var previews: some View {
    NoNetwork()
  }
}

解决方法

要在online.connected更改时进行动画处理，请将.animation修饰符放在VStack上：

VStack{
  Text("NoNetworkTitle")
    .fontWeight(.bold)
    .foregroundColor(Color.white)
    .frame(width: screenSize.width,height: self.online.connected ? 0 : 40,alignment: .center)
    .background(Color.red)
  
  Button(action: {
      self.online.connected.toggle()
  },label: {
    Text("Animate")
  })
  
}
.animation(.easeInOut(duration: 0.5))

随着VStack的出现和消失，这将为Text中的其他视图设置动画。