SwiftUI Text Behavior

Question

I am seeing some odd Text field behavior on my device that I did not see in the simulator. I have a standard grouping of text fields within a VStack that call from an @ObservedObject variable, like follows:

    @ObservedObject var timer: ActivityTimer

    var body: some View {
        VStack {
            VStack {
                Text(timer.currentCountdownString).font(Font.system(size: 90))
                Text(timer.currentActivityName).font(.largeTitle).bold().underline().padding(.bottom, 5)
                Text(timer.currentIncline).font(.title)
            }
            .padding()
            .cornerRadius(10)

        }

When the variable changes I see the text field change on the device but every so often the output is truncated into ..., please see below. Thank you in advance for your assistance.

This is likely a bug in SwiftUI itself, and I recommend using Feedback Assistant to report it. — Rob Napier, Dec 17 '19 at 13:32

score 1 · Accepted Answer · answered Dec 17 '19 at 16:16

1

I ran into this issue on rotation to landscape (even though there was more horizontal room.) The way I fixed it was to call .fixedSize() on the Text.

Text(timer.currentActivityName)
  .font(.largeTitle)
  .bold()
  .underline()
  .fixedSize()
  .padding(.bottom, 5)

Make sure to do your fixedSize call after setting weight, font, etc. but before your padding.

answered Dec 17 '19 at 16:16

Procrastin8

4,193
12
25

This looks to have done it! Thank you! Oddly, when I remove the .padding on the Text itself, the entire problem goes away without the need for .fixedSize(). – akes406 Dec 17 '19 at 16:23

score 0 · Answer 2 · edited Dec 17 '19 at 14:37

Could be a bug as mentioned in your post comment, but for the time being, you could wrap the VStacks in a GeometryReader and then set the width of the frames for all three Text objects to be the width of the geometry and set the alignment of your VStack to center as such:

@ObservedObject var timer: ActivityTimer
    var body: some View {
        GeometryReader { geom in
        VStack {
            VStack(alignment: .center) {
                Text(timer.currentCountdownString).font(Font.system(size: 90))
                Text(timer.currentActivityName).font(.largeTitle).bold().underline().padding(.bottom, 5)
                Text(timer.currentIncline).font(.title)
            }
            .frame(width: geom.size.width)
            .padding()
            .cornerRadius(10)
        }
    }

Thanks for the suggestion! Unfortunately, I am still seeing the behavior even when wrapped in the GeometryReader like the above. — akes406, Dec 17 '19 at 16:04

SwiftUI Text Behavior

2 Answers2

Linked