Nawigacja z użyciem Utwórz na Wear OS


Komponent Navigation w Androidzie Jetpack obsługuje aplikacje Jetpack Compose. Możesz poruszać się między funkcjami kompozycyjnymi, korzystając z infrastruktury i funkcji komponentu Navigation.

Na tej stronie opisujemy różnice w nawigacji Jetpack w Compose na Wear OS.

Konfiguracja

Użyj tej zależności w pliku build.gradle modułu aplikacji:

Kotlin

dependencies {
    def wear_compose_version = "1.5.6"
    implementation "androidx.wear.compose:compose-navigation:$wear_compose_version"
}

Jest on używany zamiast androidx.navigation:navigation-compose, ponieważ zawiera alternatywne implementacje przeznaczone specjalnie dla Wear OS.

Tworzenie kontrolera nawigacji, hosta i wykresu

Nawigacja za pomocą Compose na Wear OS wymaga tych samych 3 komponentów co w przypadku aplikacji na inne platformy: kontrolera nawigacji, hosta i grafu.

Użyj rememberSwipeDismissableNavController() aby utworzyć instancję WearNavigator, implementację NavController odpowiednią dla aplikacji na Wear OS:

val navController = rememberSwipeDismissableNavController()

NavController to podstawowy interfejs API używany do poruszania się po aplikacjach Compose. Umożliwia nawigację między komponentami w komponowalnym komponencie nawigacji, który na Wear OS jest SwipeDismissableNavHost.

val navController = rememberSwipeDismissableNavController()
SwipeDismissableNavHost(
    navController = navController,
    startDestination = "message_list"
) {
    // TODO: build navigation graph
}

Podobnie jak NavHostfunkcja kompozycyjna przyjmuje odwołanie do kontrolera nawigacji, trasę do miejsca docelowego na początku i konstruktora wykresu nawigacji, który jest tu przedstawiony jako lambda końcowa.

Miejsce docelowe musi być podane w narzędziu do tworzenia wykresu nawigacji wraz z wszystkimi innymi miejscami docelowymi, po których można się poruszać za pomocą kontrolera nawigacji.

W aplikacji na Wear OS zadeklaruj SwipeDismissableNavHost jako zawartość elementu AppScaffold, aby obsługiwać komponenty najwyższego poziomu, takie jak czas, wskaźnik przewijania lub pozycji oraz wskaźnik strony. Użyj obiektu AppScaffold powyżej SwipeDismissableNavHostScreenScaffold na poziomie ekranu, aby domyślnie dodać obiekt TimeText do ekranu i mieć pewność, że będzie on prawidłowo animowany podczas przechodzenia między ekranami. Dodatkowo ScreenScaffold dodaje PositionIndicator w przypadku treści przewijanych.
    AppScaffold {
        val navController = rememberSwipeDismissableNavController()
        SwipeDismissableNavHost(
            navController = navController,
            startDestination = "message_list"
        ) {
            composable("message_list") {
                MessageList(onMessageClick = { id ->
                    navController.navigate("message_detail/$id")
                })
            }
            composable("message_detail/{id}") {
                MessageDetail(id = it.arguments?.getString("id")!!)
            }
        }
    }
}

// Implementation of one of the screens in the navigation
@Composable
fun MessageDetail(id: String) {
    // .. Screen level content goes here
    val scrollState = rememberTransformingLazyColumnState()

    val padding = rememberResponsiveColumnPadding(
        first = ColumnItemType.BodyText
    )

    ScreenScaffold(
        scrollState = scrollState,
        contentPadding = padding
    ) { scaffoldPaddingValues ->
        // Screen content goes here
        // ...

Więcej informacji o nawigacji w Jetpacku znajdziesz w artykule Nawigacja w Compose lub w samouczku dotyczącym nawigacji w Jetpacku Compose.