额外大小的geometryReader

Question

我正在试着做这样的布局：

​

​

我希望我的矩形和右边的灰色文本的高度完全一样。我像这样使用了Geometry reader：

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是如何工作的，以便实现我的观点。

Answer 1

你不需要在这里使用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.

和

   .fixedSize(horizontal: false, vertical: true)
 //This will guarantee the gray text part will have the correct height.

可以实现你想要的。

    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)

    }