Jetpack Compose 模态导航抽屉 - 可滚动

Question

如何在 Jetpack Compose / Material3 中使 ModalNavigationDrawer 可滚动？

尝试在

LazyColumn

内容中使用

ModalDrawerSheet

，但得到错误：

@Composable invocations can only happen from the context of a @Composable function

MainActivity 类示例（基于 developer.android.com 的示例）：

class CountdownMenu(index: Int, name: String) {
    var index: Int = index
    var name: String = name
}

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestNavigationDrawerTheme {
                val drawerState = rememberDrawerState(DrawerValue.Closed)
                val scope = rememberCoroutineScope()

                val menuItems = MenuItems()
                val selectedItem: MutableState<CountdownMenu> = remember { mutableStateOf(menuItems[0]) }

                ModalNavigationDrawer(
                    drawerState = drawerState,
                    drawerContent = {
                        ModalDrawerSheet(
                            drawerContainerColor = MaterialTheme.colorScheme.primaryContainer,
                            drawerContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
                            content = {
                                menuItems.forEach { item ->
                                    NavigationDrawerItem(
                                        label = { Text(item.name) },
                                        selected = item.index == selectedItem.value.index,
                                        onClick = {
                                            selectedItem.value = item
                                            scope.launch { drawerState.close() }
                                        },
                                        modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                                    )
                                }
//                    }
                            }
                        )
                    },
                    content = {
                        Column(
                            modifier = Modifier
                                .fillMaxSize()
                                .padding(16.dp),
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Text(text = if (drawerState.isClosed) ">>> Swipe >>>" else "<<< Swipe <<<",
                                color = MaterialTheme.colorScheme.onBackground
                            )
                            Spacer(Modifier.height(20.dp))
                            Button(onClick = { scope.launch { drawerState.open() } }) {
                                Text("Click to open")
                            }
                        }
                    }
                )
            }

            }
        }



    private fun MenuItems(): List<CountdownMenu> {
        val menuItems = mutableListOf<CountdownMenu>()

        for (i in 1..26) {
            menuItems.add(CountdownMenu(i, "Option "+i))
        }

        return menuItems
    }
}