SwiftUI - Center Align View With respect to another view which is in HStack

Question

I have a view as show in the below image

Segments will be dynamic, so i have followed loop mechanism

HStack {

   for() {

      VStack {

         HStack {
             Image
             Line View/. Don't show for last item
            }
         Text
      }
  }
}

I have tried with alignmentGuide and resulting the below image

Answer 1

Getting Text, Circles and lines aligned is trickier than I expected. I only made it with some hard-coded values, but at least it is flexible to some extent.

struct Step: Identifiable {
    var id: Int
    var name: String
    var completed: Bool = false
}


struct OrderStateView: View {
    
    var steps: [Step]
    
    var body: some View {
        ZStack {
            
            // circles
            HStack(spacing: 0) {
                Spacer()
                ForEach(steps.indices) { index in
                    let completed = steps[index].completed
                    
                    Image(systemName: completed ?
                          "checkmark.circle.fill" : "circle")
                        .font(.title2)
                        .foregroundColor(completed ? .green : .gray)
                    
                        .overlay {
                            Text(steps[index].name)
                                .font(.caption)
                                .multilineTextAlignment(.center)
                                .offset(x: 0, y: 35)
                                .frame(minWidth: 70, minHeight: 50)
                            
                        }
                    if index < steps.count-1 {
                        if steps[index+1].completed {
                            Color.green
                                .frame(height: 1)
                        } else {
                            Color.gray
                                .frame(height: 1)
                        }
                    }
                }
            }
            Spacer()
        }
        .padding(.bottom, 35)
   }
}


// example usage
struct ContentView: View {
    
    @State private var steps = [
        Step(id: 0, name: "Customer Details"),
        Step(id: 1, name: "Order Type"),
        Step(id: 2, name: "Add Products"),
        Step(id: 3, name: "Order")
    ]

    @State private var step = 0
    
    var body: some View {
        VStack {
            Text("Your Order State")
                .padding()
            
            OrderStateView(steps: steps)
            
            Button("Continue") {
                steps[step].completed = true
                if step < steps.count-1 {
                    step += 1
                }
            }
            .buttonStyle(.bordered)
            .padding()
        }
        .padding()
    }
}