Hi,
I’m working on my own app, which is a mix form several courses, like Learning App, Recipe App and Firebase interactions. The topic is some kind of diary.
The use case , where I need an idea or hint:
- The user has received the data from the database. Works fine.
- The data are displayed on the screen, e.g. if it is sunny or cloudy. In my picture below it is the field marked by the cloud symbol.
- The user wants to change the entry. Not in the extra, grey field, where the binding is defined (In my example the grey text “Wolken”. I would like to have only one field, where the stored text is displayed, where the user can edit the text and then store it later.
The problem is to understand the usage of TextField or of a maybe more appropriate view.
Data down- and upload works fine.
Any ideas are welcome.
Thanks a lot and best regards,
Ralf
What do you mean by “store it later”? Will the text typed in the TextField, at some point, replace “Woken”? What does the user do to cause the replacement to happen?
Hi Pete,
The text in the TextField shall replace e.g. the word “Wolken”. After typing the new content the user hits enter and I use the onCommit modifier.
The logic and the programmatically part work fine. But in the UI I do not want to have both entries: the black written content to be edited and the grey text, where the user input is typed.
I hope that there is a way to modify the black written text, confirm with Enter and to continue whatever I want to do in the app.
For the time being the new input is stored = uploaded immediately to Firebase.
As soon as I’ve learned more about Core Data I’ll store them locally first and upload later.
Can we see the code you have now, so we can suggest changes?
Do you have an @State variable that holds the text that you want to change?
Please find the code below concerning the TextField. If you want I can post more.
But it is not a question of programmatic, its a question of layout to get rid of the grey text and only to work with the black one.
Yes, I do use State variables
HStack (spacing: 20){
Image(systemName: "cloud")
.resizable()
.frame(width: 30, height: 20, alignment: .leading)
.foregroundColor(.blue)
// Text(eintragGewaehltesDatum.beobachtungen[index].himmel)
TextField(eintragGewaehltesDatum.beobachtungen[index].himmel, text: $himmel) { isEditing in
self.isEditing = isEditing
} onCommit: {
b.himmel = himmel
firebaseModel.saveTBEintragBeobachtung(zuAendernderEintrag: eintragGewaehltesDatum, feldname: "himmel", beobachtungsid: b.id, wert: b.himmel)
}
.autocapitalization(.none)
.disableAutocorrection(true)
Image(systemName: "wind")
.resizable()
.frame(width: 30, height: 20, alignment: .leading)
.foregroundColor(.blue)
Text(eintragGewaehltesDatum.beobachtungen[index].wind)
}
So I see that you commented out the black text. Now you have what you want, except that the text in the TextField is gray instead of black?
No, unfortunately not. I only commented out the Text view for only displaying the content.
The TextField view still displays a black and a grey part. This costs a lot of place in the UI.
I am still wondering if it is possible to display only the black text and allow the user to edit there.
I wonder if the black text is a label. Try replacing the first argument in TextField with “”.
When I use TextField, the first argument shows up as grey text inside the field when it’s empty. I don’t understand why it shows up to the left of the field in your case.
Good idea, Pete. I guess it is solved.
I had to add the .onAppear modifier to TextField to fill it with the content from the database. Then I can edit the text, commit and it is saved in the database.
Many thanks. Great help!
TextField("", text: $himmel) { isEditing in
self.isEditing = isEditing
} onCommit: {
b.himmel = himmel
firebaseModel.saveTBEintragBeobachtung(zuAendernderEintrag: eintragGewaehltesDatum, feldname: “himmel”, beobachtungsid: b.id, wert: b.himmel)
}
.autocapitalization(.none)
.disableAutocorrection(true)
.onAppear {
himmel = b.himmel
}
