SwiftUI中如何修复Toggle控件的水平对齐定位问题？

问题原因 #

你遇到的对齐偏差，核心是控件默认布局特性不匹配：

• TextEditor是为多行文本设计的，默认带有上下内边距且高度较大
• Toggle默认采用垂直居中布局，当HStack使用默认的.center对齐时，Toggle会与TextEditor的垂直中心对齐，视觉上就会显得位置偏低

最优解决方案：替换TextEditor为TextField #

因为你的场景是单行输入（名称、数量），用TextField更合适，它的默认布局高度和对齐逻辑与Toggle天然匹配，无需额外调整：

import SwiftUI

struct PlayerEditCell: View {
    @State private var fullText: String = "Name"
    @State private var quantity: String = "5"
    @State private var active: Bool = true
    
    var body: some View {
        HStack(alignment: .center) {
            TextField("Name", text: $fullText)
                .padding(.leading)
                .frame(width: 160.0)
                .font(.custom("HelveticaNeue", size: 20))
            
            TextField("5", text: $quantity)
                .frame(width: 20.0)
                .font(.custom("HelveticaNeue", size: 20))
            
            Toggle(isOn: $active) {
                Text("Active")
            }
            .padding(.trailing)
        }
    }
}

struct PlayerEditCell_Previews: PreviewProvider {
    static var previews: some View {
        PlayerEditCell()
    }
}

若坚持使用TextEditor的解决方案 #

如果必须保留TextEditor，需要强制统一垂直对齐方式并修正TextEditor的默认内边距：

import SwiftUI

struct PlayerEditCell: View {
    @State private var fullText: String = "Name"
    @State private var quantity: String = "5"
    @State private var active: Bool = true
    
    var body: some View {
        // 设置HStack为顶部对齐，让所有控件顶端对齐
        HStack(alignment: .top) {
            TextEditor(text: $fullText)
                .padding(.leading)
                .frame(width: 160.0)
                .font(.custom("HelveticaNeue", size: 20))
                .lineLimit(1) // 限制为单行，避免多行高度膨胀
                .scrollContentBackground(.hidden) // 隐藏默认背景
                .padding(.vertical, 0) // 去掉默认上下内边距
            
            TextEditor(text: $quantity)
                .frame(width: 20.0)
                .font(.custom("HelveticaNeue", size: 20))
                .lineLimit(1)
                .scrollContentBackground(.hidden)
                .padding(.vertical, 0)
            
            Toggle(isOn: $active) {
                Text("Active")
            }
            .padding(.trailing)
            .alignmentGuide(.top) { $0[.top] } // 强制Toggle与其他控件顶部对齐
        }
    }
}

struct PlayerEditCell_Previews: PreviewProvider {
    static var previews: some View {
        PlayerEditCell()
    }
}

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