SwiftUI垂直轴TextField为空时无法与firstTextBaseline对齐问题

当使用HStack(alignment: .firstTextBaseline)对齐多行TextField（设置axis: .vertical）和Text组件时，TextField为空仅显示占位符会出现向下偏移的问题——这是因为系统默认的多行TextField占位符布局基线与普通Text不一致。以下是两种可靠的解决方法：

方法一：自定义占位符（推荐） #

通过自定义placeholder修饰符，用普通Text组件替代系统默认占位符，确保占位符与旁边的Text使用相同的基线规则：

struct TextFieldAlignmentFix: View {
    
    @State private var text: String = ""
    
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            Text("1")
            // 初始化时不设置系统占位符
            TextField("", text: $text, axis: .vertical)
                .placeholder(when: text.isEmpty) {
                    Text("Text")
                }
        }
        .padding()
    }
}

// 自定义placeholder修饰符，控制占位符显示逻辑
extension View {
    func placeholder<Content: View>(
        when shouldShow: Bool,
        alignment: Alignment = .leading,
        @ViewBuilder placeholder: () -> Content
    ) -> some View {
        ZStack(alignment: alignment) {
            placeholder().opacity(shouldShow ? 1 : 0)
            self.opacity(shouldShow ? 0 : 1)
        }
    }
}

这种方法适配所有字体和布局场景，占位符的基线会和旁边的Text完全对齐，同时保留多行TextField的功能和.firstTextBaseline对齐规则。

方法二：手动调整基线偏移 #

如果不想自定义占位符，可以通过alignmentGuide手动调整TextField的基线位置，针对空文本的情况修正偏移：

struct TextFieldAlignmentFix: View {
    
    @State private var text: String = ""
    
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            Text("1")
            TextField("Text", text: $text, axis: .vertical)
                .alignmentGuide(.firstTextBaseline) { dimension in
                    // 根据实际测试调整偏移量，示例中为-4，可根据字体大小微调
                    text.isEmpty ? dimension[.firstTextBaseline] - 4 : dimension[.firstTextBaseline]
                }
        }
        .padding()
    }
}

注意：这种方法的偏移量需要根据使用的字体和字号手动调整，通用性稍差，但实现更简洁。

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