Swiftリスト内の行内容をユーザーが編集できるようにする

Question

現在、swiftでリストを作成しているのですが、リストで表示させた行の内容をナビゲーションで飛ばさず、リスト画面のまま、編集したいと考えているのですが、行き詰まっております。

下記のようにするとCannot convert value of type 'Binding<[String]>' to expected argument type 'Binding<String>’というエラー発生。

List{
ForEach(0..<tasks.count, id: .self) { task in
TextField("PlainTextFieldStyle", text: $tasks)}
//Text(self.tasks[task])}
.onDelete(perform: rowRemove)
}

リストの行の配列の要素の中身をユーザーが変更できるようにできれば良いのですが、swiftUIの場合、それをどのような仕組みで実現できるのか、ご教示いただければ幸いです。

何卒よろしくお願いいたします。

import SwiftUI

struct ContentView: View {
  
    @State var tasks = ["リスト１", "リスト２", "リスト３", "リスト４", "リスト５"]
    //@State var tasks = [String]()
    @State var newtask = ""
    
    var body: some View {
        VStack {
            NavigationView{
            List{
                ForEach(0..<tasks.count, id: .self) { task in
                    Text(self.tasks[task])}
                    .onDelete(perform: rowRemove)
                }
            .navigationBarTitle("Menu")
            }
            HStack {
                Spacer()
                Button(action: {
                    self.tasks.append(self.newtask)
                                           self.newtask = ""
                    //self.tasks = createTasks()
                }) {
                    Image(systemName:"pencil.tip.crop.circle.badge.plus")
                        .resizable()
                        .foregroundColor(/*@START_MENU_TOKEN@*/.black/*@END_MENU_TOKEN@*/)
                        .padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
                        .scaledToFit()
                        .frame(width: 80, height: 80)
                }
            }
            }
        }

    func rowRemove(offsets: IndexSet) {
            tasks.remove(atOffsets: offsets)
        }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

Binding<String> 型にしてあげれば大丈夫だと思います。

List{
    ForEach(0..<tasks.count, id: .self) { index in
        TextField("ここはPlaceholder", text: $tasks[index])
    }
    .onDelete(perform: rowRemove)
}

編集したデータの保存は別途考慮する必要ありますね。

Comments

[naki888]

ご回答ありがとうございます。無事反映することができました。大変勉強になりました。データ保存についても考えてみます。

[TakuyaAso]

良かったです！