如何正确包含“添加项目"使用 SwiftUI 的 NavigationView 中的按钮? [英] How to properly include "Add Item" button in a NavigationView using SwiftUI?

问题描述

我需要在我的 NavigationView 的 List .navigationBarItems(就在导航栏上)中有一个加号"⊕ 按钮，我想在列表中添加一行，使用导航层次结构中的后续视图输入其名称等.

I need a "Plus" ⊕ Button in my NavigationView's List .navigationBarItems (right on the navigation bar), which I'd like to add a row to the list, using a subsequent view in the navigation hierarchy to enter its name etc.

但首先，我什至无法让按钮正确导航！当我在预览画布中点击它时，按钮的操作似乎有效.然而在实际的应用程序中，虽然它确实导航到我的目标视图，但当我点击该视图的<返回"按钮时，应用程序崩溃:

But first, I can't even get the button to navigate correctly! When I tap it in the Preview Canvas, the button's operation seems to work. Yet in an actual app, while it does navigate to my destination View, when I tap that View's "< Back" button, the app crashes with:

由于未捕获的异常NSInternalInconsistencyException"而终止应用，原因:试图弹出一个不存在的视图控制器."

Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Tried to pop to a view controller that doesn't exist.'

有什么建议可以修复以下代码吗?这个任务太常见了，我肯定遗漏了一些东西并且做错了.

Any suggestions how I may fix the following code, please? This task is so common, surely I'm missing something and doing it wrong.

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

Thank you! By the way, I'm on macOS Catalina 10.15.2 using: Xcode 11.3.1

推荐答案

NavigationLink 应该在 NavigationView 内，而不是在导航栏中，因此以下方法有效...

NavigationLink should be inside NavigationView, not in navigation bar, so the following approach works...

@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() }
        }
    }
}

这篇关于如何正确包含“添加项目"使用 SwiftUI 的 NavigationView 中的按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！