Jetpack使用和不使用BottomBar导航

Question

我有一个Jetpack撰写项目，其中包括使用带有Scaffold的BottomBar导航。顺便说一句，在特定的屏幕中，我希望能够在Scaffold的Scaffold作用域之外导航，并且可以在全屏上显示可组合的内容。

使用官方文件方法很好，直到您只需要导航单击BottomBar的项。

我在这个帖子中找到了一个解决方案，您可以在其中使用以下内容：

@Composable
fun OneScreen(navController: NavHostController) {
    MainScaffold(
        bottomBar = { BottomBar(navController = navController) },
        content = {
        // content
     })
}

对于需要显示BottomBar的屏幕，如下所示：

@Composable
fun AnotherScreen() {
    MainScaffold ()  {
        //content
    }
}

在你不需要播放的屏幕上。

我将此称为“变通解决方案”，因为通过这种方式，您需要在每个屏幕上重新生成BottomBar，每次由于重新组合(与标准BottomBar导航不同)而单击某一项时，它都会闪烁。

我觉得应该有一个更优雅的解决方案，但我缺乏确定它的经验，直到现在我才能找到它。

编辑：I在相关方面错了。闪烁不是因为重新组合，而是因为Navigation组件提供的Navigation(淡出/淡入)。因此，有可能消除“闪烁”问题设置没有动画在过渡。当然，这仍然是一个解决方案，因为它限制了用户在动画应用程序的灵活性。

Answer 1

我找到了一个解决办法，我相信这个方法比上一篇文章中提到的更好。我决定使用以下方法：

• 对不包括NavGraph的所有Screens使用BottomBar导航
• 对BottomBar屏幕项使用条件可组合生成

通过这种方式，我认为更容易管理Transition Animations和具有可读的代码。我确信--这不是最好的解决方案(我也不打算将其标记为解决方案)，但我认为值得分享这种方法。

MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyBottomNavTestTheme {
                val navController = rememberNavController()
                SetupNavGraph(navController)
            }
        }
    }
}

NavGraph

const val TEST_ROUTE = "test_route"

@Composable
fun SetupNavGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = Screen.MainScreen.route,
        route = TEST_ROUTE
    ) {
        composable(Screen.MainScreen.route) { MainScreen(navController) }
        composable(Screen.AnotherScreen.route) { AnotherScreen(navController) }
    }
}

MainScreen

@Composable
fun MainScreen(navController: NavHostController){

    var selectedItem by remember { mutableStateOf(0)}

    Scaffold(
        bottomBar = { MyBottomNavBar() {selectedItem = it} }
    ) {
            selectedItem ->
            when (selectedItem){
                0 -> TabOne(navController)
                1 -> TabTwo(navController)
                2 -> TabThree(navController)
            }

    }
}

@Composable
fun MyBottomNavBar(
    onSelectedItem: (Int) -> Unit
) {
    BottomNavigation() {
        BottomNavigationItem(
            selected = true,
            onClick = { onSelectedItem(0) },
            icon = { Icon(imageVector = Icons.Filled.Person, contentDescription = "Person Icon") },
            enabled = true,
        )
        BottomNavigationItem(
            selected = true,
            onClick = { onSelectedItem(1) },
            icon = { Icon(imageVector = Icons.Filled.Phone, contentDescription = "Phone Icon") },
            enabled = true,
        )
        BottomNavigationItem(
            selected = true,
            onClick = { onSelectedItem(2) },
            icon = { Icon(imageVector = Icons.Filled.Place, contentDescription = "Place Icon") },
            enabled = true,
        )
    }
}

@Composable
fun TabOne(navController: NavHostController){
    Surface(
        modifier = Modifier
            .fillMaxSize()
    ){
        Text(
            text = "TabOne"
        )
    }
}

@Composable
fun TabTwo(navController: NavHostController){
    Surface(
        modifier = Modifier
            .fillMaxSize()
    ){
        Text(
            text = "TabTwo"
        )
    }
}

@Composable
fun TabThree(navController: NavHostController){
    Surface(
        modifier = Modifier
            .fillMaxSize()
    ){
        Column(){
            Text(
                text = "TabThree"
            )
            Button(onClick = {navController.navigate(Screen.AnotherScreen.route)}){
                Text("Go to AnotherScreen")
            }
        }

    }
}

AnotherScreen

@Composable
fun AnotherScreen(navController: NavHostController){
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(onClick = {navController.navigate(Screen.MainScreen.route)}) {
            Text("Go to MainScreen")
        }
    }
}