SwiftUI: Distribute views within container evenly? - swiftui

Question

Let's say I have a ZStack with an indeterminate/flexible width. There are four views within this ZStack. How would I distribute the views evenly... as if I were fanning out a deck of cards (with each card overlapping the next), like this:
I can accomplish this effect with .offset(x: ?) if I know the width of the container:
ZStack {
Text("One")
.frame(width: 99, height: 150, alignment: .topLeading)
.background(Color.blue)
.offset(x: -99)
Text("Two")
.frame(width: 99, height: 150, alignment: .topLeading)
.background(Color.red)
.offset(x: -33)
Text("Three")
.frame(width: 99, height: 150, alignment: .topLeading)
.background(Color.orange)
.offset(x: 33)
Text("Four")
.frame(width: 99, height: 150, alignment: .topLeading)
.background(Color.green)
.offset(x: 99)
}
But what if I don't know the width of the container? Or what if it changes? Or what if the number of views within the container changes?
Basically, I just need to distribute views within the ZStack evenly... no matter what the width is. How?

Answer 1

Since you have that many cards, you should use a ForEach. This will make adding/removing cards easier and saves some code.
But what if I don't know the width of the container?
This is where GeometryReader comes in! You can use it to get the width of the container.
I just need to distribute views within the ZStack evenly
Once you get the width from the GeometryReader, you can just divide by the number of elements in the cards array to calculate each card's width.
struct Card {
var name: String
var color: Color
}
struct ContentView: View {
let cards = [
Card(name: "One", color: .blue),
Card(name: "Two", color: .red),
Card(name: "Three", color: .orange),
Card(name: "Four", color: .green)
]
var body: some View {
ZStack {
GeometryReader { proxy in
ForEach(cards.indices, id: \.self) { index in
let card = cards[index]
Text(card.name) /// add a bit of overlap
.frame(width: proxy.size.width / CGFloat(cards.count) + 10, height: 150, alignment: .topLeading)
.background(
card.color
.shadow(color: Color.black, radius: 5) /// make the overlap a bit more visible
)
.offset(x: proxy.size.width / CGFloat(cards.count) * CGFloat(index))
}
.frame(maxHeight: .infinity) /// center the cards vertically
}
}
}
}
Result:

Answer 2

try this:
create a function that returns x spacers (x for the number of text boxes that you want - 1) and inserts a Text view where you want it.
set the width to whatever you want it to be
have the text align to the left
replace all of the Text views in your code with this function
This should get the result you are looking for.