How can I add a custom container view in SwiftUI

user_1121573 0
Viewed 3323

I'm curious if you can create a custom container view within SwiftUI. I know that you can create custom content views, such as Text(), but wasn't sure if you could replicate the functionality of say HStack { }

Something akin to:

HGrid {
    Text("Lorem ipsum")
    Text("Lorem ipsum")
}

Where the custom container view (aka HGrid) would then, say, add Spacer() between each added component. Essentially, as an example, transpiling it to:

HStack {
    Text("Lorem ipsum")
    Spacer()
    Text("Lorem ipsum")
}
xcode11 ios13 swiftui swift
2 Answers
user_37166120

If we try to keep it simple and do the only thing, two options can be proposed:

import SwiftUI
// Via custom containers
struct HGrid<Content: View>: View {
    let C1: Content
    let C2: Content

    var body: some View {
        HStack {
            C1
            Spacer()
            C2
        }
    }
}
// Via View composition
struct HGridComposition: View {
    var text1: String
    var text2: String

    var body: some View {
        HStack {
            Text(text1)
            Spacer()
            Text(text2)
        }
    }
}


struct ContentView: View {
    var body: some View {
        VStack {
            Text("Composed from Views").font(.headline)
        HGrid(C1: Text("First"), C2: Text("Second"))
            Divider()
            Text("Composed from texts (String)").font(.headline)
        HGridComposition(text1: "Text One", text2: "Text Two")
        }
        .padding([.leading, .trailing])
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
user_94806080
Related