WidgetKit: .timer Text style expands it to fill the width, instead of taking space to fit the contained string

Question

.timer Text style expands it to fill the width, instead of taking space to fit the contained string. Is there a way to change this behavior?

Text(entry.timeFinished, style: .timer).multilineTextAlignment(.leading).opacity(0.5).background(Color.red)

Text("3:41").opacity(0.5).background(Color.blue)

Entire View:

struct TimePieceWidgetEntryView: View {
    
    var entry: Provider.Entry
    
    var body: some View {
        VStack {
            Text("Timer ⏱")
            Text(Date().addingTimeInterval(600), style: .timer).opacity(0.5)
        }.font(.title.bold().monospacedDigit())
        .padding(5)
        .widgetURL(entry.url)
    }
    
}

Add your `body` code. By what you provided now, it works correctly if copied and pasted in the body as a standalone component. — Tomas Jablonskis, Feb 15 '21 at 15:36
It works correctly with both of your examples and with your provided body... Create new project and paste your body inside of clean `ContentView`, you will see. — Tomas Jablonskis, Feb 15 '21 at 16:17
Provide `body` of the view which is using `TimePieceWidgetEntryView ` — Tomas Jablonskis, Feb 15 '21 at 16:21
@TomasJablonskis it does indeed behave as expected inside of an app, but not in a widget. — Alexey Primechaev, Feb 15 '21 at 16:35
try to create formatted instead of style: https://stackoverflow.com/a/63950738/14733292 — Raja Kishan, Feb 15 '21 at 17:03
Having same issue in live activity in Dynamic Island just taking all the space... — Jared_M, Jun 11 '23 at 12:46

datinc · Answer 1 · 2023-08-09T22:44:57.247

I have zero insight into how Apple is building Live Activities and widgets. My guess is that the widget is rendered and then cached. That is why things like standard timers/publishers don't update the UI. My guess is that these Text timers fill the space so that Apple can render a label on top of the cached view without requiring a new layout from the widget when the text size changes. I am saying this because I think the filling of the container is a feature and not a bug, so it probably won't change any time soon.

To get around this I force the size of the Text view to be the largest it should be. There are still some issues, however for the most part this solution looks ok.

struct TextTimer: View {
    // Return the largest width string for a time interval
    private static func maxStringFor(_ time: TimeInterval) -> String {
        if time < 600 { // 9:99
            return "0:00"
        }
        
        if time < 3600 { // 59:59
            return "00:00"
        }
        
        if time < 36000 { // 9:59:59
            return "0:00:00"
        }
        
        return "00:00:00"// 99:59:59
    }
    init(_ date: Date, font: UIFont, width: CGFloat? = nil) {
        self.date = date
        self.font = font
        if let width {
            self.width = width
        } else {
            let fontAttributes = [NSAttributedString.Key.font: font]
            let time = date.timeIntervalSinceNow
            let maxString = Self.maxStringFor(time)
            self.width = (maxString as NSString).size(withAttributes: fontAttributes).width
        }
    }
    
    let date: Date
    let font: UIFont
    let width: CGFloat
    var body: some View {
        Text(timerInterval: Date.now...date)
            .font(Font(font))
            .frame(width: width > 0 ? width : nil)
            .minimumScaleFactor(0.5)
            .lineLimit(1)
    }
}

WidgetKit: .timer Text style expands it to fill the width, instead of taking space to fit the contained string

1 Answers1