SwiftUI高效实现实时秒级时钟：解决视图重绘闪烁问题

你当前通过切换clockID触发视图重绘的方式，会强制整个Text甚至父视图刷新，这就是导致界面卡顿、菜单打开时闪烁的核心原因。更高效的做法是只更新时间数据，让SwiftUI自动处理局部视图刷新，完全避免强制重绘的操作。

优化要点 #

1. 复用DateFormatter：每次调用格式化函数都创建新的DateFormatter是不必要的性能开销，把它设为静态属性复用即可。
2. 用Timer数据流驱动更新：借助Combine框架的Timer.publish（或iOS15+的AsyncSequence），每秒推送时间更新，仅修改绑定的时间字符串，让SwiftUI只刷新Text组件。

完整实现代码（兼容iOS13+） #

import SwiftUI
import Combine

struct ClockView: View {
    // 仅存储格式化后的时间字符串，值变化时才触发Text刷新
    @State private var currentTimeString = ""
    // 保存定时器订阅，防止被提前销毁
    private var timerCancellable: AnyCancellable?
    
    // 静态复用的DateFormatter，避免重复创建
    private static let timeFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "h:mm:ss"
        return formatter
    }()
    
    var body: some View {
        Text(currentTimeString)
            .font(.caption)
            .onAppear {
                startClock()
            }
            .onDisappear {
                stopClock()
            }
    }
    
    private func startClock() {
        // 先更新一次初始时间
        updateCurrentTime()
        // 创建每秒触发的主线程定时器
        let timer = Timer.publish(every: 1.0, on: .main, in: .common)
            .autoconnect()
        
        // 订阅定时器事件，每秒更新时间字符串
        timerCancellable = timer.sink { [weak self] _ in
            self?.updateCurrentTime()
        }
    }
    
    private func stopClock() {
        // 取消订阅，停止定时器
        timerCancellable?.cancel()
        timerCancellable = nil
    }
    
    private func updateCurrentTime() {
        currentTimeString = Self.timeFormatter.string(from: Date())
    }
}

iOS15+ 简化版本 #

如果你的项目支持iOS15及以上，可以用.task修饰符自动管理定时器生命周期，代码更简洁：

import SwiftUI

struct ClockView: View {
    @State private var currentTimeString = ""
    private static let timeFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "h:mm:ss"
        return formatter
    }()
    
    var body: some View {
        Text(currentTimeString)
            .font(.caption)
            .task {
                // AsyncSequence自动在视图消失时取消任务
                for await _ in Timer.publish(every: 1.0, on: .main, in: .common).autoconnect() {
                    updateCurrentTime()
                }
            }
            .onAppear {
                updateCurrentTime()
            }
    }
    
    private func updateCurrentTime() {
        currentTimeString = Self.timeFormatter.string(from: Date())
    }
}

优化后的优势 #

• 仅Text组件会在时间变化时刷新，不会触发无关视图重绘，彻底解决闪烁和卡顿问题
• 复用DateFormatter减少了不必要的对象创建开销
• 定时器生命周期和视图绑定，视图消失后自动停止运行，避免资源浪费

内容的提问来源于stack exchange，提问作者Ahmed Zaidan