jetpack compose navigation Item去掉选中状态
时间: 2023-08-05 15:09:06 浏览: 69
要去掉Jetpack Compose Navigation中的NavigationItem的选中状态,可以使用`rememberNavController`来获取NavController,然后使用`composable`函数中的`navController.currentBackStackEntryAsState()`来获取当前的BackStackEntry。接着,你可以使用`remember`函数来创建一个`LocalBackPressedDispatcher`,并在导航项目的点击事件中调用`navController.navigate`来实现导航。最后,在`NavigationItem`周围包装一个`UnselectedContent`组件,用于在该项目未被选中时显示内容。下面是一个示例代码:
```
val navController = rememberNavController()
val backPressedDispatcher = remember { LocalBackPressedDispatcherOwner.current.onBackPressedDispatcher }
NavHost(
navController,
startDestination = "home"
) {
composable("home") {
HomeScreen(
navController = navController,
onBackPressed = { backPressedDispatcher.onBackPressed() }
)
}
composable("profile") {
ProfileScreen(
navController = navController,
onBackPressed = { backPressedDispatcher.onBackPressed() }
)
}
}
BottomNavigation {
NavigationItem(
icon = Icons.Filled.Home,
label = "Home",
route = "home",
navController = navController,
backPressedDispatcher = backPressedDispatcher
)
NavigationItem(
icon = Icons.Filled.Person,
label = "Profile",
route = "profile",
navController = navController,
backPressedDispatcher = backPressedDispatcher
)
}
@Composable
fun NavigationItem(
icon: ImageVector,
label: String,
route: String,
navController: NavController,
backPressedDispatcher: OnBackPressedDispatcher
) {
val backstackEntry = navController.currentBackStackEntryAsState()
val selected = backstackEntry.value?.destination?.route == route
val onClick = {
if (!selected) {
navController.navigate(route) {
popUpTo(navController.graph.startDestinationId)
launchSingleTop = true
}
}
}
Box(
modifier = Modifier
.clickable(onClick = onClick)
.height(56.dp)
.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
if (!selected) {
UnselectedContent(icon = icon, label = label)
} else {
SelectedContent(icon = icon, label = label)
}
}
}
@Composable
fun UnselectedContent(icon: ImageVector, label: String) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(icon, contentDescription = null)
Text(text = label)
}
}
@Composable
fun SelectedContent(icon: ImageVector, label: String) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(icon, contentDescription = null, tint = MaterialTheme.colors.primary)
Text(text = label, color = MaterialTheme.colors.primary)
}
}
```
在上面的示例代码中,`UnselectedContent`组件用于在导航项目未被选中时显示内容。我们使用了`Box`组件包装了导航项目,然后在`Box`组件中使用了`UnselectedContent`和`SelectedContent`组件来分别显示未选中和选中的状态。如果当前导航项目未被选中,则显示`UnselectedContent`组件。否则,显示`SelectedContent`组件。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)