CODEWITHSUNDEEP
textswiftuialignment
codewithfeeling
codewithfeeling

Reputation: 6576

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

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).

Screenshot showing the Text view aligned in the center

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?

Upvotes: 0

Views: 1778

Answers (2)

pawello2222
pawello2222

Reputation: 54486

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).

Upvotes: 0

Asperi
Asperi

Reputation: 257711

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 !!
}

Upvotes: 1

Related Questions