I found an alternative solution which is not so elegant like the one using Grid
, but its working nevertheless and I want to document it here.
ScrollView {
VStack(alignment: .leading) {
HStack {
VStack(alignment: .leading) {
Text("Title")
Text("Not AI")
Text("10.5.2020").foregroundStyle(.clear)
}
.padding(16)
.background(Color.blue)
.overlay(alignment: .bottomTrailing) {
Text("10.5.2020")
.padding(EdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 16))
}
Spacer(minLength: 50)
}
HStack {
VStack(alignment: .leading) {
Text("left")
Text("The quick brown fox jumps over the lazy dog>")
Text("10.5.2020").foregroundStyle(.clear)
}
.padding(16)
.background(Color.blue)
.overlay(alignment: .bottomTrailing) {
Text("10.5.2020")
.padding(EdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 16))
}
Spacer(minLength: 50)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.border(.red)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.gray.opacity(0.5))
In this approach I am using overlays with bottomTrailing
alignment to add the date text.
Note that I keep the date text in the original VStack
to occupy the Space in the there. With the foregroundStyle = .clear
I am hiding that spacer text so its not shown in UI.
The downside of this approach is, that it really only works when you want to add your label in the bottom right corner.