SwiftUI中Form内HStack的TextField右对齐实现问题

需要在SwiftUI的Form中实现如下布局：

• HStack内的Text左对齐，TextField右对齐
• 用户输入内容时，TextField向左扩展（而非向右撑大）
• 尝试过Spacer、TextBaseline、Grid等方案均无效，设置固定宽度会导致TextField尺寸过小
• 问题针对代码中“Produkt:”对应的组件

struct GeschenkeDetailView: View {
    
    @State private var anzahlItems: Int = 0
    @State private var showArrivedAlert: Bool = false
    @State private var showDeleteAlert: Bool = false
    
    @Binding var personName: String
    @Binding var items: [GeschenkItem]
    
    
    var body: some View {
        Form {
            Section("Für wen ist das Geschenk?") {
                TextField("Name", text: $personName)
                    .bold()
            }
            
            ForEach(items.indices, id: \.self) { index in
                let item = items[index]
                
                Section("Produkt \(anzahlItems + index + 1)") {
                    
                    HStack {
                        Text("Produkt:")
                        Spacer()
                        //Text(item.name)
                        TextField("Produktname", text: $items[index].name)
                            .aspectRatio(contentMode: .fit)
                    }
                    
                    Picker("Status:", selection: $items[index].status) {
                        ForEach(Status.allCases, id: \.self) { status in
                            Text(status.asString).tag(status)
                        }
                    }
                    .pickerStyle(.menu)
                    .accentColor(item.status.color)
                    
                    HStack {
                        Text("Preis:")
                        Spacer()
                        Text("\(item.preis)€")
                    }
                    
                    LazyVGrid(columns: [GridItem(), GridItem()]) {
                        Button(action: {
                            showArrivedAlert = true
                        }, label: {
                            Text("Produkt angekommen")
                                .multilineTextAlignment(.center)
                                .foregroundStyle(.green)
                        })
                        .buttonStyle(BorderlessButtonStyle())
                        
                        Button(action: {
                            showDeleteAlert = true
                        }, label: {
                            Text("Produkt löschen")
                                .multilineTextAlignment(.center)
                                .foregroundStyle(.red)
                        })
                        .buttonStyle(BorderlessButtonStyle())
                        
                    }
                }
            }
            
            Section {
                Button(action: {}, label: {
                    Text("Angekommene Produkte")
                })
            }
            .frame(maxWidth: .infinity)
            
            Section {
                Button("Person löschen", role: .destructive) {
                    
                }
            }
            .frame(maxWidth: .infinity)
            
        }
        .alert("Produkt angekommen?", isPresented: $showArrivedAlert) {
            Button("Abbrechen") {
                
            }
            
            Button(action: {}, label: {
                Text("Angekommen")
                    .bold()
            })
            
        } message: {
            Text("Sie können diese Produkte jederzeit erneut einsehen und wiederherstellen.")
        }
        
        .alert("Produkt löschen?", isPresented: $showDeleteAlert) {
            Button("Behalten", role: .cancel) {
                
            }
            
            Button("Löschen", role: .destructive) {
                
            }
            
        } message: {
            Text("Bist du dir sicher das du dieses Produkt löschen möchtest?")
        }
        
    }
}

修改“Produkt:”对应的HStack布局，核心是给TextField设置最大宽度占满剩余空间，并将内容右对齐，同时移除限制尺寸的aspectRatio修饰符：

HStack {
    Text("Produkt:")
    Spacer()
    TextField("Produktname", text: $items[index].name)
        .frame(maxWidth: .infinity, alignment: .trailing)
}

原理说明 #

• frame(maxWidth: .infinity)让TextField占据HStack中Text和Spacer之外的所有剩余空间
• alignment: .trailing确保输入的内容始终右对齐，当内容长度增加时，会向左扩展显示，符合需求
• 移除aspectRatio(contentMode: .fit)，避免它限制TextField的宽度调整

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