SwiftUI Text Alignment Issue with Date and WidgetKit

Question

brandonK212 OP

Created Oct ’20

Replies 5

Boosts 4

Views 7.3k

Participants 6

I am attempting to set up a Text property that shows a "timer" based countdown. My code is like so;

Code Block VStack {
   Text(Date().addingTimeInterval(600), style: .relative)
}

When I preview this code in a traditional SwiftUI view, the code appears as expected; in the middle of the canvas (as there are no vertical or horizontal spacers).

Conversely, when I attempt to use the same code within a Widget, I find that the text is pushed all the way to the left side of the canvas, with no particular reason. Due to this, I have no way of centering the text. My only success in centering the text has been to embed in a HStack with multiple spacers;

Code Block HStack {
    Spacer()
    Spacer()
    Spacer()
    Spacer()
    Text(Date().addingTimeInterval(600), style: .relative)
}

Is there any particular reason this would be the case? I've not found any documentation indicating that the manner in which WidgetKit views render Text would be any different than traditional SwiftUI views?

Boost

Answer 1

Jax OP

Oct ’20

I am having the same problem. Any time I use style: .relative it left justifies the text. Have you found a solution?

EDIT: I randomly stumbled upon a solution. Using a Stack with .multilineTextAlignment(.center) seems to work for some reason.

Code Block HStack(alignment: .center, spacing:0) {
	Text(mostRecentObsDate, style: .relative) 				   
	.multilineTextAlignment(.center)
}

3

Answer 2

brandonK212 OP

Oct ’20

Thank you for your reply, @Jax. That was a great piece of advice. I will file feedback on this, as I do not believe the Text alignment in WidgetKit is behaving as expected. That said, your suggestion worked properly. Subsequently, I was able to find the ideal experience even without setting the HStack's alignment and spacing;

Code Block HStack {
   Text(Date().addingTimeInterval(600), style: .offset)
     .multilineTextAlignment(.center)
}

You may have that in there for your particular design needs, but wanted to comment. This is great, thanks!

1

Answer 3

everettjf_ OP

Mar ’21

VStack{
Text(date ,style: dateStyle)
.multilineTextAlignment(.center)
}

works for me

0

Answer 4

darkpaw OP

Aug ’22

I realise this is an old post, but I recently had to do this myself, and I figure this solution is pretty useful (Swift 5, Xcode 14b5).

I had an HStack and two Text views within. The second one was a timer:

HStack {
    Text("ABC")
    Text.init(myDate, style: .timer)
        .multilineTextAlignment(.center)
}

No matter what I tried with alignments, padding, frames etc., I couldn't get it work; I got the Text view on the left and the Text.init centred in whatever space remained on the right.

But, if you put a Text.init inside a Text view, it seems to work:

HStack {
    Text("ABC... \(Text.init(myDate, style: .timer))")
        .multilineTextAlignment(.center)
}

Both the ABC text and the timer are now centred.

2

Answer 5

milan-lsn OP

Jan ’23

Thank you @Jax for your reply. I had the same issue with a .timer Style in a Live Activity. Your workaround also works in this context. I also found that the Text View's frame expands way beyond the actual text. I don't think this is expected behaviour and will also file a feedback.

0