SwiftUI中自动定时滚动视图的问题

Question

我试图建立一个自动自定义分页滚动视图，但我遇到了一个问题。我在代码中指定每5秒增加1，然后转到下一页，用Identifiable组织每张卡的文本。在预览中没有发生这种情况。相反，它拒绝移动，它只想移动到第一张卡。当我放置一个固定的字符串值并删除我创建的数组时，它就能工作了。我尝试过使用其他替代方法，如enum和嵌入在视图中的固定数组，但这些都不起作用。请查看…下面的代码

struct TestView: View {
private var amount = 1
private let timer = Timer.publish(every: 5, on: .main, in: .common).autoconnect()
@State private var currentIndex = 0
var item: Item = items[0]
var body: some View {
    ZStack {
        ScrollViewReader { scrollProxy in
            SnappingScrollView(.horizontal, decelerationRate: .fast, showsIndicators: false) {
                ForEach(items) { item in
                    ForEach(0..<amount) { selection in
                        GeometryReader { geometry in
                            ZStack {
                                Rectangle()
                                    .foregroundColor(Color.black.opacity(0.2))
                                    .blur(radius: 7)
                                    .frame(maxWidth: 350, maxHeight: 300, alignment: .center)
                                    .cornerRadius(16)
                                    .shadow(color: Color.black.opacity(0.2), radius: 20, x: 0, y: 0)
                                    .offset(x: 15, y: 50)
                                    .rotation3DEffect(Angle(degrees: (Double(geometry.frame(in: .global).minX) - 30) / -20), axis: (x: 0, y: 1.0, z: 0))
                                Rectangle()
                                    .stroke(lineWidth: 50)
                                    .foregroundColor(.gray)
                                    .blur(radius: 100)
                                    .frame(maxWidth: 350, maxHeight: 300, alignment: .center)
                                    .cornerRadius(16)
                                    .shadow(color: Color.black.opacity(0.3), radius: 1)
                                    .offset(x: 15, y: 50)
                                    .rotation3DEffect(Angle(degrees: (Double(geometry.frame(in: .global).minX) - 30) / -20), axis: (x: 0, y: 1.0, z: 0))
                                VStack {
                                    Text(item.title)
                                        .font(.title2)
                                        .fontWeight(.bold)
                                        .padding(.bottom, 10)
                                    Text(item.description)
                                        .font(.system(size: 16))
                                    Image(item.image)
                                        .resizable()
                                        .frame(width: 90, height: 90)
                                        .cornerRadius(25)
                                        .padding(.bottom, -30)
                                        .padding(.top)
                                    Text("\(selection)")
                                        .opacity(0)
                                }
                                .frame(width: 300)
                                .multilineTextAlignment(.center)
                                .offset(y: 20)
                                .rotation3DEffect(Angle(degrees: (Double(geometry.frame(in: .global).minX) - 30) / -20), axis: (x: 0, y: 1.0, z: 0))
                                .padding(.leading, 25)
                                .padding(.top, 70)
                            }
                        }
                        .frame(width: 400, height: 500)
                        .offset(x: 12)
                        .id(selection)
                        .scrollSnappingAnchor(.bounds)
                    }
                }
            }
            .onReceive(timer) { _ in
                currentIndex = currentIndex < amount-1 ? currentIndex + 1 : 0
                withAnimation {
                    scrollProxy.scrollTo(currentIndex) // scroll to next .id
                }
            }
        }
    }
}

}

Identifiable阵列

struct Item: Identifiable {
var id = UUID()
var title: String
var description: String
var image: String

}

var items = [
    Item(title: "Welcome to Mathematically!", description: "It's a pleasure to have you. From creating a playground to competing in the daily challenges, there will be wonderful days of math waiting for you.", image: "Mathematically"),
    Item(title: "An award winning app.", description: "Mathematically was submitted to the WWDC22 Swift Student Challenge and was accepted among the 350 accepted apps world-wide.", image: "WWDC22"),
    Item(title: "Need a Walkthrough?", description: "No need to be intimidated. Take the walkthrough if you need to familiarize yourself about the game.", image: "Arrows"),
    Item(title: "Mathematically+", description: "The ultimate premium Mathematically experience, ad-free.", image: "Mathematically+"),
]

Answer 1

你快到了..。当currentIndex发生变化时，您就不会对它做任何事情。引入一个ScrollViewReader和一个.id，这样您就可以滚动到视图中的相应位置：

struct ContentView: View {
    
    private let amount = 4
    private let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
    
    @State private var currentIndex = 0
    
    var body: some View {
        ScrollViewReader { scrollProxy in // needed to scroll programmatically
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .center, spacing: 0) {
                    ForEach(0..<amount) { item in
                        GeometryReader { geometry in
                            ZStack {
                                Rectangle()
                                    .foregroundColor(.gray)
                                    .frame(maxWidth: 350, maxHeight: 300, alignment: .center)
                                    .cornerRadius(16)
                                    .offset(x: 15, y: 50)
                                    .rotation3DEffect(Angle(degrees: (Double(geometry.frame(in: .global).minX) - 30) / -20), axis: (x: 0, y: 1.0, z: 0))
                                
                                VStack {
                                    Text("Hello World!")
                                        .font(.title2)
                                        .bold()
                                        .padding(.bottom, 10)
                                    Text("Item \(item)")
                                }
                                .frame(width: 300)
                                .rotation3DEffect(Angle(degrees: (Double(geometry.frame(in: .global).minX) - 30) / -20), axis: (x: 0, y: 1.0, z: 0))
                                .padding(.leading, 25)
                                .padding(.top, 70)
                            }
                        }
                        .frame(width: 400, height: 500)
                        .offset(x: 10)
                        .id(item) // define id here
                    }
                }
            }
            .onReceive(timer) { _ in
                currentIndex = currentIndex < amount-1 ? currentIndex + 1 : 0
                withAnimation {
                    scrollProxy.scrollTo(currentIndex) // scroll to next .id
                }
            }
        }
    }
}