Jetpack Compose, Android • 19 Mei 2024

Jetpack Compose - NavHost

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

Apa itu NavHost?

NavHost adalah komponen yang digunakan dalam Jetpack Compose Navigation untuk menentukan tempat di mana navigasi antar fragmen atau layar dilakukan. Ini mirip dengan FragmentContainerView pada pendekatan tradisional menggunakan Fragment.

Kapan Harus Menggunakan NavHost?

NavHost harus digunakan ketika Anda ingin mengimplementasikan navigasi antar layar atau fragmen dalam aplikasi Anda menggunakan Jetpack Compose Navigation. Ini memungkinkan Anda untuk mengatur dan menavigasi antar fragmen dengan cara yang konsisten dan efisien.

Parameter/Atribut

@Composable
public fun NavHost(
    navController: NavHostController,
    startDestination: String,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.Center,
    route: String? = null,
    enterTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        { fadeIn(animationSpec = tween(700)) },
    exitTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        { fadeOut(animationSpec = tween(700)) },
    popEnterTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) =
        enterTransition,
    popExitTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) =
        exitTransition,
    builder: NavGraphBuilder.() -> Unit
)

Parameter pada NavHost di Jetpack Compose

navController: NavHostController
- Kontroler navigasi yang digunakan untuk mengelola dan melakukan navigasi antar layar.
startDestination: String
- Destinasi awal yang akan ditampilkan saat aplikasi pertama kali dibuka.
modifier: Modifier
- Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual NavHost.
contentAlignment: Alignment
- Penyusunan konten di dalam NavHost.
route: String?
- Rute yang terkait dengan NavHost. Digunakan untuk penanganan khusus rute dalam implementasi yang lebih canggih.
enterTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition)
- Transisi untuk masuk ke konten baru dalam NavHost. Defaultnya menggunakan fadeIn.
exitTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition)
- Transisi untuk keluar dari konten dalam NavHost. Defaultnya menggunakan fadeOut.
popEnterTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition)
- Transisi untuk masuk kembali ke konten sebelumnya dalam NavHost.
popExitTransition: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition)
- Transisi untuk keluar dari konten saat kembali ke konten sebelumnya dalam NavHost.
builder: NavGraphBuilder.() -> Unit
- Builder untuk menentukan struktur navigasi dengan menambahkan destinasi dan tindakan navigasi.

Contoh

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val navController = rememberNavController()
                    NavHost(navController = navController, startDestination = "screen1") {
                        composable("screen1") {
                            Screen1(navController = navController)
                        }
                        composable("screen2") {
                            Screen2(navController = navController)
                        }
                        // Add more composables for additional screens
                    }
                }
            }
        }
    }
}

@Composable
fun Screen1(modifier: Modifier = Modifier, navController: NavController) {
    Column(modifier = Modifier) {
        Text(text = "This is Screen 1", modifier = Modifier.padding(50.dp))
        Button(onClick = {
            navController.navigate("screen2")
        }) {
            Text(text = "Go To Screen 2")
        }
    }
}

@Composable
fun Screen2(modifier: Modifier = Modifier, navController: NavController) {
    Column(modifier = Modifier) {
        Text(text = "This is Screen 2", modifier = Modifier.padding(50.dp))
        Button(onClick = {
            navController.navigate("screen1")
        }) {
            Text(text = "Go To Screen 1")

        }
    }
}

navigationbar