SwiftUI如何动画父视图高度且不移动子视图？

要实现父视图高度从0动画过渡到40且子视图锚定顶部不动的效果，核心思路是单独动画父视图的高度属性，将子视图固定在父视图顶部，避免使用会缩放整个视图的过渡效果。具体实现步骤如下：

1. 改造SampleView添加状态控制 #

让SampleView接收一个控制展开状态的参数，动态计算目标高度：

struct SampleView: View {
    let isExpanded: Bool
    
    // 根据状态切换目标高度：展开时40，收起时0
    private var targetHeight: CGFloat { isExpanded ? 40 : 0 }
    
    var body: some View {
        // 用VStack将子视图锚定在顶部，下方用Spacer填充高度
        VStack(alignment: .leading, spacing: 0) {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 20) {
                    let strings = ["Text 1", "Text 2", "Text 3"]
                    ForEach(strings, id: \.self) { string in
                        Text(string)
                            .foregroundStyle(.white)
                    }
                }
                .padding(.vertical, 8) // 给文本加内边距，避免紧贴顶部
            }
            // 填充剩余高度，实现父视图底部的动画扩展
            Spacer()
        }
        // 设置动态高度，对齐方式设为顶部
        .frame(height: targetHeight, alignment: .top)
        .background(Color.orange)
        .clipped() // 裁剪超出frame的内容，收起时隐藏子视图
    }
}

2. 在父视图中触发动画 #

调用SampleView时，通过withAnimation块切换状态，触发平滑的高度动画：

struct ContentView: View {
    @State private var showBar = false
    
    var body: some View {
        VStack {
            Button("切换视图") {
                withAnimation(.easeInOut(duration: 0.3)) {
                    showBar.toggle()
                }
            }
            Spacer()
            SampleView(isExpanded: showBar)
        }
        .padding()
    }
}

原理说明 #

• 放弃使用.transition(.scale)这类会缩放整个视图的过渡效果，转而直接动画父视图的frame(height:)属性，仅改变父视图的高度范围。
• 通过VStack的.top对齐规则，让子视图（文本栏）始终固定在父视图顶部，下方的Spacer会随父视图高度变化自动填充，实现底部平滑展开/收起的效果。
• .clipped()确保父视图高度为0时，子视图被完全裁剪隐藏，动画展开时逐渐显示。

内容的提问来源于stack exchange，提问作者Roberto