如何在 SwiftUI 中的形状之间画一条线？

Question

我在 ScrollView 中有 HStacks，在 HStacks 中有圆圈和文本。我怎么能在圆圈之间画一条线？（这是公交路线）

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

Answer 1

为单元格创建一个结构（在您的代码中为 HStack）。

// 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: [=10=] == 1) // isLast for not showing last line in last cell
                }
            }
        }.padding()
    }
}

Answer 2

Raja 的答案的一个变体是使用 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")
    }
}

如何在 SwiftUI 中的形状之间画一条线？

How can I draw a line between Shapes in SwiftUI?

iphone

ios

swift

swiftui