如何在 Swift 5 中使用 TimelineView 每秒刷新一个文本？

Question

我对快速编码很陌生，我正在尝试做一个非常简单的项目：只是一个显示时间的时钟。我正在使用 TimelineView 每秒刷新时间，但它不起作用。这是我的代码：

import SwiftUI

struct ContentView: View {

@State var hour: Int = Calendar.current.component(.hour, from: Date())
@State var minute: Int = Calendar.current.component(.minute, from: Date())
@State var second: Int = Calendar.current.component(.second, from: Date())


var body: some View {
    ZStack {
        VStack{
            Spacer()
            HStack {
                
                TimelineView(.periodic(from: .now, by: 1)) { timeline in
                    
                    Text(String(hour))
                    Text(String(minute))
                    Text(String(second))
                }
            }
            
            Spacer()
        }


    }
}
}

struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       Group {
       ContentView()
.previewInterfaceOrientation(.portrait)
       }
   }
}

由于我的小时、分钟和秒变量是 @State 并且我正在使用 TimelineView，它们应该每秒刷新一次，不是吗？

我很困惑，希望得到一些帮助。非常感谢。

Answer 1

正如文档所述（https://developer.apple.com/documentation/swiftui/timelineview):

时间线视图充当容器，没有自己的外观。相反，它会在预定的时间点重新绘制其包含的内容

它包含的内容在您提供的闭包中定义：

TimelineView(...) { timeline in
    // content which gets redrawn
}

在这个闭包中，您可以访问 TimelineView.Context (https://developer.apple.com/documentation/swiftui/timelineview/context）。借助此上下文，您可以访问触发更新/重画的日期，如下所示：

TimelineView(.periodic(from: .now, by: 1)) { timeline in
    Text("\(timeline.date)")
}

这将产生以下输出：

要改进格式设置，您可以使用 DateFormatter (https://developer.apple.com/documentation/foundation/dateformatter):

struct ContentView: View {
    private let dateFormatter: DateFormatter = {
        let dateFormatter = DateFormatter()
        dateFormatter.dateStyle = .none
        dateFormatter.timeStyle = .medium
        return dateFormatter
    }()
    
    var body: some View {
        TimelineView(.periodic(from: .now, by: 1)) { timeline in
            Text("\(dateFormatter.string(from: timeline.date))")
        }
    }
}

Answer 2

你必须观察时间线的变化。

这里我使用了 onChange 并更新了分钟、秒和小时的值。

struct TimerView: View {
    var date: Date
    
    @State var hour: Int = Calendar.current.component(.hour, from: Date())
    @State var minute: Int = Calendar.current.component(.minute, from: Date())
    @State var second: Int = Calendar.current.component(.second, from: Date())
    
    var body: some View {
        VStack {
            Text(String(hour))
            Text(String(minute))
            Text(String(second))
        }
        .onChange(of: date) { _ in
            second += 1
            if second > 59 {
                minute += 1
                second = 0
                if minute > 59 {
                    hour += 1
                    minute = 0
                    if hour > 23 {
                        hour = 0
                    }
                }
            }
        }
    }
}
struct ContentView: View { var body: some View {
        ZStack {
            VStack{
                Spacer()
                HStack {
                    TimelineView(.periodic(from: .now, by: 1)) { timeline in
                        TimerView(date: timeline.date)
                    }
                }
                Spacer()
            }
        }
    }
}

Answer 3

只需将小时-分钟-秒作为计算属性而不是@State

struct ContentView: View {
    var hour: Int {
        Calendar.current.component(.hour, from: Date())
    }
    var minute: Int {
        Calendar.current.component(.minute, from: Date())
    }
    var second: Int {
        Calendar.current.component(.second, from: Date())
    }
    var body: some View {
        TimelineView(.periodic(from: .now, by: 1.0)) { timeline in
            HStack {
                Text(String(hour))
                Text(String(minute))
                Text(String(second))
            }
        }
    }
}