How can I draw a line between Shapes in SwiftUI?

Question

I have HStacks in a ScrollView, and in the HStacks there are circles and texts. How could I draw a line between the circles? (It's a bus's route)

ForEach(stations, id: \.id) { station in
                
                HStack{
                    Spacer().frame(width: 20)
                    Circle()
                        .stroke(Color.black,lineWidth: 4)
                        .frame(width: 10, height: 10)
                    Spacer().frame(width: 20)
                    
                    Text(station.name)
                    
                    Spacer()
                    
                    if station.id > 0 {
                        Text(String(station.id))
                    }
                    
                    
                    let time = getNextDepartureTime(id: station.id)
                    
                    Text("\(time.hour):\(time.minute)")
                    
                    Spacer().frame(width: 20)
                    
                }
                
            }

user_14733292 · Answer

Create one struct for cell (which is HStack in your code).

// Content HStack cell view
struct ContentCellView: View {
    var isLast: Bool = false
    var body: some View {
        VStack(alignment: HorizontalAlignment.leading, spacing: 0) {
            HStack {
                Image(systemName: "message.circle").frame(width: 30)
                Text("Route")
                Spacer()
                Text("Time")
            }
            if !isLast {
                Rectangle().fill(Color.blue).frame(width: 1, height: 14, alignment: .center).padding(.leading, 15.5)//.offset(y: -10)
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        ScrollView{
            VStack(spacing: 0){
                ForEach((1...10).reversed(), id: \.self) {
                    ContentCellView(isLast: $0 == 1) // isLast for not showing last line in last cell
                }
            }
        }.padding()
    }
}

user_1117930 · Answer

A variation on the answer by Raja would be to use ZStack...

ZStack {
    HStack {
        Rectangle().frame(width: 2, height: 22, alignment: .center).padding(.leading, 9)
        Spacer()
    }
    HStack {
        Image(systemName: "message.circle")
        Text("Route")
        Spacer()
        Text("Time")
    }
}

How can I draw a line between Shapes in SwiftUI?

2 Answers