SwiftUI: Align subviews one by one from different stacks - swiftui

Question

I would like to align the views of two HStacks one by one. This means:
The first text of the first stack is aligned with the first text of the second stack.
The second text of the first stack is aligned with the second text of the second stack.
The third text of the first stack is aligned with the third text of the second stack.
I need to have the two HStacks, because I have to apply styling to the them horizontally.
I have tried using layout guides, but it will just align each whole HStack to the layout guide, so it does not work in my case.
Playground screenshot:
Playground code:
import SwiftUI
struct ContentView: View {
let alignmentGuide = HorizontalAlignment(
HorizontalAlignment.CustomAlignment.self
)
var body: some View {
VStack(alignment: self.alignmentGuide, spacing: 20) {
topHstack
.background(Color.gray)
bottomHstack
.background(Color.gray)
}
}
var topHstack: some View {
HStack {
Text("1 top")
.alignmentGuide(self.alignmentGuide) { $0[.leading] }
Text("2 top")
Text("3 top")
}
}
var bottomHstack: some View {
HStack {
Text("1 bottom")
.alignmentGuide(self.alignmentGuide) { $0[.leading] }
Text("2 bottom")
Text("3 bottom")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
extension HorizontalAlignment {
struct CustomAlignment: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
context[HorizontalAlignment.leading]
}
}
}
Thanks in advance
Edit:
I can use a LazyVGrid to fix the alignment, but then I can not style the rows.
var body: some View {
LazyVGrid(columns: [GridItem(.flexible()),GridItem(.flexible()),GridItem(.flexible())], alignment: .leading) {
Text("1 top")
.alignmentGuide(self.alignmentGuide) { $0[.leading]}
Text("2 top")
Text("3 top")
Text("1 bottom")
.alignmentGuide(self.alignmentGuide) { $0[.leading] }
Text("2 bottom")
.alignmentGuide(.leading) { $0[.leading] + 20 }
Text("3 bottom")
}.frame(maxWidth: .infinity)
}

Answer 1

I have ended up using a grid and a background view to style the first row, since this is all that I needed.
In case one has a dynamic number of rows, calculating the frames for the background view might become trickier, but I have not found another way of doing it.
import SwiftUI
struct ContentView: View {
#State private var heightOverlay = 0.0
var body: some View {
LazyVGrid(columns: [GridItem(.flexible()),GridItem(.flexible()),GridItem(.flexible())], alignment: .leading) {
Group {
Text("1 top")
Text("2 top")
Text("3 top")
}
.padding(.vertical, 10)
.background(GeometryReader { reader in
Color.clear.preference(key: HeightPreferenceKey.self, value: reader.size.height)
})
Text("1 bottom")
Text("2 bottom")
Text("3 bottom")
}.frame(maxWidth: .infinity)
.onPreferenceChange(HeightPreferenceKey.self) { preference in
self.heightOverlay = preference
}
.padding(.horizontal, 20)
.background(Color.red.frame(height: self.heightOverlay), alignment: .top)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct HeightPreferenceKey: PreferenceKey {
static var defaultValue: CGFloat = .zero
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = max(value, nextValue())
}
}

Answer 2

If it is not oversimplified example of real code in the question, then a possible solution can be quite simple - just simulate some kind of regular grid inside HStack (yes, it is limited, but sometimes be enough, and even correct behaves with .fixedSize)
Tested with Xcode 13.4 / iOS 15.5
extension Text {
func wideLeading() -> some View {
self.frame(maxWidth: .infinity, alignment: .leading)
}
}
struct ContentView: View {
var body: some View {
VStack(spacing: 20) {
topHstack
.background(Color.gray)
bottomHstack
.background(Color.gray)
}
.padding(.horizontal, 20)
}
var topHstack: some View {
HStack {
Text("1 top").wideLeading()
Text("2 top").wideLeading()
Text("3 top").wideLeading()
}
}
var bottomHstack: some View {
HStack {
Text("1 bottom").wideLeading()
Text("2 bottom").wideLeading()
Text("3 bottom").wideLeading()
}
}
}