如何在Android Jetpack Compose中实现可展开NavigationDrawerItem？

在Compose里实现可展开的导航抽屉项，核心是用状态管理控制展开/折叠状态，配合动画组件实现平滑过渡，完全不需要依赖View系统的ExpandableListView。以下是具体实现方案：

核心思路 #

• 用remember+mutableStateOf维护展开状态
• 用AnimatedVisibility实现子项的显示/隐藏动画
• 自定义可展开的抽屉项组件，整合主项点击切换状态、子项列表展示逻辑

完整代码示例 #

替换你原代码中的第二个NavigationDrawerItem，改成如下可展开组件：

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*/ }
            )
            
            // 可展开抽屉项：收藏集
            val isCollectionsExpanded by remember { mutableStateOf(false) }
            // 图标旋转动画
            val rotationAngle by animateFloatAsState(
                targetValue = if (isCollectionsExpanded) 90f else 0f,
                animationSpec = tween(durationMillis = 200)
            )
            
            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),
                        modifier = Modifier.rotate(rotationAngle)
                    )
                },
                selected = false,
                onClick = { isCollectionsExpanded = !isCollectionsExpanded }
            )
            
            // 展开的子项，带缩进和动画
            AnimatedVisibility(visible = isCollectionsExpanded) {
                Column(modifier = Modifier.padding(start = 16.dp)) {
                    // 子项1：我的收藏
                    NavigationDrawerItem(
                        label = { Text(text = "我的收藏") },
                        icon = { Icon(Icons.Filled.Star, contentDescription = "我的收藏") },
                        selected = false,
                        onClick = { /* 子项点击逻辑 */ }
                    )
                    // 子项2：共享收藏
                    NavigationDrawerItem(
                        label = { Text(text = "共享收藏") },
                        icon = { Icon(Icons.Filled.Share, contentDescription = "共享收藏") },
                        selected = false,
                        onClick = { /* 子项点击逻辑 */ }
                    )
                    // 更多子项...
                }
            }
            
            // ...其他抽屉项
        }
    },
    gesturesEnabled = true,
    content = content
)

关键细节说明 #

1. 状态管理：isCollectionsExpanded变量记录当前展开状态，点击主项时切换值
2. 动画增强：用animateFloatAsState实现图标的旋转动画，让展开/折叠的交互更直观
3. 子项样式：子项通过Modifier.padding(start = 16.dp)实现缩进，和主项区分开，保持视觉层级清晰
4. 性能优化：如果子项数量较多，可以把Column换成LazyColumn，避免一次性加载所有子项

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