Prevent overflow of Element in ZStack SwiftUI

Question

I have an arrangement like this for a Horizontal Progress bar in SwiftUI

    ZStack {
    // UI Content
    HStack{
    Text("")
    .frame (width:300)
    }
}

The problem is text will move outside the ZStack when it is at the extreme right or left.

This is what I am trying to achieve (2nd image)

Any solution to achieve this?

Did you read [this post](https://stackoverflow.com/questions/56443535/swiftui-text-alignment) — Ptit Xav, Feb 17 '22 at 19:41

score 0 · Accepted Answer · answered Mar 05 '22 at 02:59

I solved this solution using the alignment property. Idk whether this is the correct solution or a workaround.

First I made the Stack that contains the text to take the entire width of its parent.

Since the parent element was made using a ForEach, the text will be only displayed in some indices of List.

and I created a function like this

func textAlignment (currentIndex: int, totalIndex:Int) -> Alignment {

if (currentIndex == 0){
return Alignment.leading
}
if (currentIndex == totalIndex-1){
return Alignment.trailing
}
return Alignment.center
}

and I added this to Text stack using .frame(alignment: textAlignment ()) property.

Prevent overflow of Element in ZStack SwiftUI

1 Answers1