时间轴优化版

TimelineDemo.swift

struct TimelineDemo: View {
    var body: some View {
        ScrollView{
            VStack(spacing: 0){
                TimelineItemView(first: true)
                ForEach(0..<10){_ in
                    TimelineItemView()
                }
                TimelineItemView(last: true)
            }
            .padding()
        }
        .navigationTitle("时间轴")
    }
}


struct TimelineItemView: View {
    
    var first:Bool = false
    var last:Bool = false
    
    var body: some View{
        VStack(alignment: .leading){
            
            HStack(alignment:.top) {
                
                VStack(spacing: 0) {
                    if first {
                        Color.clear
                            .frame(width: 5)
                    } else {
                        Color.black
                            .frame(width: 5)
                    }
                    
                    Color.blue
                        .frame(width:20,height: 20)
                        .clipShape(Circle())
                
                    
                    if last {
                        Color.clear
                            .frame(width: 5)
                    } else {
                        Color.black
                            .frame(width: 5)
                    }
                    
                }
                .foregroundColor(.white)
                
                VStack(alignment: .leading){
                    Text("Demo Title")
                        .font(.title)
                        .frame(height: 50)
                    
                    Text(String(repeating: "测试", count: Int.random(in: 1..<50)))
                        .font(.body)
                        .frame(maxWidth: .infinity,alignment: .leading)
                        
                }
                .padding(4)
                .background(.gray.opacity(0.2))
                .clipShape(RoundedRectangle(cornerRadius: 8))
                .padding(.vertical,4)
            }
            .fixedSize(horizontal: false, vertical: true)
            .redacted(reason: .placeholder)
        }
    }
}