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

Ptit Xav
– Ptit Xav

2022-02-17 19:41:43 +00:00
Commented Feb 17, 2022 at 19:41 — Ptit Xav
– Ptit Xav, Commented Feb 17, 2022 at 19:41

Ae Ri · Accepted Answer · 2022-03-05 02:59:27Z

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.

Collectives™ on Stack Overflow

Prevent overflow of Element in ZStack SwiftUI

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related