- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有个问题。
问题是当我导航到“添加问题”屏幕时,我不知道如何隐藏底部应用程序栏。
我需要你的帮助。
这是底部应用栏的 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 的 Controller
@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)
}
}
}
我认为这个问题是因为这就像 Activity 和 fragment ,我有一个可组合屏幕所在的盒子,我所有的页面都在他里面。
最佳答案
我建议你使用 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
不需要。
when
用于控制
bottomBarState
.
关于android - 当导航到可组合时,我们如何隐藏 BottomAppBar(包含导航)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67575664/
当在 hideonScroll 设置为 true 时导航我的应用程序并向上/向下滚动时,我的 FabCradleMargin 在底部应用程序栏中变得更少,几乎是平坦的。当 BottomAppBar 从
我正在尝试测试来自 material.io 的 BottomAppBar 功能。但是,当我尝试运行应用程序时,我遇到了即时崩溃: > 10-20 22:21:25.067 27571-27571/co
我在这样的布局中定义了一个底栏: 导航图标是从“新矢量可绘制”向导生成的通用图标。有没有办法给它应用色调? 底部栏不是 Activity 操作栏。 到目前为止我已经尝试过: 应用了一个覆盖了 tex
我正在使用 BottomAppBar在我的应用程序中,但它有一个额外的左侧填充。如何删除此填充? 我的xml代码是:
我正在尝试实现 BottomAppBar 来处理 WebView 的导航。 一切正常,但我希望能够在用户分别向下和向上滚动时显示和隐藏 Bo
我目前正在开发一个使用底部应用栏作为主要导航的项目。但是即使我从示例源代码复制粘贴,我也总是会出错 这是我的布局文件 这是我的gradle依赖 depend
我有一个 Windows 8 应用程序(Xaml 和 C#): 我有一个包含在 MainPage 中的 userControl。 在这个 MainPage 中,我包含了一个 BottomAppBar,
class BottomNavigationDrawerFragment: BottomSheetDialogFragment(), NavigationView.OnNavigationIte
我像这样使用来自谷歌的 BottomAppBar: 自定义底栏是平的,我需要在底栏上添加圆角(如下图示例) 我应该怎么做才能使它以这种方式工作? 最佳答案 BottomAppBar 与 Mater
我想使用 CoordinatorLayout 在屏幕底部包含一个 BottomAppBar,并在剩余空间中显示一些内容(例如使用 ConstraintLayout)。 如果我将一个 Constrain
我刚刚开始使用 flutter,我想创建一个带有 FAB 和缺口的底部应用栏。 我的脚手架代码如下: return Scaffold( appBar: AppBar( ti
我正在使用最新的Material Design适用于 android 的库并遵循 this创建 BottomAppBar 的文档。 这是一个异常(exception)。完整日志为her
如何获取 BottomAppBar 的高度。我认为默认情况下它的高度为 8dp,但我没有得到任何高度。这是我的代码。 最佳答案 部分问题在于照明系统在 Android 上的工
我在应用程序中使用新的 BottomAppBar。但我无法让徽章发挥作用。我尝试使用 BottomNavigationView 上使用的相同逻辑,但它不起作用。(在另一个应用程序中,我在 Bottom
下面我有一张位图,不是纯白的,有一些噪点: 如何设置BottomAppBar的背景,下面是bitmap.xml, 在我的 activity_main.xml 中,我使用它如下: 但是不行,Bot
我正在尝试在 android 中实现 BottomAppBar 菜单小部件,但是在实现时我只能看到菜单图标而看不到所有其他菜单项(设置、搜索)。 我将父样式主题更改为:Theme.MaterialCo
我试图将 BottomAppBar 隐藏在键盘后面,但是当我将焦点转移到另一个 EditText 时,BottomAppBar 的部分开始出现,就像在photo .我也已经尝试更改 windowSof
我一直在尝试将菜单项的标题与 Android Studio 底部应用栏中的菜单图标一起添加。我尝试设置: app:showAsAction="ifRoom|withText" 但是没有成功。仅显示图标
我尝试了我的布局代码,BottomAppBar 没有完美显示,我到处搜索,但没有发现任何问题。 我在 Android Studio 3.4 上尝试过这个,我的 gradle 依赖项是 dependen
我尝试使用 BottomAppBar,我希望能够像 AppBarLayout 中的 setExpanded 一样以编程方式隐藏或显示它。 我的布局是这样的 ...
我是一名优秀的程序员,十分优秀!