Изучение различных методов скрытия заголовка в NavigationView SwiftUI

В SwiftUI NavigationView — это мощное представление-контейнер, позволяющее легко перемещаться между различными представлениями в приложении. По умолчанию NavigationView отображает заголовок в верхней части экрана. Однако бывают случаи, когда вам может потребоваться скрыть заголовок, чтобы добиться определенного дизайна или пользовательского опыта. В этой статье мы рассмотрим различные методы скрытия заголовка в NavigationView SwiftUI, а также приведем примеры кода.

Простой способ скрыть заголовок — использовать собственный NavigationBarTitle с пустой строкой. Это эффективно скрывает заголовок по умолчанию.

NavigationView {
    VStack {
        // Content of your view here

    }
    .navigationBarTitle("", displayMode: .inline)
}

Метод 2: полное скрытие панели навигации

Если вы хотите скрыть всю панель навигации, включая кнопку «Назад» и заголовок, вы можете использовать модификатор navigationBarHidden.

NavigationView {
    VStack {
        // Content of your view here

    }
    .navigationBarHidden(true)
}

Метод 3. Использование пользовательского представления

Другой вариант — заменить заголовок по умолчанию на собственный вид. Вы можете создать собственное представление и установить его как navigationBarItemsэлемента NavigationView, чтобы добиться желаемого внешнего вида заголовка.

NavigationView {
    VStack {
        // Content of your view here

    }
    .navigationBarItems(trailing:
        HStack {
            // Custom view for header

        }
    )
}

Метод 4. Использование панели инструментов

Начиная с iOS 15, в SwiftUI появилось представление Toolbar, которое обеспечивает большую гибкость при создании пользовательских заголовков. Вы можете использовать панель инструментов, чтобы скрыть заголовок по умолчанию и создать собственный заголовок с помощью элементов панели инструментов.

NavigationView {
    VStack {
        // Content of your view here

    }
    .toolbar {
        ToolbarItemGroup(placement: .navigationBarLeading) {
            // Custom view for header

        }
    }
}

Метод 5: скрытие панели навигации с помощью анимации

Если вы хотите скрыть заголовок с помощью анимации, вы можете объединить модификатор navigationBarHiddenс модификатором animation, чтобы создать эффект плавного перехода.

NavigationView {
    VStack {
        // Content of your view here

    }
    .navigationBarHidden(true)
    .animation(.default)
}