VStack content is centered instead of aligned left

Question

I would like to left-align the content of a VStack instead of centering it, but I don't know how to do it. Here is my code:

struct SortRow: View {
    var sortType: SortType
    @AppStorage(sortKey) var currentSorting: SortType = .winOrLoss
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text(sortType.name)
                .multilineTextAlignment(.leading)
                .font(.system(size: 15.0))
                .foregroundColor(Color(sortType == currentSorting ? UIColor.white : UIColor.systemGray2))
            Text(sortType.detail)
                .multilineTextAlignment(.leading)
                .font(.system(size: 13.0))
                .foregroundColor(Color(sortType == currentSorting ? UIColor.white : UIColor.systemGray))
        }
        .frame(maxWidth: .infinity)
        .padding(12)
        .background(Color(sortType == currentSorting ? UIColor.systemGreen : UIColor.systemBackground))
    }
}

What I get:

Why is there this left and right padding that centers the text content?

Thank you for your help

score 12 · Accepted Answer · answered Nov 14 '21 at 22:15

The frame modifier that you have on the VStack needs an alignment as well:

struct SortRow: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Win or loss")
                .multilineTextAlignment(.leading)
                .font(.system(size: 15.0))
                .foregroundColor(.white)
            Text("Sort by how much money has been won or lost")
                .multilineTextAlignment(.leading)
                .font(.system(size: 13.0))
                .foregroundColor(.white)
        }
        .frame(maxWidth: .infinity, alignment: .leading) //<-- Here
        .padding(12)
        .background(Color(uiColor: UIColor.systemGreen))
    }
}

@whitneyland - one speaks to the alignment within the vstack while the other speaks of the alignment of vstack itself. Your content can be centered aligned within a left aligned vstack and your content can be left aligned within a center aligned vstack, as an example. — C6Silver, Mar 23 '23 at 03:09

VStack content is centered instead of aligned left

1 Answers1