android - 当导航到可组合时,我们如何隐藏 BottomAppBar(包含导航)?
问题描述
我有个问题。
问题是当我导航到“添加问题”屏幕时,我不知道如何隐藏底部应用程序栏。
我需要你的帮助。
这是底部应用栏的 MyScreen
@Composable
fun Navigation() {
val navController = rememberNavController()
val items = listOf(Screen.Home, Screen.Search, Screen.Notifications, Screen.Profil)
Scaffold(
bottomBar = {
bottomAppNavigation(navController = navController, items)
}
) {
Box(modifier = Modifier.padding(it)) {
ScreenController(navController = navController)
}
}
}
这是我的带有 navHost 的控制器
@ExperimentalComposeUiApi
@Composable
fun ScreenController(navController: NavHostController) {
NavHost(navController = navController, startDestination = Screen.Home.route) {
composable(Screen.Home.route) {
HomeScreen(navController)
}
composable(Screen.Search.route) {
SearchScreen(navController, it)
}
composable(Screen.Notifications.route) {
}
composable(Screen.Profil.route) {
user_profil()
}
composable("Ask_question") {
AskScreen(navController)
}
}
}
我认为这个问题是因为这就像活动和片段,我有一个可组合屏幕所在的盒子,我所有的页面都在他里面。
解决方案
我建议您使用AnimatedVisibility
小BottomNavigation
部件,我认为这是最清晰的撰写方式。
- 您应该使用
remeberSaveable
来存储 BottomBar 的状态:
// State of bottomBar, set state to false, if current page route is "car_details"
val bottomBarState = rememberSaveable { (mutableStateOf(true)) }
- 在可组合函数中我们用于
when
控制BottomBar的状态,下面我们设置bottomBarState
为true
,如果我们想显示BottomBar,否则我们设置bottomBarState
为false
:
val navController = rememberNavController()
// Subscribe to navBackStackEntry, required to get current route
val navBackStackEntry by navController.currentBackStackEntryAsState()
// Control BottomBar
when (navBackStackEntry?.destination?.route) {
"cars" -> {
// Show BottomBar
bottomBarState.value = true
}
"bikes" -> {
// Show BottomBar
bottomBarState.value = true
}
"settings" -> {
// Show BottomBar
bottomBarState.value = true
}
"car_details" -> {
// Hide BottomBar
bottomBarState.value = false
}
}
Scaffold(
bottomBar = {
BottomBar(
navController = navController,
bottomBarState = bottomBarState
)
},
content = {
NavHost(
navController = navController,
startDestination = NavigationItem.Cars.route,
) {
composable(NavigationItem.Cars.route) {
CarsScreen(
navController = navController,
)
}
composable(NavigationItem.Bikes.route) {
BikesScreen(
navController = navController
)
}
composable(NavigationItem.Settings.route) {
SettingsScreen(
navController = navController,
)
}
composable(NavigationItem.CarDetails.route) {
CarDetailsScreen(
navController = navController,
)
}
}
}
)
- 放入
BottomNavigation
里面AnimatedVisibility
,设置visible
值bottomBarState
和设置enter
和exit
动画,在我的例子中,我slideInVertically
用于enter
动画和slideOutVertically
动画exit
:
AnimatedVisibility(
visible = bottomBarState.value,
enter = slideInVertically(initialOffsetY = { it }),
exit = slideOutVertically(targetOffsetY = { it }),
content = {
BottomNavigation {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
items.forEach { item ->
BottomNavigationItem(
icon = {
Icon(
painter = painterResource(id = item.icon),
contentDescription = item.title
)
},
label = { Text(text = item.title) },
selected = currentRoute == item.route,
onClick = {
navController.navigate(item.route) {
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
}
)
}
}
}
)
MainActivity 的完整代码:
package codes.andreirozov.bottombaranimation
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.res.painterResource
import androidx.navigation.NavController
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import codes.andreirozov.bottombaranimation.screens.BikesScreen
import codes.andreirozov.bottombaranimation.screens.CarDetailsScreen
import codes.andreirozov.bottombaranimation.screens.CarsScreen
import codes.andreirozov.bottombaranimation.screens.SettingsScreen
import codes.andreirozov.bottombaranimation.ui.theme.BottomBarAnimationTheme
@ExperimentalAnimationApi
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BottomBarAnimationApp()
}
}
}
@ExperimentalAnimationApi
@Composable
fun BottomBarAnimationApp() {
// State of bottomBar, set state to false, if current page route is "car_details"
val bottomBarState = rememberSaveable { (mutableStateOf(true)) }
BottomBarAnimationTheme {
val navController = rememberNavController()
// Subscribe to navBackStackEntry, required to get current route
val navBackStackEntry by navController.currentBackStackEntryAsState()
// Control BottomBar
when (navBackStackEntry?.destination?.route) {
"cars" -> {
// Show BottomBar
bottomBarState.value = true
}
"bikes" -> {
// Show BottomBar
bottomBarState.value = true
}
"settings" -> {
// Show BottomBar
bottomBarState.value = true
}
"car_details" -> {
// Hide BottomBar
bottomBarState.value = false
}
}
Scaffold(
bottomBar = {
BottomBar(
navController = navController,
bottomBarState = bottomBarState
)
},
content = {
NavHost(
navController = navController,
startDestination = NavigationItem.Cars.route,
) {
composable(NavigationItem.Cars.route) {
CarsScreen(
navController = navController,
)
}
composable(NavigationItem.Bikes.route) {
BikesScreen(
navController = navController
)
}
composable(NavigationItem.Settings.route) {
SettingsScreen(
navController = navController,
)
}
composable(NavigationItem.CarDetails.route) {
CarDetailsScreen(
navController = navController,
)
}
}
}
)
}
}
@ExperimentalAnimationApi
@Composable
fun BottomBar(navController: NavController, bottomBarState: MutableState<Boolean>) {
val items = listOf(
NavigationItem.Cars,
NavigationItem.Bikes,
NavigationItem.Settings
)
AnimatedVisibility(
visible = bottomBarState.value,
enter = slideInVertically(initialOffsetY = { it }),
exit = slideOutVertically(targetOffsetY = { it }),
content = {
BottomNavigation {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
items.forEach { item ->
BottomNavigationItem(
icon = {
Icon(
painter = painterResource(id = item.icon),
contentDescription = item.title
)
},
label = { Text(text = item.title) },
selected = currentRoute == item.route,
onClick = {
navController.navigate(item.route) {
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
}
)
}
}
}
)
}
结果:
不要忘记@ExperimentalAnimationApi
为撰写功能使用注释。
更新:@ExperimentalAnimationApi
不需要Compose 版本 1.1.0 及更高版本。
2022 年 2 月 22 日更新:我做了一些研究,并更新了点 2。现在我们when
用于控制bottomBarState
。
gitHub 上提供完整代码: https ://github.com/AndreiRoze/BottomBarAnimation
官方文档中可用的动画示例: https ://developer.android.com/jetpack/compose/animation
推荐阅读
- python - 如何创建一个 python 脚本来减小图像大小而没有明显的质量损失?
- javascript - 我想对布尔相反输入进行编码?
- javascript - 如何在JS中将字符串转换为数组,溢出不起作用
- go - 如何在 Golang 中接受服务器连接或跳出 accept() 循环
- asp.net-core - 如何在没有 javascript 的情况下从 .net 核心显示对话框或弹出窗口
- java - 为什么我在 paintComponent 中的 gif 动画不起作用?
- caching - 我们新的开发人员/文档网站的缓存问题
- javascript - 这个问题是关于 Eloquent JavaScript 一书中的一个练习
- javascript - ASP.NET Core - 有没有办法将 viewbag 放在 javascript 或 jquery 上?
- netsuite - NetSuite rest api 问题说错误 500 - 找不到页面