Extra size geometryReader - swift

Question

I'm trying to make this layout:
I want that my rectangle have exactly the same height as my grey text at the right. I used Geometry reader like that:
var body: some View {
HStack(alignment: .top, spacing:0){
Text("14:00")
.modifier(DateSurveyListModifier(fontSize: 14, isSelected: occurrence.isCompleted))
.foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.padding(.top,10)
.padding(.trailing,12)
VStack(spacing:0){
if occurrence.isCompleted
{
pinSurveyHighlighted().frame(width:25,height:25)
}
else
{
pinSurveyHighlighted()
}
// Where I'm trying to make the rectangle
GeometryReader{ geo in
Rectangle().foregroundColor(.HomeMainBlue).frame(width:3,height: geo.size.height)
}.aspectRatio(contentMode: .fit)
}
.padding(.top,5)
VStack(alignment: .leading ,spacing:0){
Text("Lorem ipsum dolor sit dolor dolor dolor dolor dolor dolor dolor dolor dolor dolor")
.multilineTextAlignment(.leading)
.modifier(TitleSurveyListModifier(fontSize : 15 ,isSelected: occurrence.isCompleted))
.foregroundColor(occurrence.isCompleted ? .HomeGreySurveyList : .HomeSecondGrey )
.frame(alignment: .leading)
Text("lit. Aliquam quis consectetu consectet consectetu consectetu consectetu consectetuconsectetu consectetu consectetu consectetu consectetu consectetu consectetu consectetu v consectetuuconsectetu ")
.modifier(DateSurveyListModifier(fontSize : 14 , isSelected: occurrence.isCompleted))
.foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.multilineTextAlignment(.leading)
.frame(alignment: .leading)
.padding(.top,5)
}
.padding(.leading,15)
Spacer()
}
.padding(.top,15)
.padding(.horizontal,37)
}
I've probably missed some rules about Geometry reader but in my case it's taking so much space, I my layout look like this now:
I'm looking for some help to understand how geometryReader really works, in order to achieve my view.

Answer 1

You don't need to use geometryReader here.
VStack{ ...
Spacer().layoutPriority(1) }
//This will push all views in the `HStack` to the top half of the screen and saving some place for `HStack` while preventing the long vertical rectangle from appearing.
and
.fixedSize(horizontal: false, vertical: true)
//This will guarantee the gray text part will have the correct height.
can achieve what you want.
var body: some View {
VStack{
HStack(alignment: .top, spacing:0){
Text("14:00")
//.modifier(DateSurveyListModifier(fontSize: 14, isSelected: occurrence.isCompleted))
// .foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.padding(.top,10)
.padding(.trailing,12)
VStack(spacing:0){
if false
{
Text("hext").frame(width:25,height:25)
}
else
{
Text("hext")
}
// Where I'm trying to make the rectangle
Rectangle() .foregroundColor(.red).frame(width: 3)
}.padding(.top,5 )
VStack(alignment: .leading ,spacing:0){
Text("Lorem ipsum dolor sit dolor dolor dolor dolor dolor dolor dolor dolor dolor dolor")
.multilineTextAlignment(.leading)
.font(Font.system(size: 15))
// .modifier(TitleSurveyListModifier(fontSize : 15 ,isSelected: occurrence.isCompleted))
// .foregroundColor(occurrence.isCompleted ? .HomeGreySurveyList : .HomeSecondGrey )
.frame(alignment: .leading)
Text("lit. Aliquam quis consectetu consectet consectetu consectetu consectetu consectetuconsectetu consectetu consectetu consectetu consectetu consectetu consectetu consectetu v consectetuuconsectetu ")
.font(Font.system(size: 14))
// .modifier(DateSurveyListModifier(fontSize : 14 , isSelected: occurrence.isCompleted))
// .foregroundColor(occurrence.isCompleted ? .HomeMainGrey : .HomeSecondGrey )
.multilineTextAlignment(.leading)
.frame(alignment: .leading)
.padding(.top,5)
}.padding(.leading,15).fixedSize(horizontal: false, vertical: true)
Spacer()
}
Spacer().layoutPriority(1)
}
.padding(.top,15)
.padding(.horizontal,37)
}