gpt4 book ai didi

list - 如何为 SwiftUI 列表中的单个行设置动画?

转载 作者:行者123 更新时间:2023-12-05 09:30:54 28 4
gpt4 key购买 nike

我想显示一个列表,其中每一行都带有不透明动画并且延迟增加。所以第一行应该在 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
}
}

最佳答案

关键似乎是使用 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
}
}

关于list - 如何为 SwiftUI 列表中的单个行设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69223787/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com