swift - Why is a Custom Container closure not allowing different views?

Question

I'm working on a Custom Container, but I get an error:

Failed to produce diagnostic for expression; please file a bug report

with the following code (error location is at the bottom of the code below):

struct ZoomCardView<Content: View>: View {
    let contentDefault: ((Binding<Bool>)) -> Content
    let contentZoomed: (Binding<Bool>) -> Content
    
    init(@ViewBuilder defaultContent: @escaping (Binding<Bool>) -> Content, @ViewBuilder zoomed: @escaping (Binding<Bool>) -> Content) {
        self.contentDefault = defaultContent
        self.contentZoomed = zoomed
    }
    
    @State private var isShowing: Bool = false
    
    var body: some View {
        HStack {
            if isShowing {
                self.contentZoomed($isShowing)
                    .transition(.scale(scale: 0, anchor: .center))
            } else {
                self.contentDefault($isShowing)
                    .transition(.scale(scale: 0, anchor: .center))
            }
        }
    }
}

struct DefaultView: View {
    var body: some View {
        HStack {
            Text("Default")
        }
    }
}

struct ZoomView: View {
    var body: some View {
        HStack {
            Text("Zoom")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {   <----------- *** Error
        ZoomCardView { isShowing in
            DefaultView()
        } zoomed: { isShowing in
            ZoomView()
        }
        .preferredColorScheme(.dark)
    }
}

I noticed that in ContentView_Previews, if I pass the same view, the error disappears. For example:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ZoomCardView { isShowing in
            ZoomView()
        } zoomed: { isShowing in
            ZoomView()
        }
        .preferredColorScheme(.dark)
    }
}

Why can't I pass different views when ZoomCardView expects a parameter of type <Content: View>? What I would like to do is to eventually specify a View, or any of the stack types (i.e. ZStack, VStack or HStack), giving the callsite ultimate control as to what gets to be shown. Thanks in advance!

question from:https://stackoverflow.com/questions/65929168/why-is-a-custom-container-closure-not-allowing-different-views

Answer 1

You need to use two generic parameters if you want to pass two different views.

Instead of:

struct ZoomCardView<Content: View>: View

use:

struct ZoomCardView<ContentDefault, ContentZoomed>: View where ContentDefault: View, ContentZoomed: View

Full example:

struct ZoomCardView<ContentDefault, ContentZoomed>: View where ContentDefault: View, ContentZoomed: View {
    let contentDefault: ((Binding<Bool>)) -> ContentDefault
    let contentZoomed: (Binding<Bool>) -> ContentZoomed
    
    init(
        @ViewBuilder defaultContent: @escaping (Binding<Bool>) -> ContentDefault,
        @ViewBuilder zoomed: @escaping (Binding<Bool>) -> ContentZoomed
    ) {
        self.contentDefault = defaultContent
        self.contentZoomed = zoomed
    }
    
    @State private var isShowing: Bool = false
    
    var body: some View {
        HStack {
            if isShowing {
                self.contentZoomed($isShowing)
                    .transition(.scale(scale: 0, anchor: .center))
            } else {
                self.contentDefault($isShowing)
                    .transition(.scale(scale: 0, anchor: .center))
            }
        }
    }
}