如何使用NavigationLink编辑列表中的项目? [英] How to edit an item in a list using NavigationLink?

问题描述

我正在寻找SwiftUI的一些指导.

I am looking for some guidance with SwiftUI please.

我有一个视图，显示一个简单的列表，每行显示一个名称"字符串.您可以通过单击尾随的导航栏按钮将项目添加到阵列/列表中.这很好.现在，我想使用NavigationLink呈现一个新的"DetailView"，在其中可以编辑行的名称"字符串.我正在努力使用在detailview中使用绑定来更新名称.

I have a view showing a simple list with each row displaying a "name" string. You can add items to the array/list by clicking on the trailing navigation bar button. This works fine. I would now like to use NavigationLink to present a new "DetailView" in which I can edit the row's "name" string. I'm struggling with how to use a binding in the detailview to update the name.

我在网上找到了大量关于如何在新视图中显示数据的教程，但是却没有关于如何编辑数据的教程. 预先感谢.

I've found plenty of tutorials online on how to present data in the new view, but nothing on how to edit the data. Thanks in advance.

ContentView:

ContentView:

struct ListItem: Identifiable {
    let id = UUID()
    let name: String
}

class MyListClass: ObservableObject {
    @Published var items = [ListItem]()
}

struct ContentView: View {

    @ObservedObject var myList = MyListClass()

    var body: some View {
        NavigationView {
            List {
                ForEach(myList.items) { item in
                    NavigationLink(destination: DetailView(item: item)) {
                        Text(item.name)
                    }
                }
            }
            .navigationBarItems(trailing:
                Button(action: {
                    let item = ListItem(name: "Test")
                    self.myList.items.append(item)
                }) {
                    Image(systemName: "plus")
                }
            )
        }
    }
}

DetailView

DetailView

struct DetailView: View {

    var item: ListItem

    var body: some View {
        TextField("", text: item.name)
    }
}

推荐答案

传递给DetailsView的主要思想不是传递项目，而是复制项目，因为它是一个值，但绑定到视图模型中的相应项目.

The main idea that you pass in DetailsView not item, which is copied, because it is a value, but binding to the corresponding item in your view model.

以下是一个演示示例，其中修改了代码快照以实现所需的行为:

Here is a demo with your code snapshot modified to fulfil the requested behavior:

struct ListItem: Identifiable, Equatable {
    var id = UUID()
    var name: String
}

class MyListClass: ObservableObject {
    @Published var items = [ListItem]()
}

struct ContentView: View {

    @ObservedObject var myList = MyListClass()

    var body: some View {
        NavigationView {
            List {
                ForEach(myList.items) { item in
                    // Pass binding to item into DetailsView
                    NavigationLink(destination: DetailView(item: self.$myList.items[self.myList.items.firstIndex(of: item)!])) {
                        Text(item.name)
                    }
                }
            }
            .navigationBarItems(trailing:
                Button(action: {
                    let item = ListItem(name: "Test")
                    self.myList.items.append(item)
                }) {
                    Image(systemName: "plus")
                }
            )
        }
    }
}

struct DetailView: View {

    @Binding var item: ListItem

    var body: some View {
        TextField("", text: self.$item.name)
    }
}

这篇关于如何使用NavigationLink编辑列表中的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！