如何更改 Jetpack Compose 抽屜內的 Scaffold 內的內容？

Question

我有這個抽屜：

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
val items = listOf(Icons.Default.Favorite, Icons.Default.Face, Icons.Default.Email)
val selectedItem = remember { mutableStateOf(items[0]) }

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        items.forEach { item ->
            NavigationDrawerItem(
                icon = { Icon(item, contentDescription = null) },
                label = { Text(item.name) },
                selected = item == selectedItem.value,
                onClick = {
                    scope.launch { drawerState.close() }
                    selectedItem.value = item
                    //How to change the content of Scaffold's content section?
                },
                modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
            )
        }
    },
    content = {
        Scaffold(
            topBar = {
                //
            },
            content = { padding ->
                Text(
                    modifier = Modifier.padding(padding),
                    text = "Favorites"
                )
            }
        )
    }
)

現在，當我運行應用程序時，我得到了正確的 TopBar，並且在它的正下方有一個包含“Favorites”值的文本。 問題是我總是希望擁有相同的 TopBar，並且只更改 Scaffold 的內容。 因此，當單擊第二個項目時，我想顯示“Face”而不是“Favorites”。

我想創建一些可組合的函數來顯示數據，但我不能從 onClick 內部調用它們。 Android Studio 抱怨：

@Composable 調用只能在 @Composable function 的上下文中發生

我還考慮根據 state 創建狀態並加載該數據。 但是只顯示一個文本不是很復雜嗎？

還考慮過導航到其他屏幕，但這意味着每個屏幕都應該有自己的 TopBar，在我看來，這需要無緣無故地增加應用程序的復雜性。 我完全迷路了。 如何解決這個問題？

Answer 1

創建 State 來更改內容並不復雜，將 NavHost 可組合放入內容塊中也是如此。

object Routes {
    const val Favorites = "Favorites"
    const val Faces = "Faces"
}

var route by remember {mutableStateOf(Routes.Favorites)}

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        items.forEach { item ->
            NavigationDrawerItem(
                icon = { Icon(item, contentDescription = null) },
                label = { Text(item.name) },
                selected = item == selectedItem.value,
                onClick = {
                    scope.launch { drawerState.close() }
                    selectedItem.value = item
                    // Change route
                    route = some new route...
                },
                modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
            )
        }
    },
    content = {
        Scaffold(
            topBar = {
                //
            },
            content = { padding ->
               if(route == Routes.Favorites) {
                  Text(
                    modifier = Modifier.padding(padding),
                    text = "Favorites"
                )
              }else {
                // other routes
              }
            }
        )
    }
)

使用 NavHost

    NavHost(
        navController = navController,
        startDestination = Routes.Favorites
    ) {
        composable(Routes.Favorites) {
            Favorites()
        }

        composable(Routes. Face) {
            Faces()
        }
    }

Answer 2

您只需簡單地更新 onclick 中的視圖模型 state 值，然后在您的可組合物中收聽該值。 當值發生變化時，您可以簡單地調用其他可組合。 它沒有那么復雜。