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

.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 2

您应该使用.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()
)