SwiftUI：键盘收起时悬浮标签TextField动画与键盘动画冲突问题

我实现了一个简易的“悬浮标签文本框”，当文本框获得焦点或包含内容时标签会上浮。但在文本框无内容且键盘收起时，标签按SwiftUI设定的动画移动到最终位置，文本框却随键盘动画同步移动，该问题仅在文本框未置于ScrollView中时出现。

问题演示：

原代码示例 #

@available(iOS 15.0, *)
struct RaisedLabelTextField2: View {

    @State private var value = ""
    @FocusState private var isFocused

    private var raiseLabel: Bool { !value.isEmpty || isFocused }

    var body: some View {
        TextField("", text: $value)
            .focused($isFocused)
            .background(alignment: .topLeading) {
                Text("Label 2")
                    .alignmentGuide(.top) { d in
                        raiseLabel ? d.height : 0
                    }
            }
            .textFieldStyle(.plain)
            .background(Color.gray)
            .animation(.easeOut(duration: 0.2), value: raiseLabel)
    }
}

struct RaisedLabelTextField1_Previews: PreviewProvider {
    static var previews: some View {
        RaisedLabelTextField2()
    }
}

问题原因 #

原方案通过alignmentGuide调整标签位置，并给整个文本框容器添加动画，导致键盘弹出/收起时，系统的自动布局动画和自定义动画冲突。没有ScrollView时，系统会直接移动文本框位置，进而带动标签的布局变化，出现不同步的情况。

修复方案 #

改用ZStack分离标签和文本框的布局，让动画仅作用于标签本身，避免和系统键盘动画产生联动：

@available(iOS 15.0, *)
struct RaisedLabelTextFieldFixed: View {
    @State private var value = ""
    @FocusState private var isFocused
    private var raiseLabel: Bool { !value.isEmpty || isFocused }

    var body: some View {
        ZStack(alignment: .topLeading) {
            // 文本框主体
            TextField("", text: $value)
                .focused($isFocused)
                .textFieldStyle(.plain)
                .background(Color.gray)
                .padding(.top, 8) // 给上浮的标签预留空间
            
            // 悬浮标签
            Text("Label 2")
                .offset(y: raiseLabel ? -16 : 0)
                .scaleEffect(raiseLabel ? 0.8 : 1)
                .animation(.easeOut(duration: 0.2), value: raiseLabel)
                .padding(.horizontal, 4)
                .background(Color.white)
                .allowsHitTesting(false) // 避免标签干扰文本框点击
        }
    }
}

struct RaisedLabelTextFieldFixed_Previews: PreviewProvider {
    static var previews: some View {
        RaisedLabelTextFieldFixed()
    }
}

关键修改点 #

• 使用ZStack将标签和文本框置于同一层级，彻底分离两者的布局逻辑
• 用offset和scaleEffect控制标签的上浮效果，动画仅作用于标签，不会影响文本框的位置
• 给文本框添加顶部内边距，避免标签回落时和输入内容重叠
• 给标签添加白色背景并禁用点击检测，提升交互体验和视觉清晰度

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