自定义可折叠视图

Posted 2023-02-23

【中文标题】自定义可折叠视图

【英文标题】：Custom collapsible view

【发布时间】：2021-07-16 11:57:48

【问题描述】：

我正在尝试创建。代码有效，但在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)
    

【参考方案1】：

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

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

【讨论】：

您好，谢谢您的回答！ max Height:0 显然不会出现内容。而是将alignement: .top 添加到.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: collapsed ? 0 : .none, alignment: .top) 解决问题！谢谢！我更新了我的代码

这就是我的意思，我只是简化了例子:)