I'm looking to create a grid of square cells. Each square cell will have a 'large' text label in the center and a 'small' textLabel in the bottom left corner.
I feel like the pseudo code would look something like:
ZStack {
Text("3", horizontalAlignment: .center, verticalAlignment: .center)
.font(.title)
Text("1,2,4", horizontalAlignment: .leading, verticalAlignment: .bottom)
.font(.caption)
}
.border(Color.black, width: 2.0)
There would be several rows and several columns of these cells. Their size would then be derived by the number of rows/columns and the available screen space.
I've written some code that approximates what I'm going for, but it is using specific frame dimensions.
I would prefer to not need specific width/height numbers.
struct ContentView: View {
var body: some View {
ZStack() {
Rectangle()
.fill(Color.clear)
.border(Color.black, width: 2.0)
.frame(width: 100, height: 100)
Text("4")
.font(.title)
Text("x")
.alignmentGuide(HorizontalAlignment.center) { d in
return 45
}
.alignmentGuide(VerticalAlignment.center) { d in
return -30
}
.font(.caption)
}
}
}
Grateful for any/all help,
Mike