ShiftUI新手求助：如何实现每隔N秒自动轮播Banner切换及底部指示器

以下是符合需求的完整实现代码，基于原生SwiftUI的过渡与动画能力，支持自定义轮播间隔和底部状态指示器：

import SwiftUI

struct BannerCarouselView: View {
    // 替换为你的Banner图片资源/URL数组
    private let bannerImages: [String] = ["banner1", "banner2", "banner3", "banner4"]
    // 自定义自动轮播间隔（秒）
    private let autoScrollInterval: TimeInterval = 3
    
    @State private var currentIndex = 0
    @State private var timer: Timer?
    
    var body: some View {
        VStack(spacing: 12) {
            // Banner展示容器
            ZStack {
                ForEach(bannerImages.indices, id: \.self) { index in
                    Image(bannerImages[index])
                        .resizable()
                        .scaledToFill()
                        .frame(height: 200)
                        .clipped()
                        .opacity(currentIndex == index ? 1 : 0)
                        .transition(.opacity.combined(with: .slide))
                        .animation(.easeInOut(duration: 0.5), value: currentIndex)
                }
            }
            
            // 底部状态指示器
            HStack(spacing: 8) {
                ForEach(bannerImages.indices, id: \.self) { index in
                    Circle()
                        .fill(currentIndex == index ? Color.blue : Color.gray.opacity(0.5))
                        .frame(width: 8, height: 8)
                        .animation(.easeInOut, value: currentIndex)
                }
            }
        }
        .onAppear {
            startAutoScroll()
        }
        .onDisappear {
            stopAutoScroll()
        }
    }
    
    // 启动自动轮播定时器
    private func startAutoScroll() {
        timer = Timer.scheduledTimer(withTimeInterval: autoScrollInterval, repeats: true) { _ in
            currentIndex = (currentIndex + 1) % bannerImages.count
        }
    }
    
    // 停止定时器，避免内存泄漏
    private func stopAutoScroll() {
        timer?.invalidate()
        timer = nil
    }
}

// 预览视图
struct BannerCarouselView_Previews: PreviewProvider {
    static var previews: some View {
        BannerCarouselView()
            .padding()
    }
}

关键功能说明 #

• 自动轮播：通过Timer定时更新当前Banner索引，取模运算实现循环切换。
• 过渡动画：使用opacity+slide组合过渡，配合animation修饰符实现平滑的图片切换效果。
• 指示器同步：底部圆形指示器随当前索引实时更新状态，选中项高亮显示。
• 生命周期管理：在视图出现时启动定时器，消失时销毁定时器，避免内存泄漏。

自定义调整建议 #

• 替换bannerImages为实际的图片资源名，若使用网络图片，将Image替换为AsyncImage。
• 修改autoScrollInterval调整轮播间隔，调整frame(height: 200)修改Banner高度。
• 如需支持手动滑动，可添加拖拽手势（DragGesture）来更新currentIndex。

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