可展开的 NavigationDrawerItem - Android Jetpack Compose-解网

问：

我正在使用 jetpack compose / Kotlin 创建我的第一个 android 应用程序。

我正在使用这样的导航抽屉

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text(text = stringResource(id = R.string.app_name), modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = stringResource(id = R.string.settings_title)) },
                icon = {Icon(
                    Icons.Filled.Settings,
                    contentDescription = stringResource(id = R.string.settings_title)
                )},
                selected = false,
                onClick = { /*TODO*/ }
            )
            NavigationDrawerItem(
                label = { Text(text = stringResource(id = R.string.collections)) },
                icon = {Icon(
                    painterResource(id = R.drawable.baseline_collections_bookmark_24),
                    contentDescription = stringResource(id = R.string.collections)
                )},
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    },

    gesturesEnabled = true,
    content = content
)

这给了这个

我想像这个问题一样使第二项可扩展，但是我发现的所有资源都使用视图系统，据我所知，该系统已经过时，而且我对此一无所知。

如何使用 Compose 实现这一点？

Kotlin android-jetpack-compose 导航抽屉展开可折叠

答：

1赞 Chirag Thummar 9/25/2023 #1

您可以玩很多选项来显示选项。

我向您展示了一个简单的选项之一，用于显示/隐藏选项下方的列表ModalNavigationDrawer

我使用 .查看完整代码。Material3

MainActivity.kt （英语）

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.md.bottomsheetjetpackcompose.ui.theme.BottomSheetJetpackComposeTheme
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BottomSheetJetpackComposeTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {

                    val scope = rememberCoroutineScope()
                    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)

                    Sidebar(drawerState = drawerState) {
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(color = MaterialTheme.colorScheme.primary)
                                .padding(12.dp)
                                .clickable {
                                    scope.launch {
                                        drawerState.open()
                                    }
                                },
                            contentAlignment = Alignment.Center
                        ) {
                            Text(text = "Click To Open Drawer")
                        }
                    }
                }
            }
        }
    }
}

模态导航.kt

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.List
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Divider
import androidx.compose.material3.DrawerState
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp

@Composable
fun Sidebar(drawerState: DrawerState, content: @Composable () -> Unit) {

    val showSubMenu = remember {
        mutableStateOf(false)
    }

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                Text(
                    text = stringResource(id = R.string.app_name),
                    modifier = Modifier.padding(16.dp)
                )
                Divider()
                NavigationDrawerItem(
                    label = { Text(text = stringResource(id = R.string.settings_title)) },
                    icon = {
                        Icon(
                            Icons.Filled.Settings,
                            contentDescription = stringResource(id = R.string.settings_title)
                        )
                    },
                    selected = false,
                    onClick = { /*TODO*/ }
                )
                NavigationDrawerItem(
                    label = { Text(text = stringResource(id = R.string.collections)) },
                    icon = {
                        Icon(
                            Icons.Filled.List,
                            contentDescription = stringResource(id = R.string.collections)
                        )
                    },
                    selected = false,
                    onClick = { showSubMenu.value = !showSubMenu.value }
                )
                AnimatedVisibility(visible = showSubMenu.value) {
                    SubMenu()
                }

                // ...other drawer items
            }
        },

        gesturesEnabled = true,
        content = content
    )
}

@Composable
fun SubMenu() {
    Column ( Modifier.padding(start = 16.dp, end = 24.dp, top = 15.dp)){
        Text(text = "Option 1")
        Text(text = "Option 2")
        Text(text = "Option 2")
    }
}

关于代码的说明。

我使用可组合物来显示/隐藏带有默认动画的内容。AnimatedVisibility
此外，采用一个局部变量，该变量将负责存储菜单的状态，是否显示。

预览结果

上一个：如何使 SwiftUI 列表可扩展和可折叠，就像在 Apple 的提醒应用程序中一样？

下一个：不能在 GRID_DETAIL_PANEL_TOGGLE_COL_DEF DataGridPro 中扩展多个列

可展开的 NavigationDrawerItem - Android Jetpack Compose

Expandable NavigationDrawerItem - Android Jetpack Compose

评论