Question

我有一个要显示view的列表。当我点击该行时，以下代码会产生一个生涩的animation。我想进行修改以创建更平滑的动画。有没有一种方法可以平滑地对List进行更改动画？

import SwiftUI

struct ContentView: View {
    var body: some View {
        List(0..<10){index in
             ListItem(title: index)
        }
    }
}

struct ListItem: View {
    @State var title: Int
    @State var bOpen = false

    var body: some View {
        VStack{
            Text("\(title+2) items")
            withAnimation{
                self.bOpen ? Options() : nil
            }
        }.onTapGesture {
            self.bOpen.toggle()
        }
    }
}

struct Options: View {
    var body: some View {
        HStack {
            Image(systemName:"circle.fill")
            Image(systemName:"star")
        }

    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

在.animation()上使用ListItem修饰符

like：

ListItem(title: index).animation(.default)

您还可以将其应用于VStack本身（如果您设法不为所有ListItem更改设置动画）。

不需要withAnimation

Answer 2

如果没有其他项目，则带有listItem的其他答案就足够了。

但是，具体地说，您在listItem中还有一些其他动画项目，您可以执行以下操作：

 var body: some View {
    VStack{
        Text("\(title+2) items")
        self.bOpen ? Options().transition(AnyTransition.move(edge: .top)) : nil
    }.onTapGesture {
    withAnimation{
    self.bOpen.toggle()}
    }
}

更正放置“ withAnimation”的位置
采取一种和平的transtion行动。

列表行平滑动画

2 个答案: