Search code examples
uiscrollviewswiftui

Align text as leading in ScrollView - SWIFTUI

I have a ScrollView:

    ScrollView {
        VStack (alignment: .leading) {
            Text("\(userData.username), \(userData.age)")
                .fontWeight(.semibold)
                .font(Font.system(size:30))
        }
    }

The output is:

enter image description here

I tried flipping the Stack and having the scroll view inside, but I get the same result.

The work around I have is to put it in a HStack and add a Spacer()

HStack {
         Text("\(userData.username), \(userData.age)")
             .fontWeight(.semibold)
             .font(Font.system(size:30))
             .padding([.leading])
         Spacer()
}

This does the trick but I dont think this is the ideal way. Is this the only way? or is there a better solution to align text vertically in a scrollview?

Solution

  • By default stack container is tight to content, so alignment has no effect.

    Here is possible solution

    ScrollView {
    VStack (alignment: .leading) {
        Text("\(userData.username), \(userData.age)")
            .fontWeight(.semibold)
            .font(Font.system(size:30))
    }.frame(maxWidth: .infinity, alignment: .leading) // << make screen-wide !!
}