SwiftUI自定义TextFieldView出现显示动画异常问题

两处动画异常均由SwiftUI的布局与动画叠加逻辑导致：

• 使用if条件控制清除按钮Image的挂载/卸载时，HStack会在子视图增减时重新计算所有子视图的布局宽度，直接带动TextField尺寸突变，引发输入文本弹跳错位
• 焦点状态切换时，SwiftUI焦点系统本身自带内置过渡动画，和条件视图插入/移除的默认动画叠加后，就会出现清除按钮动画表现怪异的问题

你调试时发现的「始终保留Image视图、仅修改透明度控制显隐」的思路是完全正确的：这种方式不会改变HStack的子视图结构，布局全程稳定，从根源上避免了重算带来的异常。

不要用条件判断控制清除按钮的挂载卸载，始终将其保留在视图层级中，通过透明度控制显隐、交互禁用控制点击响应，同时抽离公共的显隐判断逻辑，搭配稳定的显式动画即可解决问题。修复后的完整组件代码如下：

enum Field {
    case email, name
}

struct TV3TFV: View {
    let placeholder: String
    @Binding var text: String
    var ff: FocusState<Field?>.Binding
    var assignedField: Field
    @State private var isShowingDeleteSign: Bool = false
    
    var body: some View {
        HStack {
            TextField(placeholder, text: $text)
                .focused(ff, equals: assignedField)
            
            Image(systemName: "xmark.circle.fill")
                .resizable()
                .frame(width: 16, height: 16)
                .foregroundColor(.secondary)
                // 按钮隐藏时禁用点击，避免透传交互
                .allowsHitTesting(isShowingDeleteSign)
                // 通过透明度控制显隐，不触发HStack布局重算
                .opacity(isShowingDeleteSign ? 1 : 0)
                .animation(.easeInOut(duration: 0.15), value: isShowingDeleteSign)
                // 补充清除按钮的点击清空逻辑，符合通用交互预期
                .onTapGesture {
                    text = ""
                }
        }
        .padding()
        .frame(height: 44)
        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 8, style: .continuous))
        .padding(.horizontal)
        .onChange(of: text) { _ in
            updateDeleteButtonVisibility()
        }
        .onChange(of: ff.wrappedValue) { _ in
            updateDeleteButtonVisibility()
        }
    }
    
    // 抽离公共显隐判断逻辑，避免重复代码
    private func updateDeleteButtonVisibility() {
        let shouldShow = ff.wrappedValue == assignedField && !text.isEmpty
        // 仅在状态实际变化时触发更新，减少冗余动画调用
        guard isShowingDeleteSign != shouldShow else { return }
        withAnimation(.easeInOut(duration: 0.15)) {
            isShowingDeleteSign = shouldShow
        }
    }
}

• 全程保留清除按钮在HStack的视图层级中，子视图结构无变化，不会触发TextField尺寸重算，彻底解决文本弹跳错位问题
• 用opacity实现视觉显隐、allowsHitTesting控制交互范围，效果和条件挂载完全一致，不会出现隐藏状态下误触的问题
• 为清除按钮单独绑定动画，避免和焦点系统的内置动画、父视图其他动画冲突，显隐过渡自然稳定
• 组件对外接口完全不变，原有调用代码无需任何调整即可直接使用
• 补充了清除按钮的点击清空逻辑，符合通用输入框的交互预期

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