Extra size geometryReader

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)

    }