SwiftUI如何在属性变更时触发列表内TextField的入场动画

你需要做两处核心修改即可实现需求：

• 将transition修饰符移动到条件渲染的视图上，只有被插入/移除的视图绑定transition才会生效
• 对newPersonName的状态变更添加动画监听，让输入内容触发的条件变化也能走动画逻辑

完整修改后代码 #

struct V_NewSession: View {
    @State var newPersonName: String = ""
    @State var participants: [String] = [
        "Jim",
        "Jonas"
    ]
    var body: some View {
        VStack(alignment: .leading) {
            ForEach(0...self.participants.count + 1, id: \.self) { i in
                // 把条件渲染的视图单独绑定transition
                if (!(self.newPersonName.isEmpty && i == self.participants.count + 1)) {
                    HStack {
                        if(i < self.participants.count) {
                            Text(self.participants[i])
                        } else {
                            // 给输入绑定添加动画，让输入内容变化触发动画
                            TextField("New Player",
                                      text: $newPersonName.animation(.spring()),
                                      onEditingChanged: { focused in
                                if (self.newPersonName.isEmpty) {
                                    if (!focused) {
                                        handleNewPlayerEntry()
                                    }
                                }
                           })
                        }
                    }
                    .transition(.scale) // 移动到此处
                }
            }
            Spacer()
            }
    }
    
    func handleNewPlayerEntry() {
        if(!newPersonName.isEmpty) {
            withAnimation(.spring()) {
                participants.append(newPersonName)
                newPersonName = ""
            }
        }
    }
}

修改说明 #

1. transition位置调整：原来你把transition加在ForEach上，而ForEach本身没有被插入移除，只有内部符合条件的HStack会动态插入移除，所以要把transition绑定在HStack上。
2. 输入绑定加动画：给$newPersonName加上.animation(.spring())修饰符后，每当输入内容变化触发if条件切换的时候，系统会自动用指定动画处理视图的插入和移除，就实现了第二个TextField的入场动画效果。
3. 额外做了代码优化，把count == 0替换成了更符合Swift规范的isEmpty判断，功能完全一致。

内容的提问来源于stack exchange，提问作者fer0n