SwiftUI中如何实现逐次显示字符串数组元素？

要让数组元素逐个带动画地显示出来，你可以通过状态变量控制显示范围+定时器逐步解锁元素+入场动画定义的组合方式实现，以下是适配你需求的完整代码：

import SwiftUI
import Combine

struct ContentView: View {
    let correctNames = ["Steve", "Bill", "Elon", "Paul"]
    @State private var displayedCount = 0
    private var cancellable: AnyCancellable?
    
    var body: some View {
        VStack(spacing: 16) {
            ForEach(Array(correctNames.prefix(displayedCount)), id: \.self) { name in
                Text(name)
                    .font(.largeTitle)
                    .bold()
                    .transition(.opacity.combined(with: .move(edge: .bottom)))
            }
        }
        .onAppear {
            // 每隔0.2秒触发一次，逐步增加显示的元素数量
            cancellable = Timer.publish(every: 0.2, on: .main, in: .common)
                .autoconnect()
                .sink { _ in
                    withAnimation(.easeOut(duration: 0.5)) {
                        if displayedCount < correctNames.count {
                            displayedCount += 1
                        } else {
                            cancellable?.cancel() // 显示完所有元素后停止定时器
                        }
                    }
                }
        }
        .onDisappear {
            cancellable?.cancel()
            displayedCount = 0 // 重置状态，确保下次进入视图时重新触发动画
        }
    }
}

核心逻辑拆解： #

• 状态变量控制显示范围：用displayedCount跟踪当前要展示的元素个数，每次数值变化都会触发视图更新，只渲染数组的前displayedCount个元素。
• 定时器驱动动画流程：视图加载完成后启动定时器，每隔0.2秒在动画块中增加displayedCount，让元素的添加操作伴随动画效果。
• 入场动画定义：通过transition给每个文本元素设置「淡入+从底部移入」的组合动画，元素被添加到视图结构时会自动执行该动画，和你提供的演示效果完全匹配。

如果需要调整动画速度或风格，修改定时器的every参数、动画的duration数值，或者替换transition的动画类型即可。

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