How can I get a SwiftUI Text view that goes beyond the screen bounds to align to leading edge?

Question

I'm trying this:

import SwiftUI

struct LeftToRight: View {
    var body: some View {
        ZStack(alignment: .leading) {
            Color.black
            
            Text("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
                .font(.system(size: 450))
                .fixedSize(horizontal: true, vertical: false)
                .foregroundColor(Color.pink)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct LeftToRight_Previews: PreviewProvider {
    static var previews: some View {
        LeftToRight()
    }
}

But the ZStack alignment is having no effect - the Text view center aligns (see screenshot).

I tried .leading alignment guides on the Text view itself, also to no effect.

So how can I align this Text view so that no matter how big it gets, it starts at the left edge and grows out past the right edge?

Answer 1

Here is a safe solution - taking text frame natural (as it is by itself) just put it into overlay of container with explicit alignment

Tested with Xcode 12 / iOS 14

var body: some View {
    ZStack(alignment: .leading) {
        Color.black
    }
    .edgesIgnoringSafeArea(.all)
    .overlay(
        Text("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
            .font(.system(size: 45))
            .foregroundColor(Color.pink)
            .fixedSize(horizontal: true, vertical: false)
    , alignment: .leading)                                  // here !!
}

Answer 2

Here is a possible solution:

struct LeftToRight: View {
    var body: some View {
        ZStack(alignment: .leading) {
            Color.black

            Text("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
                .font(.system(size: 45))
                .foregroundColor(Color.pink)
                .fixedSize(horizontal: true, vertical: false)
                .frame(width: 0, alignment: .leading) // <- add here
        }
        .edgesIgnoringSafeArea(.all)
    }
}

I noticed that the alignment parameter in the .frame modifier is only applied when the width is specified as well. It doesn't matter what value (that's why it's 0) as there already is .fixedSize(horizontal: true, ...). If you don't like it to be set to 0 you can easily specify some other safer value (eg. 100).