向右对齐iOS WidgetKit小部件中的文本(日期()，样式:WidgetKit)文本

Question

这里有一个有趣的难题:我想做一个“滴答”可靠的定时器，但也可以在可预测的地方呈现符号，例如，我可以添加一个背景来装饰定时器。由于WidgetKit的限制，我无法可靠地每秒呈现自己的文本，必须依赖特殊的视图，例如文本(Date()，style：.timer)。但是，这个视图可以呈现时间，因为XX:XX和X:XX都取决于剩下的时间，这将是可以的，但是，它也都接受容器的整个宽度并对齐到左边，这使得最后的:XX根据时间的离开而移动。

下面是一个例子：

​

​

以及产生它的代码：

struct MyWidgetEntryView : View {    
    var body: some View {
        VStack {
            Text(Date().addingTimeInterval(1000), style: .timer)
                .font(.body.monospacedDigit())
                .background(Color.red)
            
            Text(Date().addingTimeInterval(100), style: .timer)
                .background(Color.green)
                .font(.body.monospacedDigit())
        }
    }
}

问:是否有一种方法可以在WidgetKit小部件中可靠地更新时间显示，使符号在相同的位置上呈现，而不依赖于剩余的时间？

我搞不懂，请帮帮我！

-Baglan

Answer 1

设置多行文本对齐方式：

Text(Date(), style: .timer)
    .multilineTextAlignment(.trailing)

它不是多行文字，但它是有效的！

Answer 2

仍然在寻找一个更好的答案，但这里有一个“概念证明”黑客攻击，以实现我的目标：

struct _T1WidgetEntryView : View {
    
    struct SizePreferenceKey: PreferenceKey {
        static var defaultValue: CGSize = .zero
        static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
            value = nextValue()
        }
    }
    
    @State private var digitSize: CGSize = .zero
    @State private var semicolonSize: CGSize = .zero
    
    var body: some View {
        ZStack {
                        
            Text("0")
                .overlay(
                    GeometryReader { proxy in
                        Color.green
                            .preference(key: SizePreferenceKey.self, value: proxy.size)
                    }
                    .onPreferenceChange(SizePreferenceKey.self) { digitSize = $0 }
                )
                .hidden()
            
            Text(":")
                .overlay(
                    GeometryReader { proxy in
                        Color.green
                            .preference(key: SizePreferenceKey.self, value: proxy.size)
                    }
                    .onPreferenceChange(SizePreferenceKey.self) { semicolonSize = $0 }
                )
                .hidden()
            
            
            Color.clear
                .frame(width: digitSize.width * 4 + semicolonSize.width, height: digitSize.width * 4 + semicolonSize.width)
                .overlay(
                    Text(Date().addingTimeInterval(100 + 3600 * 200), style: .timer)
                        .frame(width: digitSize.width * 7 + semicolonSize.width * 2)
                    ,
                    alignment: .trailing
                )
                .clipped()
            
        }
        .font(.body.monospacedDigit())
    }

}

结果是：

​

​

这段代码假定所有数字都是相同宽度的(因此使用了.monospacedDigit()字体修饰符)。

它的作用如下：

semicolon;

• "Normalizes“通过增加200个小时来计算数字符号的大小和时间字符串，以确保XXX:XX:XXX formatting;

• Sets文本的大小可以容纳格式化为XXX:XX:XX;

• Sets的字符串、容器的大小以容纳格式化为XX:XX;

• Aligns的字符串、overlay;

• Clips中的文本.trailing和容器的大小。

再一次，如果有更好的解决方案，我很乐意了解它！

-Baglan