如何在 SwiftUI 中制作 "reveal" 风格的 collapse/expand 动画？

Question

我想在 SwiftUI 中实现一个动画，它“显示”视图的内容以启用 expand/collapse 功能。我要折叠和展开的视图的内容很复杂：它不仅仅是一个简单的框，而是一个动态高度和内容的视图层次结构，包括图像和文本。

我尝试了不同的选项，但没有达到预期的效果。通常发生的情况是，当我“展开”时，整个视图立即以 0% 不透明度显示，然后逐渐淡入，同时展开视图下的按钮向下移动。这就是我使用条件 if 语句实际添加和删除视图时发生的情况。所以这是有道理的。

然后我尝试使用 frame 修饰符：.frame(maxHeight: isExpanded ? .infinity : 0)。但这导致视图的内容被“压缩”而不是显示。

我做了一个我想要的纸质原型：

关于如何实现这一点有什么想法吗？

Answer 1

这样的事情可能会奏效。您可以将要公开的内容的高度修改为隐藏时为 0，或者隐藏时为 nil，这样它将达到视图定义的高度。确保之后剪裁视图，以便在未公开时内容在框架高度之外不可见。

struct ContentView: View {
    @State private var isDisclosed = false
    
    var body: some View {
        VStack {
            Button("Expand") {
                withAnimation {
                    isDisclosed.toggle()
                }
            }
            .buttonStyle(.plain)
            
            
            VStack {
                GroupBox {
                    Text("Hi")
                }
                
                GroupBox {
                    Text("More details here")
                }
            }
            .frame(height: isDisclosed ? nil : 0, alignment: .top)
            .clipped()
            
            HStack {
                Text("Cancel")
                Spacer()
                Text("Book")
            }
        }
        .frame(maxWidth: .infinity)
        .background(.thinMaterial)
        .padding()
    }
}

不，这也不是为了匹配您的设计。这只是为了提供创建动画的示例方法。

如何在 SwiftUI 中制作 "reveal" 风格的 collapse/expand 动画？

How to do a "reveal"-style collapse/expand animation in SwiftUI?

animation

swift

swiftui