How to pass optional view to another view in SwiftUI?

Question

So I have this TestView which accepts headerContent and bodyContent,

struct TestView<Content: View>: View {
  let headerContent: (() -> Content)?  = nil
  let bodyContent: () -> Content
  
  var body: some View {
    VStack {
      headerContent?()
      bodyContent()
    }

  }
}

And I use it as,

struct ContentView: View {  
  var body: some View {
    TestView {
      Text("Body Content")
    }
  }
}

Now, how do I pass headerContent? I tried doing,

struct ContentView: View {  
  var body: some View {
    TestView(headerContent: {
      Text("HeaderContent")
    }) {
      Text("BodyContent")
    }
  }
}

I get error,

Extra arguments at positions #1, #2 in call
Generic parameter 'Content' could not be inferred

swiftPunk · Accepted Answer · 2021-11-26 13:16:47Z

4

Way1:

Here is a way, but you would get issue and error if your headerView type be deferent than the body Content! E.g. Circle and Text. I solved this issue in my second Way:

struct TestView<Content: View>: View {
    
    @ViewBuilder let headerContent: (() -> Content)?
    @ViewBuilder let bodyContent: () -> Content
    
    init(headerContent: (() -> Content)? = nil, bodyContent: @escaping () -> Content) {
        self.headerContent = headerContent
        self.bodyContent = bodyContent
    }
    
    var body: some View {
        
        return VStack {
            
            headerContent?()
            bodyContent()
        }
        
    }
    
}

Way2:

Here is the right way for you:

struct TestView<BodyContent: View, HeaderContent: View>: View {
    
    @ViewBuilder let headerContent: () -> HeaderContent
    @ViewBuilder let bodyContent: () -> BodyContent
    
    init(headerContent: @escaping () -> HeaderContent, bodyContent: @escaping () -> BodyContent) {
        self.headerContent = headerContent
        self.bodyContent = bodyContent
    }
    
    init(bodyContent: @escaping () -> BodyContent) where HeaderContent == EmptyView {
        self.headerContent = { EmptyView() }
        self.bodyContent = bodyContent
    }
    
    var body: some View {
        
      return VStack {
            
            headerContent()
            
            bodyContent()
        }
        
    }
}

Use case:

struct ContentView: View {
    
    var body: some View {
          
        TestView(headerContent: {
            Circle().fill(Color.red).frame(width: 25, height: 25)
        }, bodyContent: {
            Text("Hello, World!")
        })
            

        TestView(bodyContent: {
            Text("Hello, World!")
        })

    }
    
}

edited Nov 26, 2021 at 13:16

answered Nov 26, 2021 at 12:47

swiftPunk

1

Sign up to request clarification or add additional context in comments.

1 Comment

Gerry Shaw Over a year ago

You should prefix the headerContent and bodyContent parameters with @ViewBuilder if you want to pass content blocks with more than one view structure. E.g., init(@ViewBuilder headerContent: @escaping () ...

Asperi · Accepted Answer · 2021-11-26 11:29:23Z

1

Just make it var (ie. changeable) instead of let, like

struct TestView<Content: View>: View {
  var headerContent: (() -> Content)?  = nil     // << here !!

...

answered Nov 26, 2021 at 11:29

Asperi

262k28 gold badges594 silver badges889 bronze badges

1 Comment

Asperi Over a year ago

@swiftPunk, it is out of question context.

Raja Kishan · Accepted Answer · 2021-11-26 11:16:54Z

0

Change your optional variable from let to var.

When you define a variable using let keyword then you can't change it. In your example, you have set nil as constant for a headerContent.

struct TestView<Content: View>: View {
    var headerContent: (() -> Content)?  = nil
    let bodyContent: () -> Content

You can also use let with init

struct TestView<Content: View>: View {
    let headerContent: (() -> Content)?
    let bodyContent: () -> Content
    
    init(headerContent: (() -> Content)?  = nil, bodyContent: @escaping () -> Content) {
        self.headerContent = headerContent
        self.bodyContent = bodyContent
    }

edited Nov 26, 2021 at 11:16

answered Nov 26, 2021 at 11:09

Raja Kishan

19.4k3 gold badges42 silver badges71 bronze badges

Comments

usama n · Accepted Answer · 2024-01-22 20:49:14Z

Making a single view an optional parameter can be done through two different approaches

Way 1 :- with this way you can easily pass view in closure.

    struct View<Content: View>: View {
      var content: Content?

      init(@ViewBuilder content: () -> Content = { EmptyView() }) {
          let view  = content()
          self.content = (view is EmptyView) ? nil : view
      }
      var body: some View {
        if let content = content {
           
        } else {
            
        }
      }
    }

Way 2 :- with this way you need to pass view with wrap in AnyView

    struct View: View {
      var content: AnyView?

      init(content: AnyView? = nil) {
          self.content = content
      }
      var body: some View {
        if let content = content {
           
        } else {
            
        }
      }
    }

Collectives™ on Stack Overflow

How to pass optional view to another view in SwiftUI?

4 Answers 4

Way1:

Way2:

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Way1:

Way2:

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related