SwiftUI实时更新内容的TimelineView视图

TimelineView 是 SwiftUI 中的一种特殊视图，它引入于 iOS 15 和 macOS 12，主要用于构建需要实时更新内容的界面，例如动态的时钟、计时器、天气信息或基于时间的动画。

与传统的 @State 或 Timer 更新视图的方式不同，TimelineView 通过系统调度来管理时间更新的频率和精度，这可以优化性能并节约资源。

TimelineView 的核心概念

1、时间驱动：

TimelineView 的内容由时间更新驱动，而不是由外部状态变化直接触发。

2、更新策略：

通过不同的更新策略（如每秒更新一次或根据时间变化自动刷新），实现对视图更新频率的灵活控制。

3、高效性能：

TimelineView 优化了与时间相关的更新，避免了使用 Timer 时可能出现的不必要计算。

TimelineView 的语法

TimelineView 的构造方法接受两个主要参数：

时间线（TimelineSchedule）：确定时间更新的频率（例如每秒刷新一次）。

视图构建器：提供每次更新时的具体视图内容。

TimelineView(.periodic(from: Date(), by: 1)) { context in
    Text("Current Time: \(context.date)")
}

TimelineSchedule（时间线调度器）

TimelineSchedule 是用来定义 TimelineView 的更新频率的策略，SwiftUI 提供了以下内置选项：

1、everyMinute：每分钟更新一次。

2、everyHour：每小时更新一次。

3、.periodic(from:by:)：自定义更新频率，例如每秒刷新。

4、TimelineSchedule 的其他调度策略：可以扩展或自定义。

TimelineView 示例

1、实现一个简单的时钟

import SwiftUI

struct ContentView: View {
    var body: some View {
        TimelineView(.periodic(from: Date(), by: 1)) { context in
            Text(context.date, style: .time) // 自动格式化为时钟时间
                .font(.largeTitle)
        }
    }
}

效果：

这个视图会每秒更新一次显示的时间，类似一个动态时钟。

2、实现倒计时功能

import SwiftUI

struct ContentView: View {
    let targetDate: Date

    var body: some View {
        TimelineView(.periodic(from: Date(), by: 1)) { context in
            let remainingTime = max(0, targetDate.timeIntervalSince(context.date))
            Text("Time left: \(Int(remainingTime)) seconds")
                .font(.headline)
        }
    }
}

#Preview {
    ContentView(targetDate: Date().addingTimeInterval(30))
}

效果：

倒计时会每秒刷新，实时显示剩余时间。

3、实现动态动画

通过结合 TimelineView 和动画，可以构建基于时间变化的动态效果。

import SwiftUI

struct ContentView: View {
    var body: some View {
        TimelineView(.periodic(from: Date(), by: 0.1)) { context in
            let angle = Angle.degrees(context.date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: 60) * 6)
            
            Rectangle()
                .strokeBorder(Color.blue, lineWidth: 4)
                .frame(width: 100, height: 100)
                .rotationEffect(angle)
        }
    }
}

效果：

一个动态旋转的正方形，每秒钟旋转 6 度，完成一个完整旋转需要 60 秒。

4、根据时间段动态切换内容

可以根据时间的变化调整视图的外观或内容。

import SwiftUI

struct ContentView: View {
    var body: some View {
        TimelineView(.periodic(from: Date(), by: 60)) { context in
            let hour = Calendar.current.component(.hour, from: context.date)

            ZStack {
                if hour >= 6 && hour < 18 {
                    Color.blue // 白天背景
                } else {
                    Color.black // 夜晚背景
                }
                Text(hour >= 6 && hour < 18 ? "Daytime" : "Nighttime")
                    .font(.largeTitle)
                    .foregroundColor(.white)
            }
            .ignoresSafeArea()
        }
    }
}

效果：

根据当前时间动态显示白天或夜晚的背景和文字。

优点与使用场景

优点

1、高性能：系统优化了时间调度，避免了不必要的刷新。

2、简单易用：无需手动管理 Timer，代码简洁直观。

3、灵活性：支持不同的时间更新频率和动态内容。

适用场景

动态时钟：实时显示当前时间。

倒计时：实时更新剩余时间。

天气应用：根据时间段调整显示内容（如白天和夜晚）。

动画视图：使用时间驱动动画的变化。

实时状态监控：显示动态数据或系统状态。

注意事项

1、时间更新频率：不要设置过短的刷新间隔（如每毫秒），可能会影响性能。

2、只在必要时使用：TimelineView 适用于时间敏感的内容，不适合用于非时间相关的刷新。

3、iOS 15+ 支持：请确保目标平台支持 TimelineView。