Swift 超尺寸几何导引头

我正在尝试制作以下布局：

我希望矩形的高度与右侧的灰色文本的高度完全相同。我使用的几何读取器是这样的：

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)
    }

我可能错过了一些关于几何读取器的规则，但在我的例子中，它占用了很多空间，我现在看到我的布局如下：

---

我正在寻找一些帮助来了解geometryReader是如何工作的，以便实现我的观点。

您不需要在这里使用geometryReader

   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.

及

你可以实现你想要的

    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)

    }

---

是一篇关于GeometryReader的好文章，这是一个有趣的答案；你能对这件事做些评论吗？我想我能理解，但把它说清楚会有帮助。我做了修改：我删除了Spacer（）。layoutPriority（1）from to VStack，我给他添加了。fixedSize（水平：假，垂直：真）。谢谢你的帮助

    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)

    }