SwiftUI中OTP输入框粘贴文本时下划线从左到右逐次动画实现方案

问题原因 #

你当前粘贴逻辑是直接把处理好的完整OTP字符串一次性赋值给otpField，所有输入位的beforeCursor状态会同时变为true，所以所有下划线的动画同步触发。

修复思路 #

修改粘贴方法，将处理后的OTP字符串逐位追加到otpField中，每追加一位增加100ms左右的延迟（可自行调整时长匹配手动输入的动画节奏），模拟手动逐位输入的状态变更节奏，即可实现从左到右逐个播放动画的效果。该方案使用GCD实现延迟，完全兼容iOS13+以及Xcode12.3的开发环境，不需要引入高版本API。

代码修改 #

仅需要替换原有的pasteText方法即可，修改后的代码如下：

func pasteText() {
    let pasteboard = UIPasteboard.general
    guard let pastedString = pasteboard.string else {
        return
    }
    let decimalInputOnly = pastedString
        .components(separatedBy:CharacterSet.decimalDigits.inverted)
        .joined()
    let otpToPaste = Array(decimalInputOnly.prefix(viewModel.numberOfFields))
    
    // 如果需要粘贴时覆盖原有输入，打开下面一行注释即可
    // viewModel.otpField = ""
    
    let startIndex = viewModel.otpField.count
    for (index, char) in otpToPaste.enumerated() {
        let delay = Double(index) * 0.1 // 每100ms追加一位，可调整时长
        DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
            // 防止超出最大位数
            guard viewModel.otpField.count < viewModel.numberOfFields else { return }
            viewModel.otpField.append(char)
        }
    }
}

如果需要调整动画的播放速度，只需要修改0.1这个数值即可，数值越小动画播放越快，数值越大越慢。

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