SwiftUI-單擊按鈕時添加一行多個文本欄位/視圖

我正在SwiftUI構建一個功能，用戶可以在其中單擊按鈕來創建行，并且每行都有多個視圖（文本欄位、單選按鈕...）[見下圖] 我創建了一個 swift 類DynamicSkills，用于處理items 和“添加”按鈕，但是當我單擊“添加”時，應用程式完全崩潰，下面是我到目前為止的代碼和顯示它應該如何的影像，我剛開始使用 SwiftUI，我沒有完全掌握Binding<>.

我應該怎么做才能讓它啟動并運行？

//DynamicSkills.swift
struct SkillListEditor: View {

    @Binding var evalList: [String]
    @Binding var skillList: [String]

    func getBindingS(forIndex index: Int) -> Binding<String> {
        return Binding<String>(get: { skillList[index] },
                           set: { skillList[index] = $0 })
    }

    func getBindingE(forIndex index: Int) -> Binding<String> {
        return Binding<String>(get: { evalList[index] },
                           set: { evalList[index] = $0 })
    }


    var body: some View {
        ForEach(0..<skillList.count, id: \.self) { index in
            ListItem(skillEvaluation: getBindingE(forIndex: index), text: getBindingS(forIndex: index)) { self.skillList.remove(at: index) }
        }
        AddButton{ self.skillList.append("") }
    }
}

fileprivate struct ListItem: View {

    @Binding var skillEvaluation: String
    @Binding var text: String
    var removeAction: () -> Void

    var body: some View {
        VStack(alignment: .leading){
            Spacer().frame(height: 8)
            HStack{
                Button(action: removeAction) {
                    Image(systemName: "minus.circle.fill")
                        .foregroundColor(.red)
                        .padding(.horizontal)
                }
                TextField("Skill", text: $text)
                    .padding(.all)
                    .background(Color(red: 239.0/255.0, green: 243.0/255.0, blue: 244.0/255.0, opacity: 1.0))
                    .cornerRadius(6)
            }
            HStack{
                Text("Evaluation").font(.callout)
                Spacer()
            }
            HStack{
                RadioButtonField(id: "1", label: "1", isMarked: $skillEvaluation.wrappedValue == "1" ? true : false) { selected in
                    self.skillEvaluation = selected
                }
                Spacer()
                RadioButtonField(id: "2", label: "2", isMarked: $skillEvaluation.wrappedValue == "2" ? true : false) { selected in
                    self.skillEvaluation = selected
                }
                Spacer()
                RadioButtonField(id: "3", label: "3", isMarked: $skillEvaluation.wrappedValue == "3" ? true : false) { selected in
                    self.skillEvaluation = selected
                }
                Spacer()
                RadioButtonField(id: "4", label: "4", isMarked: $skillEvaluation.wrappedValue == "4" ? true : false) { selected in
                    self.skillEvaluation = selected
                }
                Spacer()
                RadioButtonField(id: "5", label: "5", isMarked: $skillEvaluation.wrappedValue == "5" ? true : false) { selected in
                    self.skillEvaluation = selected
                }
            }
        }
    }
}

fileprivate struct AddButton: View {

    var addAction: () -> Void

    var body: some View {
        HStack{
            Spacer()
            Button(action: addAction) {
                    Text("add skill").padding(.horizontal, 12).padding(.vertical, 6).background(.white).foregroundColor(Color("PassioGreen")).overlay(RoundedRectangle(cornerRadius: 25).stroke(Color("PassioGreen"), lineWidth: 2))
                }
        }.padding(.top, 14)
    }
} 

在我的主螢屏中，ContentView我以這種方式顯示：

//ContentView.swift

@State var skills = [String]()
@State var skillsEvals = [String]()

struct ContentView: View {
    NavigationView{
        VStack{
            HStack{
            Text("Skills").font(.headline)
            Spacer()
        }
        HStack{
            Text("Add up to 5 skills").font(.callout)
            Spacer()
        }
        SkillListEditor(evalList: $skillsEvals, skillList: $skills)
        }
    }
}

更新：這是自定義單選按鈕類 CustomRadio.swift

//Custom Radio button used:
struct RadioButtonField: View {
    let id: String
    let label: String
    let isMarked: Bool
    let callback: (String)->()

    init(
        id: String,
        label:String,
        isMarked: Bool = false,
        callback: @escaping (String)->()
    ) {
        self.id = id
        self.label = label
        self.isMarked = isMarked
        self.callback = callback
    }

    var body: some View {
        Button(action:{
            self.callback(self.id)
        }) {
            VStack(alignment: .center) {
                Text(label).foregroundColor(self.isMarked ? .white : .black).bold().padding(.horizontal, 8).padding(.vertical, 8)
            }
        }
        .padding()
        .background(self.isMarked ? Color("PassioGreen") : Color(red: 239.0/255.0, green: 243.0/255.0, blue: 244.0/255.0, opacity: 1.0))
        .cornerRadius(10)
    }
}

uj5u.com熱心網友回復：

您的AddButton操作會向 追加專案skillList，但不會向 追加專案evalList。因此，當ListItem使用其skillEvaluation系結時，系結的 getter 會嘗試訪問evalList不存在的元素。

嘗試這個：

AddButton {
    self.evalList.append("")
    self.skillList.append("")
}

標籤：ios 迅速 迅捷 swiftui 列表

上一篇：為什么` 0n`會拋出錯誤而`-0n`不會？

下一篇：是否有一種組合方式來阻止多個請求被觸發？