Метод composable

Метод composable класса NavGraphBuilder связывает строковый route с composable-содержимым экрана. Список arguments задаёт параметры в шаблоне маршрута, лямбда рисует UI и может принять NavBackStackEntry.

Синтаксис

composable("home") {
	Text("abcde")
}

Параметры

Параметр	Описание
`route`	Строковый идентификатор экрана. Его передают в navigate.
`arguments`	Список navArgument с типами из `NavType`. Нужен, если в route есть плейсхолдеры.
`content`	Лямбда с UI экрана. Может принимать NavBackStackEntry для чтения arguments.

Пример

Давайте зарегистрируем два простых маршрута:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val navController = rememberNavController()
			NavHost(
				navController = navController,
				startDestination = "home",
			) {
				composable("home") {
					Text(text = "abcde")
				}
				composable("details") {
					Text(text = "12345")
				}
			}
		}
	}
}

На экране виден стартовый маршрут home с текстом "abcde".

Пример

Давайте откроем details через navigate:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val navController = rememberNavController()
			NavHost(
				navController = navController,
				startDestination = "home",
			) {
				composable("home") {
					Button(onClick = { navController.navigate("details") }) {
						Text(text = "abcde")
					}
				}
				composable("details") {
					Text(text = "12345")
				}
			}
		}
	}
}

После нажатия composable для "details" заменит экран и покажет "12345".

Смотрите также

метод dialog,
который регистрирует маршрут-диалог
метод navigation,
который создаёт вложенный граф
класс NavBackStackEntry,
который передают в лямбду content
функция NavHost,
внутри которой вызывают composable