SwiftUI中如何为API图片设计视图并添加指定角度旋转效果？

想要实现的效果：多张图片堆叠展示，每张从数组[-10, 10, 0]中选取不同角度添加旋转效果，图片数据来源于API接口。

你的现有代码存在两个核心问题：

• index变量未随图片遍历动态更新，导致所有图片都使用同一旋转角度，无法实现差异化效果
• ZStack内图片完全重叠，无法呈现堆叠的视觉层次

以下是修正后的实现方案：

struct Stacks: View {
    // 预定义旋转角度数组
    private let rotateAngles: [Double] = [-10, 10, 0]
    @StateObject private var viewModel = StacksViewModel()
    
    var body: some View {
        VStack(spacing: 25) {
            // 遍历每组图片数据
            ForEach(viewModel.datas, id: \.id) { item in
                ZStack(alignment: .bottomLeading) {
                    // 遍历单组内的图片，同时获取索引
                    ForEach(Array(item.stack_book_link.enumerated()), id: \.element.id) { index, imageItem in
                        AsyncImage(url: URL(string: imageItem.book_url)) { phase in
                            switch phase {
                            case .empty:
                                // 加载占位视图
                                RoundedRectangle(cornerRadius: 4)
                                    .fill(Color.gray.opacity(0.2))
                                    .frame(width: 125, height: 135)
                            case .success(let image):
                                image
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 125, height: 135)
                                    .clipped()
                                    // 根据图片索引循环分配旋转角度
                                    .rotationEffect(.degrees(rotateAngles[index % rotateAngles.count]))
                                    // 添加偏移量，模拟堆叠的层次感
                                    .offset(x: CGFloat(index * 6), y: CGFloat(index * 6))
                            case .failure:
                                // 加载失败占位视图
                                Image(systemName: "book.circle")
                                    .frame(width: 125, height: 135)
                                    .foregroundColor(.gray)
                            @unknown default:
                                EmptyView()
                            }
                        }
                    }
                }
            }
        }
        .onAppear {
            viewModel.getStacksData()
        }
    }
}

// 保留你的ViewModel逻辑
class StacksViewModel: ObservableObject {
    @Published var datas: [StackData] = []
    
    func getStacksData() {
        // 这里编写你的API请求逻辑
    }
}

// 示例数据模型（根据你的实际接口结构调整）
struct StackData: Identifiable {
    let id: UUID
    let stack_book_link: [BookImage]
}

struct BookImage: Identifiable {
    let id: UUID
    let book_url: String
}

关键修改说明：

• 移除无用的index状态变量，通过图片在数组中的索引index % rotateAngles.count循环分配旋转角度，确保每张图片角度不同
• 给AsyncImage补充了完整的加载状态处理，提升交互体验
• 新增offset偏移量，让堆叠的图片呈现出错落的层次感
• 优化变量命名，提升代码可读性

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