kotlin Jetpack组合模态导航抽屉-可滚动

ddhy6vgd  于 2023-03-24  发布在  Kotlin
关注(0)|答案(1)|浏览(130)

如何在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
}
mccptt67

mccptt671#

上面的代码现在可以工作了。感谢@Anubis94提供的示例代码。
解决的问题:

  • 需要手动导入androidx.compose.foundation.lazy.items
  • 使用上述items(menuItems) { item ->块时的初始错误
  • 添加了如何在ModalNavigationDrawer中更改颜色的示例

相关问题