如何使用SwiftUI在NavigationView中正确添加“添加项目”按钮?

6
我需要在我的NavigationViewList .navigationBarItems中添加一个“Plus” ⊕ 按钮(位于导航栏右侧),我想使用导航层次结构中的后续视图来添加一行,并输入其名称等信息。

enter image description here

首先,我甚至无法正确导航按钮!当我在预览画布中点击它时,按钮的操作似乎有效。但是在实际应用程序中,尽管它确实导航到我的目标视图,但当我点击该视图的“<Back”按钮时,应用程序会崩溃,并显示以下错误信息:“终止应用程序,因为出现未捕获的异常'NSInternalInconsistencyException',原因:试图弹出一个不存在的视图控制器。”请问有什么建议可以修复以下代码吗?这个任务很常见,我肯定是做错了什么。
import SwiftUI

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

struct ContentView: View {
    var listItems = [
        ListItem(name: "List Item One"),
        ListItem(name: "List Item Two")
    ]

    var body: some View {
        NavigationView {
            List(listItems) { listItem in
                NavigationLink(destination: DetailView(existingItem: listItem)) {
                    Text(listItem.name)
                }
            }
            .navigationBarTitle(Text("Configure List Items"), displayMode: .inline)
            .navigationBarItems(trailing:
                    NavigationLink(destination: DetailView(existingItem: nil)) {
                                        Image(systemName: "plus")
                                            .resizable()
                                            .padding(6)
                                            .frame(width: 24, height: 24)
                                            .background(Color.blue)
                                            .clipShape(Circle())
                                            .foregroundColor(.white)
                                    } )
        }
    }
}

struct DetailView: View {
    var existingItem: ListItem?

    var body: some View {
        Text((existingItem != nil) ? "Edit existing: \(existingItem!.name)" : "Enter NEW List Item")
    }
}

谢谢!顺便说一下,我使用的是macOS Catalina 10.15.2和Xcode 11.3.1。

1个回答

10

NavigationLink 应该放在 NavigationView 中,而不是导航栏中,因此以下方法可行...

@State private var addMode = false
var body: some View {
    NavigationView {
        VStack {
            List(listItems) { listItem in
                NavigationLink(destination: AddDetailView(existingItem: listItem)) {
                    Text(listItem.name)
                }
            }
            .navigationBarTitle(Text("Configure List Items"), displayMode: .inline)
            .navigationBarItems(trailing: Button(action: { 
                 // button activates link
                  self.addMode = true 
                } ) {
                Image(systemName: "plus")
                    .resizable()
                    .padding(6)
                    .frame(width: 24, height: 24)
                    .background(Color.blue)
                    .clipShape(Circle())
                    .foregroundColor(.white)
            } )

            // invisible link inside NavigationView for add mode
            NavigationLink(destination: AddDetailView(existingItem: nil), 
                isActive: $addMode) { EmptyView() }
        }
    }
}

1
这里没有内置组件吗? - Alexander
1
@Alexander - 我也很想知道!虽然有“EditButton()”及其关联功能,以及其他一些 UI 元素具有“加号按钮”可用于添加操作,但在这个 NavigationView 的情况下,让我感到震惊的是,在 2020 年,我必须自己制作按钮(甚至使用“Image(systemName:”等)。 - electromaggot
感谢这个非常有用的hackaround!我正在学习SwiftUI,对于缺乏标准小部件感到有些震惊,但更震惊的是苹果文档的低质量。顺便说一下,在XCode 12中至少还有Image(systemName: "plus.circle")如果您想要默认的圆形添加图标;使用.font(.title)等进行修改非常不错。 - Kevin Frost

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接