SwiftUI 中的导航内容答案

【问题标题】：Navigation stuff in SwiftUISwiftUI 中的导航内容
【发布时间】：2019-06-15 03:51:56
【问题描述】：

我正在尝试弄清楚如何在 SwiftUI 中使用导航栏

我想把BarButtonItem和图片放在NavigationBar里面

我已经能够显示导航栏并放置标题

var body: some View {
    NavigationView{
        List(0...5) { note in

            VStack(alignment: .leading) {
                Text("title")
                Text("Date")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

        }
        .navigationBarTitle(Text("Notes"))

    }
}

【问题讨论】：

标签： ios swift swiftui xcode11

【解决方案1】：

iOS 14

您应该使用toolbar 修饰符：

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button("Cancel") { /* action */ }
    }
    ToolbarItem(placement: .navigationBarTrailing) {
        Button(action: { /* Actions */ }, label: {
            HStack {
                Image(systemName: "trash")
                Text("Delete")
            }
        })
        .foregroundColor(.red) // You can apply colors and other modifiers too
    }
}

_{注意 1：您可以在此处拥有 ANY View。（不仅是Button）还有任何修饰符}

_{注意 2：上面和下面的代码都会生成相同的外观项目，但方法不同}

iOS 13 及更高版本（已弃用但仍然有效）

您应该使用.navigationBarItems() 修饰符。例如，您可以像这样添加Button 或Image：

.navigationBarItems(
    leading: Button("Cancel") {
        // Actions
    },
    trailing: Button(action: {
        // Actions
    }, label: { Label("Delete", systemImage: "trash") }
    ).foregroundColor(.red) // You can apply colors and other modifiers too
)

?专业提示

始终尝试将每个项目封装在一个单独的结构中，这样您的代码将被简化并且很容易被更新的技术替换。例如，看看这个示例：

.navigationBarItems(
      leading: MyCustomButtonItem(),
      trailing: MyCustomButtonItem(text: "foo", image: "Bard")
)

【讨论】：

在普通的快速写作中，有一个 .editbutton 可用于创建编辑按钮并为您执行大部分操作。 SwiftUI 中有类似的东西吗？
是的，EditButton()@Yuto
@MojtabaHosseini 我正在关注您的代码并尝试添加类似这样的 UIBarButton .navigationBarTitle("(task.label)") .navigationBarItems(trailing: NavigationButtonItem()) 但我无法添加按钮上的操作。你能告诉我可能是什么问题吗？

【解决方案2】：

.navigationBarItems() 是您正在寻找的功能。您可以指定前导视图、尾随视图或两者。在视图中，您可以指定水平和垂直堆栈以添加其他按钮。

var body: some View {
    NavigationView{
        List(0...5) { note in

            VStack(alignment: .leading) {
                Text("title")
                Text("Date")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

            }
            .navigationBarItems(leading: HStack {
                Button(action: {}, label: {Image(systemName: "star.fill")})
                Button(action: {}, label: {Text("Edit")})
            }, trailing: VStack {
                Button(action: {}, label: {Image(systemName: "star.fill")})
                Button(action: {}, label: {Text("Edit")})
            })
            .navigationBarTitle(Text("Notes"))
    }
}

【讨论】：

【解决方案3】：

从 parentViewController 放这个

NavigationLink(destination: NotesListView())

【讨论】：

【解决方案4】：

SwiftUI 2

在 SwiftUI 2 / iOS 14 中，navigationBarItems 修饰符已弃用。

我们应该使用带有ToolbarItems 的工具栏。

NavigationView {
    List {
        // ...
    }
    .navigationTitle("Notes")
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            Button("Tap me") {
                // action
            }
        }
        ToolbarItem(placement: .navigationBarTrailing) {
            Image(systemName: "plus")
        }
    }
}

您可以查看documentation 了解更多ToolbarItemPlacements。

【讨论】：