Навигация в 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(). Например, вы можете добавить Button или Image следующим образом:

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

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

TIP

Вы можете инкапсулировать каждый элемент в структуру:

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