如何在Jetpack Compose /Material 3中使ModalNavigationDrawer可滚动?
尝试在ModalDrawerSheet
内容中使用LazyColumn
,但得到错误:@Composable invocations can only happen from the context of a @Composable function
示例MainActivity类(基于www.example.com中的示例developer.android.com)-更新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()
// dummy list of menu items for example
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) ">>> Swipe >>>" else "<<< Swipe <<<",
color = MaterialTheme.colorScheme.onBackground
)
Spacer(Modifier.height(20.dp))
Button(onClick = { scope.launch { drawerState.open() } }) {
Text("Click to open")
}
}
}
)
}
fun MenuItems(): List<CountdownMenu> {
val menuItems = mutableListOf<CountdownMenu>()
for (i in 1..26) {
menuItems.add(CountdownMenu(i, "Option " + i))
}
return menuItems
}
1条答案
按热度按时间mccptt671#
上面的代码现在可以工作了。感谢@Anubis94提供的示例代码。
解决的问题:
androidx.compose.foundation.lazy.items
items(menuItems) { item ->
块时的初始错误ModalNavigationDrawer
中更改颜色的示例