6

情况

我正在使用Kotlin&编写一个非常简单的应用程序Android Jetpack Compose

我有一个scaffold包含 mynavHost和一个bottomBar. 我可以使用它bottomBar在三个主屏幕之间导航。其中一个主屏幕有一个详细信息屏幕，不应显示bottomBar.

我的代码

到目前为止，这是小菜一碟：

// MainActivitys onCreate

setContent {
    val navController = rememberAnimatedNavController()
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route?.substringBeforeLast("/")

    BottomBarNavTestTheme {
        Scaffold(
            bottomBar = {
                if (currentRoute?.substringBeforeLast("/") == Screen.Detail.route) {
                    MyBottomNavigation(
                        navController,
                        currentRoute,
                        listOf(Screen.Dashboard, Screen.Map, Screen.Events) // main screens
                    )
                }
            }
        ) { innerPadding ->
            NavHost( // to be replaced by AnimatedNavHost
                navController = navController,
                startDestination = Screen.Dashboard.route,
                modifier = Modifier.padding(innerPadding)
            ) {
                composable(Screen.Dashboard.route) { DashboardScreen() }
                composable(Screen.Map.route) { MapScreen { navController.navigate(Screen.Detail.route) } }
                composable(Screen.Events.route) { EventsScreen() }
                composable(Screen.Detail.route) { MapDetailScreen() }
            }
        }
    }
}

问题：

我想在我的屏幕之间进行转换，所以我正在使用伴奏导航动画：只需替换NavHost为AnimatedNavHost.

从mainScreen到导航时detailScreen有一个奇怪的效果：

  1. bottomBar 隐藏
  2. 主屏幕调整大小：（见底部对齐的文字）
  3. 细节屏幕的动画发生。

这看起来很糟糕，我该如何解决？

解决方案

最佳解决方案如下所示：

  • 主屏幕保持底部栏和淡出。
  • 同时详细页面进入没有底栏。
4

2 回答 2

0

因此，我们采用了一种解决方法：

  • 在顶层，现在scaffold不再包含 abottomBar
  • 每个需要它的屏幕现在都有自己的bottomBar.

这工作正常，只是波纹点击bottomBar不像我们希望的那样平滑（我们在点击中交换它，所以这是可以预料的）

这也解决了一个问题，即屏幕具有可滚动内容，由于隐藏底栏时滚动距离发生了变化，因此滚动距离有点混乱。

于 2021-09-17T09:54:52.307 回答
0

在我的代码中遇到了类似的问题，这就是我解决它的方法；我使用了交叉淡入淡出，你可以阅读更多https://developer.android.com/jetpack/compose/animation#crossfade 和更多关于底部导航的信息https://developer.android.com/jetpack/compose/navigation#底部导航

enum class HomeNavType {
    DASHBOARD, ACCOUNT
}

@Composable
fun HomeScreen(navController: NavController) {
    val homeNavItemState = rememberSaveable { mutableStateOf(HomeNavType.DASHBOARD) }
    Scaffold(
        content = { HomeContent(homeNavType = homeNavItemState.value , navController)},
        bottomBar = { HomeBottomNavigation(homeNavItemState) }
    )
}

@Composable
fun HomeBottomNavigation(homeNavItemState: MutableState<HomeNavType>) {
    BottomNavigation() {
        BottomNavigationItem(
            selected = homeNavItemState.value === HomeNavType.DASHBOARD,
            onClick = {
                homeNavItemState.value = HomeNavType.DASHBOARD
            },
            icon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_dashboard),
                    contentDescription = "Dashboard"
                )
            },
            label = { Text("Dashboard") },
        )
        BottomNavigationItem(
            selected = homeNavItemState.value === HomeNavType.ACCOUNT,
            onClick = {
                homeNavItemState.value = HomeNavType.ACCOUNT
            },
            icon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_person),
                    contentDescription = "Account"
                )
            },
            label = { Text("Account") },
        )
    }
}

@Composable
fun HomeContent(homeNavType: HomeNavType, navController: NavController) {
    Crossfade(targetState = homeNavType) { navType ->
        when (navType) {
            HomeNavType.DASHBOARD -> DashboardScreen(navController)
            HomeNavType.ACCOUNT -> AccountScreen(navController)
        }
    }
}
于 2021-09-22T19:01:14.857 回答