SwiftUI如何避免VStack中Text横向偏移，实现iOS相机时间标签布局？

出现横向偏移的核心原因是系统默认字体的数字宽度不统一，比如数字「1」的宽度比「0」更窄，时间更新时Text视图的宽度会随数字变化发生变动，进而产生偏移。

使用系统提供的等宽数字修饰符即可实现和iOS相机完全一致的效果，该修饰符只会让数字字符保持等宽，不会影响其他字符的显示效果，是最优解。同时需要修正原代码的时间格式化逻辑，避免秒数超过9后显示格式异常。

修改后完整代码如下：

class TimeTestModel:ObservableObject {
    
    @Published var seconds:Int = 0
    
    var timer:Timer?
    
    init() {
        timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(TimeTestModel.tick), userInfo: nil, repeats: true)
    }
    
    @objc func tick() {
        seconds += 1
    }
    
}


struct TestView: View {
    
    @StateObject var timeModel = TimeTestModel()
    
    var body: some View {
        
        VStack() {
            HStack {
                // 格式化时间为两位分:两位秒，添加等宽数字修饰符
                Text(String(format: "%02d:%02d", 0, timeModel.seconds))
                    .monospacedDigit()
                    // 如需自定义字体大小、权重可以使用如下写法
                    // .font(.system(size: 14, weight: .semibold).monospacedDigit())
            }
            .border(.red)
        }

    }
}

如果需要额外固定标签整体宽度，可以叠加frame约束，适配更复杂的布局场景：

Text(String(format: "%02d:%02d", 0, timeModel.seconds))
    .monospacedDigit()
    .frame(minWidth: 60, alignment: .leading)

内容的提问来源于stack exchange，提问作者zumzum