Навигация в SwiftUI

Я пытаюсь понять, как использовать панель навигации в SwiftUI.

Я хочу поместить BarButtonItem и изображения внутри NavigationBar

Я смог отобразить панель навигации и поставить заголовки Навигация в SwiftUI

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

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

        }
        .navigationBarTitle(Text("Notes"))

    }
}
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
14
0
13 036
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

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

Demo

Note 1: You can have ANYView there. (not only a Button) and also any modifiers

Note 2: Both codes above and below will generate the same look items but with different approachs


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?

Yuto 16.06.2019 05:07

Да, EditButton() @Юто

Mojtaba Hosseini 19.09.2019 20:04

@MojtabaHosseini Я следую вашему коду и пытаюсь добавить UIBarButton примерно так: .navigationBarTitle("(task.label)") .navigationBarItems(trailing: NavigationButtonItem()), но я не могу добавить действие на кнопку. Подскажите, в чем может быть возможная проблема?

Najam 31.01.2020 13:52

.navigationBarItems() — это функция, которую вы ищете. Вы можете указать ведущее представление, замыкающее представление или оба. В представлении вы можете указать горизонтальные и вертикальные стеки, чтобы добавить дополнительные кнопки.

Example navigation buttons in swiftUI

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

поместите это из parentViewController

NavigationLink(destination: NotesListView())

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

Вы можете увидеть документация для большего количества ToolbarItemPlacements.

Другие вопросы по теме