why HStack items not alignnment in SwiftUI?

Question

Created May ’21

Replies 3

Boosts 0

Views 2.8k

Participants 3

I have simple project in swiftUI, everythings is work, but
HStack for Rectangle() as I mention below, do not alignment the Rectangle and text at the same line, and idea will be appreciated.

Code Block struct App: View {
  var body: some View {
   
    GeometryReader{g in
      
      ZStack {
        ForEach(0..<data.count) { i in
          DrawShape(center: CGPoint(x:g.frame(in: .global).width/2, y: g.frame(in: .global).height/2), index: i)
        }
      
      }
    }
    .frame(height: 200)
    
    .clipShape(Circle())
    .shadow(radius: 10)
   
    VStack{
      ForEach(data) { i in
        HStack {
         
          Text(i.name)
            .frame(width:100)
            .padding()
          
          GeometryReader { g in
            HStack{
              Spacer(minLength: 0)
              Rectangle()
                .fill(i.color)
                .frame(width: self.getWidth(width: g.frame(in: .global).width, value: i.percent) ,height: 10)
               
              
              Text(String(format: "\(i.percent)", "%.0f"))
                .fontWeight(.bold)
                .padding(.leading,10)
                .frame(width:80)
               Spacer()
               
              
            }.frame(width: 240, height: 30)
            
             
          }
           
        }
         
      }
      .padding()
      Spacer()
    }
     
     
     
    }
  func getWidth(width: CGFloat, value: CGFloat) -> CGFloat {
    let temp = value / 100
    return temp * width
  }
}

Answered by MaelRB in 676438022

Hey, it might be what you’re trying to get.

HStack(alignment: .top) {
                        
                        Text(i.name)
                        
                        Spacer()                        

                        GeometryReader { geoProxy in

                            Rectangle()
                                .fill(i.color)
                                .frame(width: self.getWidth(width: geoProxy.frame(in: .global).width, value: i.percent) ,height: 10)
                                .offset(x: 0, y: 5) // Allows to put the rectangle on the same baseline as your text

                        }                      

                        Text(String(format: "\(i.percent)", "%.0f"))
                            .fontWeight(.bold)
                            .padding(.leading,10)

                    }

Boost

Answer 1

Claude31 OP

May ’21

We miss elements to test:

What is DrawShape ?
what are data ?

Could you tell very precisely what is not aligned ?

0

Answer 2

skysoft13 OP

May ’21

İtems inside of the Hstack, not align.

Code Block  HStack {
         
          Text(i.name)
            .frame(width:100)
            .padding()
          
          GeometryReader { g in
            HStack{
              Spacer(minLength: 0)
              Rectangle()
                .fill(i.color)
                .frame(width: self.getWidth(width: g.frame(in: .global).width, value: i.percent) ,height: 10)
               
              
              Text(String(format: "\(i.percent)", "%.0f"))
                .fontWeight(.bold)
                .padding(.leading,10)
                .frame(width:80)
               Spacer()
               
              
            }.frame(width: 240, height: 30)
            
             
          }
           
        }

Here, rest of the code

Code Block struct Pie: Identifiable {
  var id : Int
  var percent : CGFloat
  var name : String
  var color : Color
}
struct DrawShape: View {
  var center: CGPoint
  var index: Int
   
  var body: some View {
    Path {path in
      path.move(to: self.center)
      path.addArc(center: self.center, radius: 180, startAngle: .init(degrees: self.from()), endAngle: .init(degrees: self.to()), clockwise: false)
    }
    .fill(data[index].color)
  }
   
  func from () -> Double {
    if index == 0 {
      return 0
    }
    else {
      var temp: Double = 0
       
      for i in 0...index-1 {
        temp += Double(data[i].percent/100)*360
      }
      return temp
    }
    
  }
   
   
  func to() -> Double {
    var temp: Double = 0
    for i in 0...index {
      temp += Double(data[i].percent / 100) * 360
    }
    return temp
  
  }
}
var data = [
  Pie(id:0, percent: 10, name: "news", color: Color("Black")),
  Pie(id:1, percent: 90, name: "sport", color: Color("Blue"))
]

0

Answer 3

MaelRB OP

May ’21

Accepted Answer

Hey, it might be what you’re trying to get.

HStack(alignment: .top) {
                        
                        Text(i.name)
                        
                        Spacer()                        

                        GeometryReader { geoProxy in

                            Rectangle()
                                .fill(i.color)
                                .frame(width: self.getWidth(width: geoProxy.frame(in: .global).width, value: i.percent) ,height: 10)
                                .offset(x: 0, y: 5) // Allows to put the rectangle on the same baseline as your text

                        }                      

                        Text(String(format: "\(i.percent)", "%.0f"))
                            .fontWeight(.bold)
                            .padding(.leading,10)

                    }

1