额外大小的GeometryReader

huangapple go评论75阅读模式
英文:

Extra size geometryReader

问题

我试图创建这个布局:

额外大小的GeometryReader

我希望我的矩形的高度与右侧的灰色文本完全相同。我使用了如下的 GeometryReader:

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()
                }
// 这是我尝试创建矩形的地方
                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

我正在寻找一些帮助,以了解 GeometryReader 究竟是如何工作的,以便实现我的视图。

英文:

I'm trying to make this layout:

额外大小的GeometryReader

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:

额外大小的GeometryReader

I'm looking for some help to understand how geometryReader really works, in order to achieve my view.

答案1

得分: 3

在这里不需要使用geometryReader。

VStack {
    // ...
    Spacer().layoutPriority(1)
}
// 这将把HStack中的所有视图推到屏幕的上半部分,并为HStack节省一些空间,同时防止出现长的垂直矩形。
.fixedSize(horizontal: false, vertical: true)
// 这将确保灰色文本部分具有正确的高度。
var body: some View {
    VStack {
        HStack(alignment: .top, spacing: 0) {
            Text("14:00")
                .padding(.top, 10)
                .padding(.trailing, 12)
            
            VStack(spacing: 0) {
                if false {
                    Text("hext").frame(width: 25, height: 25)
                } else {
                    Text("hext")
                }
                // 在这里我试图创建矩形
                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))
                    .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))
                    .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)
}
英文:

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

huangapple
  • 本文由 发表于 2020年1月3日 22:50:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/59580629.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定