我看到了很多关于如何使用空TextField来收集新的值的例子和教程,但是没有一个例子显示如何使用TextField来编辑一个值。
在我的使用案例中,我想让TextField从我的viewmodel中预先填充数据,然后当用户编辑数据时,应该启用一个保存按钮。在我的表单中,我也有一个导航链接,导致一个子页面,用户可以从列表中选择一些东西,然后被路由回表单。
只要我使用一个空字段,它的表现就像描述的那样;用户可以在字段中输入一些临时的东西,然后导航到子页面,临时值仍然像他离开时一样。
struct TextFieldDemo: View {
var model:String // Actual a more complex view model
@State var editedValue:String = ""
var body: some View {
VStack(alignment: .leading, spacing: 20) {
Group{
Text("Some label")
TextField("Placeholder text", text: $editedValue)
}
Divider()
Text("Some navigation link to push in a page where " +
"the user can select something from a list and click back...")
// If the user starts to edit the textfield - follows a navigation link and comes back
// he should be able to continue edit the field where he left of - the text field should
// not have been reset to the original value.
Button(action: {
// Call some save function in the ViewModel
},label: {
Text("SAVE")
}
).disabled(model == editedValue)
}.onAppear(){
// I could have done something like:
// self.editedValue = model
// but it seems like this will fire if the user navigates into the described page and reset
// the TextField to the model value.
}
}
}
struct TextFieldDemo_Previews: PreviewProvider {
static var previews: some View {
TextFieldDemo(model: "The old value")
}
}
要用模型中的值初始化文本字段,你需要定义你自己的初始化器并使用 State(wrappedValue:)
的初始化器 @State
vars。
struct TextFieldDemo: View {
var model:String // Actual a more complex view model
@State var editedValue: String
init(model: String) {
self.model = model
self._editedValue = State(wrappedValue: model) // _editedValue is State<String>
}
var body: some View {
VStack(alignment: .leading, spacing: 20) {
Group{
Text("Some label")
TextField("Placeholder text", text: $editedValue)
}
Divider()
Text("Some navigation link to push in a page where " +
"the user can select something from a list and click back...")
// If the user starts to edit the textfield - follows a navigation link and comes back
// he should be able to continue edit the field where he left of - the text field should
// not have been reset to the original value.
Button(action: {
// Call some save function in the ViewModel
},label: {
Text("SAVE")
}
).disabled(model == editedValue)
}.onAppear(){
// I could have done something like:
// self.editedValue = model
// but it seems like this will fire if the user navigates into the described page and reset
// the TextField to the model value.
}
}
}
struct TextFieldDemo_Previews: PreviewProvider {
static var previews: some View {
TextFieldDemo(model: "The old value")
}
}
怎么样像这样的测试代码。关键是使用 "ObservableObject"。
import SwiftUI
class MyModel: ObservableObject {
@Published var model = "model1"
}
struct ContentView: View {
@ObservedObject var myModel = MyModel()
@State var editedValue = ""
var body: some View {
NavigationView {
VStack(alignment: .leading, spacing: 20) {
Group{
Text("Some label")
TextField("Placeholder text", text: Binding<String>(
get: { self.editedValue },
set: {
self.editedValue = $0
self.myModel.model = self.editedValue
})).onAppear(perform: loadData)
}
Divider()
NavigationLink(destination: Text("the nex page")) {
Text("Click Me To Display The next View")
}
// If the user starts to edit the textfield - follows a navigation link and comes back
// he should be able to continue edit the field where he left of - the text field should
// not have been reset to the original value.
Button(action: {
// Call some save function in the ViewModel
self.myModel.model = self.editedValue
},label: {
Text("SAVE")
})
}
}.navigationViewStyle(StackNavigationViewStyle())
}
func loadData() {
self.editedValue = myModel.model
}
}