如何让Jetpack Compose/Material3的ModalNavigationDrawer可滚动？

问题场景 #

在Jetpack Compose/Material3开发中，想要给ModalNavigationDrawer添加滚动功能，尝试在ModalDrawerSheet的内容中使用LazyColumn时，遇到错误提示：@Composable invocations can only happen from the context of a @Composable function

解决方案 #

以下是可直接编译运行的完整MainActivity代码，通过在ModalDrawerSheet内部嵌套LazyColumn，成功实现了可滚动的抽屉菜单：

package com.example.testnavdrawaer

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.lazy.items
import androidx.compose.ui.graphics.Color
import com.example.testnavdrawaer.ui.theme.TestNavigationDrawerTheme
import kotlinx.coroutines.launch

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

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestNavigationDrawerTheme {
                MainScreen()
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    // 示例用的菜单列表
    val menuItems: List<CountdownMenu> = MenuItems()

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

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet(
                drawerContainerColor = MaterialTheme.colorScheme.primary,
                drawerContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
                content = {
                    LazyColumn {
                        items(menuItems) { item ->
                            NavigationDrawerItem(
                                label = { Text(item.name) },
                                selected = item.index == selectedItem.value.index,
                                onClick = {
                                    selectedItem.value = item
                                    scope.launch { drawerState.close() }
                                },
                                colors = NavigationDrawerItemDefaults.colors(
                                    unselectedContainerColor = Color.Transparent,
                                    unselectedTextColor = MaterialTheme.colorScheme.onPrimary,
                                    selectedContainerColor = MaterialTheme.colorScheme.primaryContainer,
                                    selectedTextColor = MaterialTheme.colorScheme.onPrimaryContainer,
                                ),
                                modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                            )
                        }
                    }
                }
            )
        },
        content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = if (drawerState.isClosed) ">>> 滑动 >>>" else "<<< 滑动 <<<",
                    color = MaterialTheme.colorScheme.onBackground
                )
                Spacer(Modifier.height(20.dp))
                Button(onClick = { scope.launch { drawerState.open() } }) {
                    Text("点击打开抽屉")
                }
            }
        }
    )
}

fun MenuItems(): List<CountdownMenu> {
    val menuItems = mutableListOf<CountdownMenu>()
    for (i in 1..26) {
        menuItems.add(CountdownMenu(i, "选项 $i"))
    }
    return menuItems
}

内容的提问来源于stack exchange，提问作者gazer