Nawigacja z użyciem Utwórz na Wear OS

Komponent Nawigacja w Jetpacku na Androida zapewnia obsługę aplikacji Jetpack Compose. Możesz poruszać się między składanymi elementami, korzystając z infrastruktury i funkcji komponentu Nawigacja.

Na tej stronie opisano różnice w poruszaniu się po Jetpacku w Compose na Wear OS.

Skonfiguruj

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

Kotlin

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

Jest on używany zamiast artefaktu androidx.navigation:navigation-compose, ponieważ zawiera alternatywne implementacje na potrzeby Wear OS.

Tworzenie kontrolera nawigacji, gospodarza i grafu

Nawigacja w Compose na Wear OS wymaga tych samych 3 komponentów, które są potrzebne w aplikacjach innych niż na Wear OS: kontrolera nawigacji, hosta i grafu.

Użyj interfejsu rememberSwipeDismissableNavController(), aby utworzyć instancję interfejsu WearNavigator, czyli implementacji interfejsu NavController, która jest odpowiednia dla aplikacji na Wear OS:

Kotlin

val navController = rememberSwipeDismissableNavController()

Interfejs NavController to podstawowy interfejs API używany do nawigacji w aplikacjach Compose. Element ten steruje przechodzeniem między składanymi elementami w gospodarzu nawigacji, którym na Wear OS jest SwipeDismissableNavHost.

Kotlin

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

Podobnie jak kompozyt NavHost, odwołuje się on do kontrolera nawigacji, trasy do miejsca docelowego i budyciela grafu nawigacji, który jest tu wyświetlany jako lambda końcowa.

Miejsce docelowe początkowe musi zostać podane w kreatorze grafu nawigacji wraz ze wszystkimi innymi miejscami docelowymi, które powinny być dostępne za pomocą kontrolera nawigacji.

W aplikacji na Wear OS zadeklaruj SwipeDismissableNavHost jako zawartość AppScaffold, aby obsługiwać komponenty najwyższego poziomu, takie jak czas, wskaźnik przewijania/pozycji i wskaźnik strony. Użyj obiektu AppScaffold nad obiektem SwipeDismissableNavHost i ScreenScaffold na poziomie ekranu, aby dodać obiekt TimeText do ekranu domyślnie i upewnić się, że będzie on prawidłowo animowany podczas przechodzenia między ekranami. Dodatkowo ScreenScaffold dodaje PositionIndicator do 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
    ) {
        // Screen content goes here
Navigation.kt

Więcej informacji o funkcji Nawigacja w Jetpacku znajdziesz w artykule Nawigacja w Compose lub w laboratorium kodu Nawigacja w Jetpack Compose.