How to align text within a SwiftUI ZStack for smaller screen sizes?

Question

I'm attempting to align a Text view within a ZStack. It works fine for larger screens like the iphone 11 plus max but on smaller screens the text will go off screen if I use trailing or leading alignment like below. I get the same result on the preview, simulator and a real SE device.

iPhone SE (2nd gen) Screenshot showing misaligned text for photo attribution text.

import SwiftUI

struct ItemDetail: View {
    var item: MenuItem
    var body: some View {
        VStack {
            ZStack(alignment: .bottomTrailing) {
                Image(item.mainImage)
                Text("Photo: \(item.photoCredit)")
                    .padding(4)
                    .font(.caption)
                    .background(Color.black)
                    .foregroundColor(.white)
            }
            Text(item.description)
                .padding()
            Spacer()
        }
        .navigationBarTitle(Text(item.name), displayMode: .inline)
    }
}

score 4 · Accepted Answer · answered Oct 09 '20 at 11:32

I think your code is good, the problem is that your image is too wide and it's overflowing on the right side of the screen. The text label is aligning correctly to the trailing of the image (that's why it works on bigger devices), not to the trailing of the screen (what you want).

You should make sure your image doesn't overflow.

Image(item.mainImage)
   .resizable()
   .scaleToFit()

score 2 · Answer 2 · answered Oct 09 '20 at 11:08

2

I would use GeomteryReader. Just like that:

GeometryReader { geo in
      Text(item.description)          
      .fixedSize(horizontal: false, vertical: true)
      .frame(width: geo.size.width, alignment: .leading)
}

answered Oct 09 '20 at 11:08

belotserkovtsev

351
2
10

How to align text within a SwiftUI ZStack for smaller screen sizes?

2 Answers2