SwiftUI中List/Form内Toggle首次点击需两次触发的问题

问题根源 #

冷启动时List内的Toggle需要两次点击才生效，核心原因是直接给@State绑定附加.animation()修饰符后，会与List的Section动态视图更新逻辑产生冲突。List在初始渲染阶段的布局刷新会和绑定动画的异步状态更新形成竞争，导致第一次点击的状态变更被覆盖。

解决方案 #

移除绑定上的.animation()，将动画逻辑移至状态变更的回调中，避免List初始渲染时的动画干扰。

修改后的示例代码

import SwiftUI

struct ContentView: View {
    @State private var showingAdvancedOptions = false
    @State private var enableLogging = false

    var body: some View {
        List {
            Section {
                Toggle("Show advanced options", isOn: $showingAdvancedOptions)
                    .onChange(of: showingAdvancedOptions) { _ in
                        withAnimation {
                            // 显式触发状态变更的动画
                        }
                    }

                if showingAdvancedOptions {
                    Toggle("Enable logging", isOn: $enableLogging)
                        .transition(.opacity) // 可选：给动态视图添加过渡动画
                }
           }
        }
    }    
}

额外优化方案 #

如果偏好保留绑定动画的写法，可以指定动画触发的条件，避免无差别触发动画：

Toggle("Show advanced options", isOn: $showingAdvancedOptions.animation(.easeInOut, value: showingAdvancedOptions))

验证结果 #

修改后冷启动首次点击Toggle即可正常切换状态，动态显示的子Toggle也能正常响应点击，同时保留了原有的动画效果。

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