如何使用剩余时间制作倒计时器

Question

我想实现一个基于当前时间和结束时间的倒计时器。

例如：

• 当前时间：20:30:30

• 结束时间始终是：23:59:59

  -> 我将实现一个倒计时器：03:29:29

Answer 1

更好的方法是使用

DateComponents

进行日期数学计算，有一个 API

dateComponents(_:from:to:)

，其中

from

和

to

可以是

DateComponents

struct TimerView: View {
    @State private var differenceComponents = DateComponents()

    private let endDateComponents = DateComponents(hour: 23, minute: 59, second: 59)
    private let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
    private let calendar = Calendar(identifier: .gregorian)
    
    var body: some View {
        HStack(spacing: 12) {
            timerStringView(value: differenceComponents.hour ?? 0)
            timerStringView(value: differenceComponents.minute ?? 0 )
            timerStringView(value: differenceComponents.second ?? 0)
        }
        .frame(width: 300, height: 34)
        .background(Color.gray)
        .onReceive(timer) { _ in
            updateComponents()
        }
        .onAppear(perform: updateComponents)
    }
    
    func updateComponents() {
        let nowComponents = calendar.dateComponents([.hour, .minute, .second], from: .now)
        differenceComponents = calendar.dateComponents([.hour, .minute, .second], from: nowComponents, to: endDateComponents)
    }
    
    func timerStringView(value: Int) -> some View {
        Text(String(format: "%02d", value))
            .font(.system(size: 18, weight: .bold))
            .foregroundColor(.black)
            .background(Color.white)
            .cornerRadius(6)
    }
}