Android Jetpack Compose и навигация

Dec 04 2022
Простой пример использования NavHost и NavController
С Jetpack Compose Android отказывается от неявных способов перемещения с фрагментарными транзакциями, навигацией и намерениями для действий. В настоящее время приложение должно с самого начала объявлять все возможные пути, которые могут пройти пользователи.

С Jetpack Compose Android отказывается от неявных способов перемещения с фрагментарными транзакциями, навигацией и намерениями для действий. В настоящее время приложение должно с самого начала объявлять все возможные пути, которые могут пройти пользователи.

Jetpack compose предоставляет собственный способ навигации по нескольким компонентам. С помощью NavHost и NavController вы можете перемещать или извлекать компонуемые объекты по мере необходимости. Итак, давайте приступим к делу.

Фото Брендана Черча на Unsplash

Зависимости

Во-первых, вам нужно будет добавить зависимость к вашему проекту. Чтобы получить актуальную версию, перейдите сюда .

implementation "androidx.navigation:navigation-compose:2.5.3"

Реализация

Во-первых, в проекте представлены NavHost и NavController .

NavHost размещает объявление маршрутов, по которым могут идти пользователи. NavController предоставляет API для перемещения по объявленным маршрутам. Маршрут — это путь, который уникален для каждого экрана/другого составного объекта, который может отображаться в приложении.

Создание экземпляра

NavController создается с помощью RememberNavController(), поэтому даже при перестроении составных объектов NavController остается тем же.

Начальный пункт назначения

Объявлены NavHost с NavController и начальным пунктом назначения. Начальный пункт назначения — это название нашего первого экранного маршрута.

Объявление маршрутов

Все варианты объявлены, куда пользователь может перемещаться. Оба экрана должны объявлять маршруты. Имя маршрута уникально, потому что NavController будет использовать его для определения следующего составного объекта для отображения.

Навигация между двумя экранами

Любой компонуемый объект может быть показан через navcontroller.navigate("маршрут к компонуемым").

Чтобы имитировать кнопку «Назад» пользователя, можно использовать navcontroller.popBackStack(). Это выведет текущий компонуемый из стека всех компонуемых.

Стек можно рассматривать как историю составных элементов/экранов, поэтому первый экран является корневым , а другие составные элементы помещаются поверх него. Таким образом, при переходе ко второму экрану второй экран добавляется поверх стека. При извлечении стека верхний компонуемый элемент удаляется.

Очистить

Чтобы быть более подверженным ошибкам в будущем, [aths должен быть объявлен более четко. Поэтому избегайте добавления строк повсюду и создайте отдельный файл, в который вы поместите все маршруты для своего приложения. После этого следует использовать объявленные константы. В будущем можно будет избежать досадных опечаток. Кроме того, он обеспечивает более описательное представление о том, как структурировано приложение.

Переход через несколько экранов и возврат к корню

Отныне добавлять последующие экраны к нашей навигации легко. NavHost необходимо расширить еще одним компонуемым, а на экранах должно быть больше кнопок для перемещения.

Третий экран содержит кнопку, которая возвращает пользователя к первому экрану и очищает все сложенные компоненты.

Чтобы вытолкнуть несколько составных элементов в стек, можно использовать navController.popBackStack («Экран, на котором вы хотите остановить извлечение», включительно: false).

Инклюзивный параметр сообщает нам , следует ли также удалить целевой компонуемый объект. Удаление первого экрана приведет к пустому экрану, поэтому передается значение false.

Передача значения на экран

Большинство приложений хотят отображать информацию или данные в зависимости от предыдущего выбора пользователя. Другой экран должен знать, что показывать, поэтому необходимо передать значение.

Это делается путем помещения значения внутрь маршрута, поэтому значение кодируется как строка, а затем анализируется на другом экране.

Декларация

Во-первых, маршрут должен объявить о наличии значения, что делается так:

const val SECOND_SCREEN = "SecondScreen/{customValue}"
// where the {customValue} is placeholder for the passed value

composable(
    Routes.SECOND_SCREEN,
    arguments = listOf(navArgument("customValue") {
        type = NavType.StringType
    })
) { backStackEntry ->
    ThirdScreen(
        navigation = navController,
        // callback to add new composable to backstack 
        // it contains the arguments field with our value
        textToShow = backStackEntry.arguments?.getString(
            "customValue", // key for our value
            "Default value" // default value
        )
    )
}

val valueToPass = "Information for next screen"
val routeToScreenWithValue = "SecondScreen/$valueToPass"
navigation.navigate(routeToScreenWithValue)

Первый экран теперь содержит одно текстовое поле, содержимое которого передается на второй экран.

Не передавайте сложные данные в представления в навигации

В представление должно быть передано только одно значение. Остальные данные должны быть получены с помощью ViewModel или другого логического устройства. Это сделает ваш код намного чище и удобнее для тестирования.

Например, если вы хотите отобразить сведения о продукте или пользователе, идентификатор следует передавать только в представление. Логический блок получает идентификатор и извлекает более подробную информацию из Интернета или базы данных. Затем данные передаются в представление напрямую, без помощи компонентов навигации.

Ресурсы:

Еще из разработки для Android: