SwiftUI动画优化咨询：实现图片显隐时灰色背景动态展开

嗨，Alexnnd！当然可以实现你想要的效果～ 你当前的问题在于用opacity和offset只是改变了图片的视觉状态，但图片本身一直存在于视图层级中，所以外层的VStack高度始终包含了图片的高度，灰色背景自然不会跟着展开收缩。

要让背景随着图片的显隐动态调整，核心是让图片真正从视图层级中“出现/消失”，而不是只做视觉上的隐藏。这里给你两种实用的解决方案：

方案一：条件渲染（最直接高效） #

通过if/else条件判断控制图片的存在与否，这样VStack的高度会自动适配内容，灰色背景也会同步展开或收缩。配合SwiftUI的transition还能让动画更自然：

import SwiftUI

struct ExampleView: View {
    // 修正拼写：isShowing 替代原代码的isSowing
    @State private var isShowing = false

    var body: some View {
        VStack {
            HStack {
                Image("photo")
                    .onAppear { animateImage() }
                
                // 给文字VStack加上左对齐，排版更工整
                VStack(alignment: .leading) {
                    Text("Name")
                    Text("Company")
                }
                
                Spacer()
            }
            
            // 只有isShowing为true时，图片才会被添加到视图中
            if isShowing {
                Image("image")
                    // 自定义过渡动画：从底部移入+透明度渐变
                    .transition(.move(edge: .bottom).combined(with: .opacity))
            }
        }
        .background(Color.gray) // 修正拼写：SwiftUI标准拼写是gray而非grey
        // 绑定动画到isShowing状态，确保所有关联视图同步动画
        .animation(.easeInOut(duration: 0.5), value: isShowing)
    }

    private func animateImage() {
        withAnimation(.easeInOut.delay(1)) {
            isShowing = true
        }
    }
}

关键修改点说明：

• 替换opacity+offset为条件渲染，让图片真正“存在/不存在”，触发VStack高度动态变化
• 添加transition组合动画，让图片的显隐过程更丝滑
• 修正了代码里的拼写错误（isSowing→isShowing，Color.grey→Color.gray）
• 给文字VStack添加了左对齐，优化排版体验

方案二：动态控制Frame高度（保留视图层级） #

如果你不想完全移除图片（比如需要保留图片的缓存状态），可以通过动态调整图片的frame高度来实现显隐，同样能带动背景展开：

import SwiftUI

struct ExampleView: View {
    @State private var isShowing = false

    var body: some View {
        VStack {
            HStack {
                Image("photo")
                    .onAppear { animateImage() }
                
                VStack(alignment: .leading) {
                    Text("Name")
                    Text("Company")
                }
                
                Spacer()
            }
            
            Image("image")
                // 动态设置高度：显示时用原始高度，隐藏时设为0
                .frame(height: isShowing ? nil : 0)
                .opacity(isShowing ? 1 : 0)
                .animation(.easeInOut(duration: 0.5), value: isShowing)
        }
        .background(Color.gray)
        .animation(.easeInOut(duration: 0.5), value: isShowing)
    }

    private func animateImage() {
        withAnimation(.easeInOut.delay(1)) {
            isShowing = true
        }
    }
}

这种方式下图片始终存在于视图层级，但高度被压缩到0时会被隐藏，同样能触发VStack的高度变化，带动背景展开。

你可以根据自己的需求选择方案，第一种条件渲染的方式更符合你的“图片真正出现/消失”的需求，推荐优先使用～

备注：内容来源于stack exchange，提问作者Alexnnd