SwiftUI父视图展开/折叠时子视图动画异常，求统一Luna式效果

• 当前可展开视图存在动画异常：“Atlas”区域折叠时，名称和头像固定不动，标题文本下移；展开时名称和头像淡入，但与标题的相对位置改变
• 期望所有区域都实现“Luna”区域的动画效果：名称和头像随视图折叠/展开同步隐藏/显示，且与标题的相对位置始终保持一致
• 尝试修改Avatar和名称区域的transition属性，未解决问题

当前代码 #

VStack(alignment: .leading, spacing: 16) {
    HStack {
        VStack(alignment: .leading, spacing: 8) {
            (
                Text(session.startDate, style: .time)
                + Text(" - ")
                + Text(session.endDate, style: .time)
            )
            .font(.caption1)

            Text(session.title)
                .font(.headline6)
        }
        Spacer()
        if session.canExpand {
            if expanded {
                Image(systemName: "chevron.up")
            } else {
                Image(systemName: "chevron.down")
            }
        }
    }

    if expanded {
        ForEach(session.speakers) { speaker in
            HStack {
                Avatar(name: speaker.name, size: 24, imagePath: speaker.image)
                    Text("Test name \(Int.random(in: 1...30))")
                    .font(.body1)
            }
        }
    }
}

核心问题是直接用if expanded添加/移除子视图，导致SwiftUI默认过渡破坏了布局同步性。要实现和“Luna”区域一致的动画，需让子视图始终存在于布局中，通过控制透明度和高度来实现显隐：

1. 替换条件渲染为动态布局控制 #

把原来的if expanded逻辑替换为始终渲染子视图，通过opacity、frame(height:)和clipped()来控制显隐，同时绑定动画：

VStack(alignment: .leading, spacing: 16) {
    HStack {
        VStack(alignment: .leading, spacing: 8) {
            (
                Text(session.startDate, style: .time)
                + Text(" - ")
                + Text(session.endDate, style: .time)
            )
            .font(.caption1)

            Text(session.title)
                .font(.headline6)
        }
        Spacer()
        if session.canExpand {
            // 简化箭头切换逻辑，自动带过渡动画
            Image(systemName: expanded ? "chevron.up" : "chevron.down")
        }
    }

    // 始终渲染子视图，通过属性控制显隐
    VStack(spacing: 8) {
        ForEach(session.speakers) { speaker in
            HStack {
                Avatar(name: speaker.name, size: 24, imagePath: speaker.image)
                Text("Test name \(Int.random(in: 1...30))")
                    .font(.body1)
            }
        }
    }
    .opacity(expanded ? 1 : 0)
    .frame(height: expanded ? nil : 0)
    .clipped()
    .animation(.easeInOut, value: expanded)
}
// 父容器绑定动画，确保所有布局变化同步
.animation(.easeInOut, value: expanded)

2. 可选：增强动画自然度 #

如果希望子视图有滑入滑出效果，可以在上述基础上添加offset动画：

.offset(y: expanded ? 0 : 10)
.opacity(expanded ? 1 : 0)

这样修改后，子视图会随父视图的折叠/展开同步调整位置，保持和标题的相对位置一致，完全匹配“Luna”区域的动画效果。

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