기본 레시피

이 레시피는 화면이 두 개인 Navigation 3 API를 사용하는 기본 예를 보여줍니다.

작동 방식

이 예에서는 RouteA 및 RouteB 두 경로를 정의합니다. RouteA는 간단한 화면을 나타내는 data object이고 RouteB는 id를 매개변수로 사용하는 data class입니다.

mutableStateListOf<Any>는 탐색 백 스택을 관리하는 데 사용됩니다.

NavDisplay 컴포저블은 현재 화면을 표시하는 데 사용됩니다. entryProvider 매개변수는 백 스택에서 경로를 가져와 NavEntry를 반환하는 람다입니다. entryProvider 내에서 when 문을 사용하여 경로에 따라 표시할 컴포저블을 결정합니다.

RouteA에서 RouteB로 이동하려면 백 스택에 RouteB 인스턴스를 추가하면 됩니다. id은 RouteB 데이터 클래스에 인수로 전달됩니다.

/*
 * Copyright 2025 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.example.nav3recipes.basic

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.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.lifecycle.compose.dropUnlessResumed
import androidx.navigation3.runtime.NavEntry
import androidx.navigation3.ui.NavDisplay
import com.example.nav3recipes.content.ContentBlue
import com.example.nav3recipes.content.ContentGreen
import com.example.nav3recipes.ui.setEdgeToEdgeConfig

private data object RouteA

private data class RouteB(val id: String)

class BasicActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        setEdgeToEdgeConfig()
        super.onCreate(savedInstanceState)
        setContent {
            val backStack = remember { mutableStateListOf<Any>(RouteA) }

            NavDisplay(
                backStack = backStack,
                onBack = { backStack.removeLastOrNull() },
                entryProvider = { key ->
                    when (key) {
                        is RouteA -> NavEntry(key) {
                            ContentGreen("Welcome to Nav3") {
                                Button(onClick = dropUnlessResumed {
                                    backStack.add(RouteB("123"))
                                }) {
                                    Text("Click to navigate")
                                }
                            }
                        }

                        is RouteB -> NavEntry(key) {
                            ContentBlue("Route id: ${key.id} ")
                        }

                        else -> {
                            error("Unknown route: $key")
                        }
                    }
                }
            )
        }
    }
}

BasicActivity.kt