Android studio kotlin 导航抽屉和底部导航栏

Android studio kotlin navigation drawer& bottom navigation bar

提问人:UwUs 提问时间:11/14/2023 更新时间:11/14/2023 访问量:28

问:

我正在学习 Android 开发,在开发我的第一个应用程序时遇到了一个挑战。 具体来说,我在同时实现导航底部栏和侧抽屉时遇到了困难。目前,它们似乎一次只能正常工作 - 我可以查看抽屉或底部导航,但不能同时查看两者。我尝试过使用脚手架,但这似乎不起作用。这是我的代码:

data class NavigationItem(
    val title: String,
    val selectedIcon: ImageVector,
    val unselectedIcon: ImageVector,
    val badgeCount: Int? = null
)
@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
    @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BlancheTheme {
                val items = listOf(
                    NavigationItem(
                        title = "Home",
                        selectedIcon = Icons.Filled.Home,
                        unselectedIcon = Icons.Outlined.Home,

                    ),
                    NavigationItem(
                        title = "Orders",
                        selectedIcon = Icons.Filled.List,
                        unselectedIcon = Icons.Filled.List,

                        ),
                    NavigationItem(
                        title = "Foto's",
                        selectedIcon = Icons.Filled.Add,
                        unselectedIcon = Icons.Outlined.Add,

                        ),
                    NavigationItem(
                        title = "Prijzen",
                        selectedIcon = Icons.Filled.Create,
                        unselectedIcon = Icons.Filled.Create,

                        ),
                )
                var selectedItemIndex by rememberSaveable {
                    mutableStateOf(0)
                }
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                   val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
                    val scope = rememberCoroutineScope()
                    ModalNavigationDrawer(
                        drawerContent = {
                                        ModalDrawerSheet {
                                            items.forEachIndexed{index, item -> NavigationDrawerItem(
                                                label = { Text(text = item.title)},
                                                selected = index == selectedItemIndex,
                                                onClick = { selectedItemIndex = index
                                                scope.launch { drawerState.close() }},
                                                icon = {Icon(imageVector = if(index == selectedItemIndex){item.selectedIcon}else item.unselectedIcon, contentDescription = item.title)})  }
                                        }

                        },
                        drawerState = drawerState


                        ) {
                        Scaffold (
                            topBar = {
                                TopAppBar(title = {
                                    Text(text = "Blanche") },
                                    navigationIcon = {
                                        IconButton(onClick = {
                                            scope.launch {
                                                drawerState.open()
                                            }
                                            }) {
                                            Icon(
                                                imageVector = Icons.Default.Menu,
                                                contentDescription = "Menu"
                                            )
                                            
                                        }
                                    }

                                    )
                            }
                        ) {

                        }
                    }
                    Scaffold (
                        bottomBar = {
                            NavigationBar {
                                items.forEachIndexed{index, item -> NavigationBarItem(
                                    selected = selectedItemIndex == index,
                                    onClick = { selectedItemIndex= index
                                              // navController.navigate(item.title)
                                        },
                                    label = {
                                            Text(text = item.title)
                                    },
                                    icon = {
                                        BadgedBox(
                                            badge = {
                                                if (item.badgeCount != null){
                                                    Badge {
                                                        Text(text = item.badgeCount.toString())
                                                    }
                                                }


                                        }
                                        ) {
                                            Icon(
                                                imageVector = if(index == selectedItemIndex){
                                                    item.selectedIcon
                                                }
                                                else
                                                    item.unselectedIcon,
                                                contentDescription = item.title
                                            )

                                        }
                                    })}

                            }
                        }
                    ) {
                    }
                }

            }
        }
    }
}

Thanks in advance
Android Kotlin 导航 android-jetpack-compose

评论


答: 暂无答案