ios - SwiftUI 中的导航内容

Question

我试图弄清楚如何在 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"))

    }
}

Answer 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。（不仅是 a 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")
)

Answer 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"))
    }
}

Answer 3

把这个从 parentViewController

NavigationLink(destination: NotesListView())

Answer 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")
        }
    }
}

您可以查看更多的文档ToolbarItemPlacement。