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

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

.navigationBarItems(
    leading: Button(action: {
        // Actions
    }, label: { Text("Button") }),

    trailing: Button(action: {
    // Actions
    }, label: { Image("Icon") })
)

提示

您可以将每个项目封装在一个结构中：

struct NavigationButtonItem: View {
    var body: some View {
        Button(action: {
            // Actions
        }, label: { Text("Button") })
    }
}

struct NavigationImageItem: View {
    var body: some View {
        Button(action: {
            // Actions
        }, label: { Image("Icon") })
    }
}

并像这样使用它们：

.navigationBarItems(
      leading: NavigationButtonItem(),
      trailing: NavigationImageItem()
)

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 修饰符已弃用。

相反，我们应该使用带有 ToolbarItem 的工具栏。

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

您可以看到 documentation 以获取更多 ToolbarItemPlacement。

SwiftUI中的导航内容

4 个答案:

SwiftUI 2