Как создать связь между Navigation Controller и Navigation Drawer в jetpack compose material 3?

  • 25 августа 2023 г. 13:56
Ответы на вопрос 2
В jetpack compose material 3 можно создать связь между Navigation Controller и Navigation Drawer следующим образом:

1. Импортируйте необходимые классы:

```kotlin
import androidx.compose.material.DrawerState
import androidx.compose.material.DrawerValue
import androidx.compose.material.MaterialTheme
import androidx.compose.material.ModalDrawer
import androidx.compose.material.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
```

2. Создайте граф навигации с помощью Navigation Compose:

```kotlin
@Composable
fun MyNavGraph(navController: NavHostController) {
    NavHost(navController, startDestination = "screen1") {
        composable("screen1") { Screen1(navController) }
        composable("screen2") { Screen2(navController) }
    }
}
```

3. Создайте главный экран вашего приложения с использованием Navigation Drawer:

```kotlin
@Composable
fun MainScreen() {
    val navController = rememberNavController()
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    var currentScreen by mutableStateOf("screen1")

    ModalDrawer(
        drawerState = drawerState,
        content = {
            // Отображение Navigation Drawer
            DrawerContent(navController, drawerState) {
                currentScreen = it
                drawerState.close()
            }
        },
        contentPane = {
            // Отображение текущего экрана
            when (currentScreen) {
                "screen1" -> Screen1(navController)
                "screen2" -> Screen2(navController)
            }
        }
    )
}
```

4. Реализуйте содержимое Navigation Drawer с использованием Navigation Compose:

```kotlin
@Composable
fun DrawerContent(navController: NavHostController, drawerState: DrawerState, onItemSelected: (String) -> Unit) {
    Column {
        // Ваше содержимое Navigation Drawer
        ListItem(
            icon = { Icon(...) },
            text = { Text("Screen 1") },
            onClick = {
                navController.navigate("screen1") // Переход к экрану screen1
                onItemSelected("screen1")
            }
        )
        ListItem(
            icon = { Icon(...) },
            text = { Text("Screen 2") },
            onClick = {
                navController.navigate("screen2") // Переход к экрану screen2
                onItemSelected("screen2")
            }
        )
    }
}
```

5. В каждом экране вашего приложения вызовите метод `navController.navigate()` для выполнения перехода между экранами. Например, в экране Screen1:

```kotlin
@Composable
fun Screen1(navController: NavHostController) {
    // Ваш код экрана Screen1
    Button(onClick = { navController.navigate("screen2") }) {
        Text("Go to Screen 2")
    }
}
```

Теперь у вас должна быть связь между Navigation Controller и Navigation Drawer, и навигация будет работать при выборе пунктов в Navigation Drawer.
Scaffold(scaffoldState = scaffoldState, drawerContent = {// здесь находится ваш Drawer}) {
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen() }
        composable("add") { AddScreen() }
        composable("account") { AccountScreen() }
    }
}
Похожие вопросы