Form 和 HStack 中的 TextField 对齐

Question

我想显示一个包含 HStack 的表单。在这个 HStack 中，我有一个 Text 和一个 TextField。 TextField 应在右侧对齐，文本在左侧。 我已经尝试过使用 Spacers、使用 TextBaseline、使用网格，但没有任何效果。

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?")
        }
        
    }
}

我使用固定大小的文本字段来制作它，但是文本字段太小了。大约有50帧。 我希望文本字段在右侧对齐，当用户输入内容时，它应该扩展到左侧。 它与“Produkt：”组件有关。

Answer 1

可以通过应用

TextField

来控制

.multilineTextAlignment

内文本的对齐方式。

当字段获得焦点时，您希望对齐方式为

.leading

，但在其他时候为

.trailing

。这意味着，您需要检测字段何时获得焦点。为此可以使用

FocusState

变量。

@FocusState private var focusedField: Int?

然后你只需要将包含该字段的

HStack

更改为以下内容：

HStack {
    Text("Produkt:")
    TextField("Produktname", text: $items[index].name)
        .focused($focusedField, equals: index)
        .multilineTextAlignment(focusedField == index ? .leading : .trailing)
}