我想显示一个列表，其中每一行都显示不透明动画并且延迟逐渐增加。因此，第一行应在 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
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
