如何为 SwiftUI 列表中的单个行设置动画？

Question

我想显示一个列表，其中每一行都带有不透明动画并且延迟增加。所以第一行应该在 0.1 秒后出现，第二行应该在 0.3 秒后出现，第三行应该在 0.5 秒后出现等等。

我尝试了以下方法，但它不起作用，因为所有行同时出现并且没有动画。

如有任何提示，我们将不胜感激！

struct GuideListView: View {

    @State var showListItems = false
    @State var animationDelay = 0.1
    // definitions of viewRouter, data etc.

    var body: some View {

        VStack {

            // other items, navLink etc.

            List {
                
                ForEach(data) { item in
                    
                    Button(action: {
                        // navigation action
                    }, label: {
                        RowView(item: item)
                    })
                    .opacity(showListItems ? 1 : 0)
                    .animation(Animation.easeOut(duration: 0.6).delay(animationDelay), value: showListItems)
                    .onAppear{
                        animationDelay = animationDelay + 0.2
                    }

                } //: ForEach
          
            } //: List

        } //: VStack
        .onAppear{
            showListItems = true
    }
}

Answer 1

关键似乎是使用 ForEach 循环中的索引来设置动画出现的时间。

下面是代码。拨动开关只是重置状态以显示动画：

struct GuideListView: View {
    let data = ["One", "Two", "Three", "Four"]
    @State var showListItems = false
    @State var animationDelay = 0.5
    // definitions of viewRouter, data etc.
    
    var body: some View {
        
        VStack {
            
            // other items, navLink etc.
            Toggle("Show List Items", isOn: $showListItems)

            List {
                
                ForEach(data.indices) { index in
                    
                    Button(action: {
                        // navigation action
                    }, label: {
                        Text(data[index])
                    })
                        .opacity(showListItems ? 1 : 0)
                        .animation(Animation.easeOut(duration: 0.6).delay(animationDelay * Double(index)), value: showListItems)

                } //: ForEach
                
            } //: List
            
        } //: VStack
    }
}

如何为 SwiftUI 列表中的单个行设置动画？

How can I animate individual rows in SwiftUI List?

animation

list

swiftui