如何防止SwiftUI Text在值变化时抖动并格式化小数点两边的双值？

Question

我有一个倒计时器。当数字不断变化时，文字会水平移动，感觉晃动太大了，因为我每0.1秒更新一次计时器。

如何防止文字晃动？这是完整的代码：

struct CountDownTimerView: View {
    
    @ObservedObject var timer = CountdownTimer(seconds: 15)
    
    var body: some View {
        Text(String(format: "%.1f", timer.time))
            .font(Font.system(size: 144).weight(.light))
    }
}

class CountdownTimer: ObservableObject {
    @Published var time: Double
    
    /// time interval in seconds
    let interval = 0.1
    
    lazy var timer = Timer.scheduledTimer(withTimeInterval: interval, repeats: true) { _ in
        self.update()
    }
    
    init(seconds: Double) {
        time = seconds
        timer.fire()
    }
    
    func update() {
        if self.time-interval <= 0 {
            self.time = 0
            timer.invalidate()
        } else {
            self.time -= interval
        }
    }
}

我想将双精度值 7.329523 的时间显示为 07.3。我可以使用 . 实现小数点之前的格式（例如“07”）String(format: "%02d", Int(timer.time))或小数点之后的格式（例如使用“7.3”）(String(format: "%.1f", timer.time)。如何格式化小数点两边？

Answer 1

您应该尝试使用每个字符间距相等的字体，通常称为等宽字体。

我找到了两种使用 SwiftUI 实现此目的的方法：

等宽字体

将字体设计更改为等宽。这将影响文本的外观，因为它使用不同的字体设计。

.font(Font.system(size: 144, design: .monospaced).weight(.light))

自适应字体

另一种更好的方法是将当前的字体调整为等宽数字。你可以这样做：

.font(Font.monospacedDigit(Font.system(size: 144).weight(.light))())