SwiftUI equal distribution with content alignment - swiftui

Question

I want to have three labels each with a subtitle and distributed equally.
The 1st title/subtitle should be leading aligned (see green border below)
The center title/subtitle should centered (see blue border below)
The last title/subtitle should be trailing aligned. (see red border below)
They all should take as much width as they can as long as they are equal width
This is a Sketch of what I need:
and this is the SwiftUI view that I can up with
The issue is that I cannot align the titles as needed.
Here is my current non working code
import SwiftUI
struct MyView: View {
public var body: some View {
HStack(spacing: 0) {
cellView(top: "Leading",
bottom: "subtitle",
alignment: .leading)
.border(Color.green)
cellView(top: "Centered",
bottom: "subtitle",
alignment: .center)
.border(Color.blue)
cellView(top: "Trailing",
bottom: "subtitle",
alignment: .trailing)
.border(Color.red)
}
.padding()
}
private func cellView(top: String, bottom: String, alignment: HorizontalAlignment) -> some View {
VStack(alignment: alignment, spacing: 0) {
Text(top)
.frame(maxWidth: .infinity)
.font(.subheadline)
.lineLimit(1)
.border(Color.black)
Text(bottom)
.font(.subheadline)
.lineLimit(1)
.border(Color.black)
}
.border(Color.black)
}
}
struct MyView_Previews: PreviewProvider {
static var previews: some View {
MyView()
}
}

Answer 1

Instead of trying to align your stack's subviews, you can make them all prefer expansion and then directly align the content of their frame (note that since alignment options match between HorizontalAlignment & Alignment you don't need to change something in your body):
private func cellView(top: String, bottom: String, alignment: Alignment) -> some View {
VStack(spacing: 0) {
Text(top)
.frame(maxWidth: .infinity, alignment: alignment)
.font(.subheadline)
.lineLimit(1)
.border(Color.black)
Text(bottom)
.frame(maxWidth: .infinity, alignment: alignment)
.font(.subheadline)
.lineLimit(1)
.border(Color.black)
}
.border(Color.black)
}
which produces the desired result
PS: You can even simplify your cellView by grouping common modifiers:
private func cellView(top: String, bottom: String, alignment: Alignment) -> some View {
VStack(spacing: 0) {
Group {
Text(top)
.font(.subheadline)
Text(bottom)
.font(.subheadline)
}
.frame(maxWidth: .infinity, alignment: alignment)
.lineLimit(1)
.border(Color.black)
}
.border(Color.black)
}

Answer 2

The above can be achieved using the LazyVGrid.
import SwiftUI
struct AlignmentView: View {
var body: some View {
MyView()
}
}
struct aqiItem {
let aqi: Int
let color: Color
}
struct MyView: View {
let columns = [
GridItem(.adaptive(minimum: 80))
]
var body: some View {
LazyVGrid(
columns: [
GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())
],
alignment: .center,
spacing: 10,
pinnedViews: [],
content: {
cellView(top: "Leading",
bottom: "subtitle",
alignment: .leading)
.border(Color.green)
cellView(top: "Centered",
bottom: "subtitle",
alignment: .center)
.border(Color.blue)
cellView(top: "Trailing",
bottom: "subtitle",
alignment: .trailing)
.border(Color.red)
})
}
}
private func cellView(top: String, bottom: String, alignment: Alignment) -> some View {
VStack(spacing: 0) {
Group {
Text(top)
.font(.subheadline)
Text(bottom)
.font(.subheadline)
}
.frame(maxWidth: .infinity, alignment: alignment)
.lineLimit(1)
.border(Color.black)
}
.border(Color.black)
}
struct MyView_Previews: PreviewProvider {
static var previews: some View {
AlignmentView()
.previewDevice("iPhone 8")
}
}