SwiftUI Aligning VStack/HStacks into a table

Question

I'm trying to align all of the dividers to create a consistent table view, but I'm having trouble getting all of the dividers to line up. Ideally, even the header row would have the dividers line up with the list - but it's crucial for them to align so that the header row can act as a key for the data.

import SwiftUI

struct TableView: View {
    var teamNames = ["Sporting Kansas City", "Real Salt Lake", "Colorado Rapids", "Minnesota United"]
    
    var teamMP = ["2", "2", "2", "2"]
    
    var teamWins = ["2", "1", "0", "1"]
    var teamDraws = ["0", "1", "1", "1"]
    var teamLosses = ["0", "0", "1", "0"]
    
    var body: some View {
        return VStack() {
            HStack(spacing: 10) {
                Text("Club")
                    .padding(.leading)
                    .frame(width: 210.0, alignment: .leading)
                Spacer()
                Text("MP")
                Divider()
                    .frame(height: 20.0)
                Text("W")
                Divider()
                    .frame(height: 20.0)
                Text("D")
                Divider()
                    .frame(height: 20.0)
                Text("L")
                    .padding(.trailing)
            }
                .font(.subheadline)
                .foregroundColor(.gray)
            
            List(teamNames.indices) { i in
                Text("\(i+1)")
                Image("second")
                HStack(spacing: 10) {
                    Text("\(self.teamNames[i])")
                        .frame(width: 170.0, alignment: .leading)
                    Spacer()
                        .frame(width: 25.0)
                    Text("\(self.teamMP[i])")
                        .frame(width: 12) // replace 12 with any value for the exact result you're expecting
                    Divider()
                    Text("\(self.teamWins[i])")
                        .frame(width: 12) // doesn't have to match the above Text's width either could be any value and would still work
                    Divider()
                    Text("\(self.teamDraws[i])")
                        .frame(width: 12)
                    Divider()
                    Text("\(self.teamLosses[i])")
                        .frame(width: 12)
                }
            }
        }
    }
}

struct TableView_Previews: PreviewProvider {
    static var previews: some View {
        TableView()
    }
}

Answer 1

Give a constant .frame(width:) for the trailing Text s.

HStack(spacing: 10) {
    Text("\(self.teamNames[i])")
        .frame(width: 170.0, alignment: .leading)
    Spacer()
        .frame(width: 25.0)
    Text("\(self.teamMP[i])")
        .frame(width: 12) // replace 12 with any value for the exact result you're expecting
    Divider()
    Text("\(self.teamWins[i])")
        .frame(width: 12) // doesn't have to match the above Text's width either could be any value and would still work
    Divider()
    Text("\(self.teamDraws[i])")
        .frame(width: 12)
    Divider()
    Text("\(self.teamLosses[i])")
        .frame(width: 12)
}