请求优化SwiftUI FloatingTextField以支持横竖双轴显示

原组件在水平模式下的核心逻辑可以保留，针对垂直模式的布局特性做针对性调整即可，以下是修改后的完整代码及说明：

import SwiftUI

struct FloatingTextField: View {
    let title: String
    @Binding var text: String
    var axis: Axis = .horizontal
    
    // 根据文本状态计算标题偏移量
    private var titleOffset: CGSize {
        text.isEmpty ? .zero : CGSize(width: 0, height: -25)
    }
    
    // 针对不同轴模式设置TextField内边距，避免文本与标题重叠
    private var textFieldPadding: EdgeInsets {
        switch axis {
        case .horizontal:
            return EdgeInsets(top: 8, leading: 0, bottom: 8, trailing: 0)
        case .vertical:
            return EdgeInsets(top: 12, leading: 0, bottom: 12, trailing: 0)
        }
    }
    
    var body: some View {
        ZStack(alignment: .leading) {
            Text(title)
                .foregroundColor(text.isEmpty ? Color(.placeholderText) : .accentColor)
                .offset(titleOffset)
                .scaleEffect(text.isEmpty ? 1 : 0.75, anchor: .leading)
                .padding(.leading, 4) // 微调标题与输入文本的对齐度
            
            TextField("", text: $text, axis: axis)
                .padding(textFieldPadding)
                .background(
                    // 可选：添加边框方便视觉区分，可根据需求移除
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color(.systemGray4), lineWidth: 1)
                )
        }
        .padding(.top, text.isEmpty ? 0 : 8) // 标题上浮时增加顶部内边距，避免被截断
        .animation(.spring(response: 0.4, dampingFraction: 0.3), value: text)
    }
}

// 预览测试
struct FloatingTextField_Previews: PreviewProvider {
    static var previews: some View {
        VStack(spacing: 20) {
            FloatingTextField(title: "Address", text: .constant(""))
            FloatingTextField(title: "Address", text: .constant("123 Main St, New York"))
            FloatingTextField(title: "Notes", text: .constant(""), axis: .vertical)
            FloatingTextField(title: "Notes", text: .constant("This is a multi-line note that wraps across multiple lines to test the vertical axis functionality. It should adapt smoothly as more text is added."), axis: .vertical)
        }
        .padding()
    }
}

关键修改点说明 #

• 保留原有水平模式体验：所有原动画逻辑、标题上浮/缩放效果完全保留，水平模式使用体验与之前一致。
• 适配垂直模式布局：
  • 针对垂直模式的多行输入特性，增加TextField的上下内边距，避免输入文本与上浮后的标题重叠。
  • 微调标题的左内边距，让其与TextField的输入文本对齐更自然。
  • 动态调整外层顶部内边距，防止上浮后的标题被父容器截断。
• 统一逻辑复用：通过计算属性统一管理标题偏移和内边距，避免重复代码，同时保证两种模式的交互一致性。

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