SwiftUI Text Alignment Issue with Date and WidgetKit

Question

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?

6.6k

Posted by

brandonK212

Reply

Add a Comment

Answer 1

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

Posted by

Jax

Thank you for your reply, @Jax，Finding your answer helped me. I still don't understand what's going on

—
lord30590

Add a Comment

Answer 2

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!

Posted by

brandonK212

Add a Comment

Answer 3

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

works for me

Posted by

everettjf_

Add a Comment

Answer 4

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.

Posted by

darkpaw

Add a Comment

Answer 5

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.

Posted by

milan-lsn

Add a Comment

SwiftUI Text Alignment Issue with Date and WidgetKit

Replies