SwiftUI加法学习数显线：实现循环迭代延迟生成视图

核心思路 #

用@State维护一个已显示数字的数组，通过异步任务逐个将数字添加到数组中，每个添加动作延迟固定时间。ForEach遍历这个数组生成对应的标记视图，就能实现「逐个显示且保留已显示内容」的效果。

完整代码示例 #

import SwiftUI

struct NumberLineView: View {
    // 加法参数：可根据业务逻辑动态传入
    let startNumber: Int = 4
    let addend: Int = 8
    private var targetNumber: Int { startNumber + addend }
    
    // 存储已显示的数字，控制视图渲染
    @State private var displayedNumbers: [Int] = []
    // 每个数字显示的延迟间隔（可调整，比如0.5秒）
    private let delayPerStep: TimeInterval = 0.5
    
    var body: some View {
        VStack(spacing: 10) {
            // 数显线底座（水平Divider）
            Divider()
                .frame(height: 2)
                .background(Color.blue)
            
            // 数字标记行
            HStack(spacing: 0) {
                ForEach(displayedNumbers, id: \.self) { number in
                    VStack {
                        Text("\(number)")
                            .font(.caption)
                        Divider()
                            .frame(width: 2)
                            .background(Color.red)
                    }
                    .frame(width: 40) // 每个标记的宽度，可按需调整
                }
            }
        }
        .onAppear {
            startNumberLineAnimation()
        }
    }
    
    private func startNumberLineAnimation() {
        // 清空历史内容（支持重复播放）
        displayedNumbers.removeAll()
        
        // 从起始数开始，逐个添加到数组
        Task {
            for number in startNumber...targetNumber {
                await MainActor.run {
                    displayedNumbers.append(number)
                }
                // 延迟指定时间后添加下一个数字
                try? await Task.sleep(nanoseconds: UInt64(delayPerStep * 1_000_000_000))
            }
        }
    }
}

// 预览
struct NumberLineView_Previews: PreviewProvider {
    static var previews: some View {
        NumberLineView()
            .padding()
    }
}

关键细节说明 #

• 状态数组驱动视图：displayedNumbers每新增一个元素，SwiftUI自动刷新视图，新增对应标记的同时保留已有的内容。
• 主线程更新状态：异步任务中更新UI状态必须用MainActor.run包裹，避免线程冲突。
• 异步延迟更安全：用Task.sleep替代Timer或DispatchQueue，符合SwiftUI异步编程范式，不会出现直接循环更新导致的报错问题。
• 可定制化调整：delayPerStep控制显示间隔，frame(width: 40)控制标记宽度，都能根据需求修改。

之前方法的问题原因 #

• DispatchQueue循环报错：直接在循环里用DispatchQueue更新UI状态，会触发多次线程冲突，且SwiftUI视图更新依赖状态变量变更，而非直接操作视图。
• Timer单数字切换：仅维护了「当前显示的数字」而非「已显示数字集合」，每次更新只会替换视图，无法保留历史内容。

内容的提问来源于stack exchange，提问作者kevin campbell