自定义可折叠视图

Question

我正在尝试创建自定义可折叠视图。代码有效，但在Collapsible<Content: View> 中VStack 有奇怪的行为：当组件关闭时元素重叠。 要注意这一点，请尝试禁用clipped()，如图所示。

这是一个错误还是我没有注意到的愚蠢的东西？ 提前致谢

固定代码：

struct Collapsible<Content: View>: View {
    var label: String
    var content: () -> Content
    init(label: String, @ViewBuilder _ content: @escaping () -> Content) {
        self.label = label
        self.content = content
    }
    @State private var collapsed: Bool = true
    
    var body: some View {
        VStack(spacing: 0) {
            Button(action: {
                withAnimation(.easeInOut) {
                    self.collapsed.toggle()
                }
            }, label: {
                    HStack {
                        Text(label)
                        Spacer(minLength: 0)
                        Image(systemName: self.collapsed ? "chevron.down" : "chevron.up")
                    }
                    .padding()
                    .background(Color.white.opacity(0.1))
                }
            )
            .buttonStyle(PlainButtonStyle())
            self.content()
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: collapsed ? 0 : .none, alignment: .top) // <- added `alignment` here
            .clipped() // Comment to see the overlap
            .animation(.easeOut)
            .transition(.slide)
        }
    }
}

struct CollapsibleDemoView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Collapsible(label: "Collapsible") {
                Text("Content")
                .padding()
                .background(Color.red)
            }
            Spacer(minLength: 0)
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Answer 1

.frame 修饰符有一个默认为 center 的参数对齐方式，这会导致您看到的行为：布局边界设置为零高度，但内容在边界之外垂直居中呈现（如果未剪裁）。您可以通过添加对齐来解决此问题：

.frame(maxHeight: 0, alignment: .top)