SwiftUI整数输入框占位符动画实现求助

问题根源 #

你的Int输入框动画失效的核心原因有两个：

1. Int类型默认值为0时，fieldText.description.isEmpty永远为false（0的字符串描述是"0"），导致动画触发条件从未满足。
2. 原代码中TextField直接使用fieldTitle作为内置占位符，和自定义的Text占位符冲突，干扰了视觉效果。

下面提供三种适配不同需求的解决方案，均保留Int类型用于后续计算：

方案一：基于值是否为0触发动画（简单直接） #

适合不需要区分「默认0」和「用户主动输入0」的场景，只要值为0就显示原位占位符，值不为0则触发动画。

struct IntInputField: View {
    var fieldTitle: String
    @Binding var fieldText: Int
    
    init(_ fieldTitle: String, fieldText: Binding<Int>) {
        self.fieldTitle = fieldTitle
        self._fieldText = fieldText
    }
    
    var body: some View {
        ZStack(alignment: .leading) {
            Text(fieldTitle)
                .foregroundColor(fieldText == 0 ? Color(.placeholderText) : .accentColor)
                .offset(y: fieldText == 0 ? 0 : -25)
                .scaleEffect(fieldText == 0 ? 1 : 0.8, anchor: .leading)
            
            // 清空内置占位符，使用自定义Text作为占位符
            TextField("", value: $fieldText, formatter: NumberFormatter())
                .keyboardType(.numberPad)
        }
        .padding(.top, 15)
        .animation(.easeInOut, value: fieldText)
    }
}

优化点： #

• 把动画绑定到fieldText的值变化上，仅当数值改变时触发动画，避免不必要的刷新。
• 添加.keyboardType(.numberPad)优化数字输入体验。

方案二：区分默认0和用户输入的0 #

适合需要用户主动输入0时也触发动画的场景，通过状态变量跟踪用户是否编辑过输入框：

struct IntInputField: View {
    var fieldTitle: String
    @Binding var fieldText: Int
    @State private var hasBeenEdited = false
    
    init(_ fieldTitle: String, fieldText: Binding<Int>) {
        self.fieldTitle = fieldTitle
        self._fieldText = fieldText
    }
    
    var body: some View {
        ZStack(alignment: .leading) {
            Text(fieldTitle)
                .foregroundColor(shouldShowPlaceholder ? Color(.placeholderText) : .accentColor)
                .offset(y: shouldShowPlaceholder ? 0 : -25)
                .scaleEffect(shouldShowPlaceholder ? 1 : 0.8, anchor: .leading)
            
            TextField("", value: $fieldText, formatter: NumberFormatter())
                .keyboardType(.numberPad)
                .onEditingChanged { isEditing in
                    if isEditing { hasBeenEdited = true }
                }
                .onChange(of: fieldText) { _ in
                    hasBeenEdited = true
                }
        }
        .padding(.top, 15)
        .animation(.easeInOut, value: shouldShowPlaceholder)
    }
    
    private var shouldShowPlaceholder: Bool {
        // 仅当未编辑过且值为0时，显示原位占位符
        !hasBeenEdited && fieldText == 0
    }
}

逻辑说明： #

• hasBeenEdited标记用户是否与输入框交互过，只要编辑过，即使值回到0，占位符也保持上移状态。
• 同时监听onEditingChanged和onChange，确保所有编辑场景都能正确更新状态。

方案三：支持输入框为空状态 #

如果希望用户可以清空输入框（显示为空），同时绑定值保持Int类型，使用Optional作为中间层：

struct IntInputField: View {
    var fieldTitle: String
    @Binding var fieldText: Int
    @State private var optionalValue: Int?
    
    init(_ fieldTitle: String, fieldText: Binding<Int>) {
        self.fieldTitle = fieldTitle
        self._fieldText = fieldText
        // 初始化时：绑定值为0则设为nil，否则设为对应数值
        self._optionalValue = State(initialValue: fieldText.wrappedValue == 0 ? nil : fieldText.wrappedValue)
    }
    
    var body: some View {
        ZStack(alignment: .leading) {
            Text(fieldTitle)
                .foregroundColor(optionalValue == nil ? Color(.placeholderText) : .accentColor)
                .offset(y: optionalValue == nil ? 0 : -25)
                .scaleEffect(optionalValue == nil ? 1 : 0.8, anchor: .leading)
            
            TextField("", value: $optionalValue, formatter: NumberFormatter())
                .keyboardType(.numberPad)
                .onChange(of: optionalValue) { newValue in
                    // 同步可选值到绑定的Int：nil对应0，否则取对应数值
                    fieldText = newValue ?? 0
                }
        }
        .padding(.top, 15)
        .animation(.easeInOut, value: optionalValue)
    }
}

优势： #

• 用户可以删除输入框内容使其变为空，此时占位符恢复原位，同时绑定的Int值自动设为0。
• 完全保留Int类型的绑定，不影响后续数学计算。

使用示例 #

三种方案的调用方式和你的String版本一致：

IntInputField("Total Players", fieldText: $league.totalPlayers)

内容的提问来源于stack exchange，提问作者S. Hatmaker