时间戳

首页 > 解决方案 > SwiftUI：避免在 VStack 中的文本视图上水平移动以复制相机时间标签布局？

swiftui - SwiftUI：避免在 VStack 中的文本视图上水平移动以复制相机时间标签布局？

问题描述

我想在 SwiftUI 视图中复制 iOS 相机应用程序中时间标签的布局。

我的测试代码是这样的：

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("00:0\(timeModel.seconds)")
            }
            .border(.red)
        }

    }
}

它创建了这个：

在此处输入图像描述

我想要的是这样的：

在此处输入图像描述

使用我的代码，您可以看到整个文本在呈现新文本时如何从左到右移动（为了示例，我只从 0 到 9 完成，我知道我需要更多的字符串工作才能超越...） .

在 iOS 相机 app 版本中可以看到整个标签的位置并没有随着时间的变化而变化。

我不确定如何在 SwiftUI 中实现这一点。

如何更改我的代码以允许数字更新而不会导致水平移位？

标签： swiftui

解决方案

就像Yrb他在评论中提到的那样，这可以使用非比例字体来解决。所以我通过做出这个改变达到了想要的结果：

VStack {
    HStack {
        Text(timeModel.timeString)
            .font(Font.system(size: 12, weight: .medium).monospacedDigit()).  <<-- HERE!
    }
    .border(.red)
}

现在文本的水平偏移为零。

推荐阅读