How to create compact unit displays in SwiftUI?

61 Views Asked by At

I'm looking to create a compact display for a unit and value, maintaining Apple's design language. Is there a native way to do this in SwiftUI besides a simple Text element?

It should look like this demo image (from Apple):

Dynamic Island unit display

I've tried approximating the look with a Text component, but it doesn't look quite right to me:

HStack(alignment: .top, spacing: 2.0) {
    Text("1:23")
        .font(...)
    Text("H") // unit display
        .font(.caption2)
        .fontWeight(.semibold)
}
0

There are 0 best solutions below