Reputation: 689
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)
}
}
Upvotes: 9
Views: 19075
Reputation: 246
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")
}
}
Upvotes: 5
Reputation: 18914
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()
}
}
Upvotes: 16