What textfield / view to show and edit text in SwiftUI?

Question

I would like to edit an item, for example, I have an item named "Jacket", then I would like to edit with a new name "Gray Jacket"

Now I'll have the list of my items, and when I press the "Jacket" item, it will go to the DetailItem and when it appears, I want that textfield / view already filled with "Jacket" text then I able to edit it. Please note I want to use real text not placeholder when the item name first shows up.

Does anyone know what element should I use, or if textfield how? Because I couldn't find how to set textfield with name when it first appears.

UPDATE:

Here's what I've tried, this code I took it from here. It basically took the previous text and make it a placeholder, while actually I want it to be editable.

struct CustomTextField: View {
var placeholder: Text
@Binding var text: String
var editingChanged: (Bool)->() = { _ in }
var commit: ()->() = { }

var body: some View {
    ZStack(alignment: .leading) {
        if text.isEmpty { placeholder }
        TextField("", text: $text, onEditingChanged: editingChanged, onCommit: commit)
    }
}
}

struct UsageCustomTxtField: View {
@State var text = ""

var body: some View {
    CustomTextField(
        placeholder: Text("placeholder").foregroundColor(.black),
        text: $text
    )
}
}

Please provide some code. What have you tried? What didn't work? What errors did you get? https://stackoverflow.com/help/minimal-reproducible-example — Simon, Apr 16 '21 at 17:06
@Simon take a look at my code so far. it is similar with the code you have provided, where actually I want that code to be editable, not just a placeholder. Is there any view / element that I can use to reach what I want or is there the API for what I want yet? — Aldo Sugiarto, Apr 18 '21 at 16:10
AH my bad, I want that TEXT to be editable. so whatever the current name shows up, I want that to be editable like you can delete some few characters or add some words, and not gone like it's a placeholder. Just like when you edit item if u know — Aldo Sugiarto, Apr 19 '21 at 01:14

Simon · Answer 1 · 2021-04-16T17:09:06.970

Here is a possible solution:

import SwiftUI

struct ContentView: View {
    
    @ObservedObject var myItems: ItemViewModel = ItemViewModel()
    @State var myNewName: String = "" // Will set the new name
        
    var body: some View {
        VStack {
            TextField(self.myItems.myList[0].name, // when it appears, I want that textfield / view already filled with "Jacket" text
                      text: self.$myNewName,
                      onCommit: {
                        self.myItems.changeNameOfListItemTo(newName: self.myNewName, index: 0) I would like to edit with a new name "Gray Jacket"
                        self.myNewName = "" //empty the textfield again so name from item itself will be displayed
                      })
        }
    }
    
}

struct Item { // I have an item named "Jacket"
    var name: String
    
    init(name: String) {
        self.name = name
    }
}


class ItemViewModel: ObservableObject {
    
    @Published var myList: Array<Item> = [Item(name: "Jacket")] //your item list
    
    func changeNameOfListItemTo(newName: String, index: Int) { //function to change the name of an item
        self.myList[0].name = newName
    }
    
}

What textfield / view to show and edit text in SwiftUI?

1 Answers1