前面已經說了很多navigation的使用方式了，所以是時候改App函數，讓應用可以在不同頁面間瀏覽

實作NavHost

先將之前寫好的頁面都放到導覽中

NavHost(  
    navController = navController,  
    startDestination = Screens.Main.route,  
    modifier = modifier.padding(innerPadding)  // from scaffold
) {  
    navigation(  
        startDestination = Screens.Main.TodoLists.route,  
        route = Screens.Main.route  
    ) {  
        composable(Screens.Main.TodoLists.route) {  
            TodoGroups()  
        }  
        composable(Screens.Main.Todos.route) {  
            TodoDisplayPreview()  
        }  
    }
	composable(Screens.Input.route) {  
        InputPage()  
    }  
    composable(Screens.Settings.route) {  
        SettingPage()  
    }  
}

navigation是一個類似於subNavHost一樣的東西，可以更好的管理，但他也有很多的功能，這裡不會說
前篇有提到如何使用sealed class做出易讀性高的路徑表，可以自己試試看
因為我們寫的TodoDisplay需要參數，所以這邊先放Preview版本的，到時候再改正

實作Bottom Bar

先在外面套一層Scaffold，並放入一個BottomBar，等一下完成

Scaffold(  
    bottomBar = {BottomBar()}  
) {innerPadding ->  
    NavHost(){}
}

接下來就要著手處理BottomBar的內容了，參考前篇的內容

data class BottomNavItem(val title: String, val route: String, val icon: ImageVector)  
@Composable  
fun BottomBar(navController: NavController, modifier: Modifier = Modifier) {  
    val bottomBarItems = listOf(  
        BottomNavItem("首頁", Screens.Main.route, Icons.Default.CheckCircle),  
        BottomNavItem("任務", Screens.Input.route, Icons.Default.Add),  
        BottomNavItem("設定", Screens.Settings.route, Icons.Default.Settings),  
    )  
    NavigationBar {  
        val navBackEntry by navController.currentBackStackEntryAsState()  
        val currentRoute = navBackEntry?.destination?.route  
        bottomBarItems.forEach { item->  
            NavigationBarItem(  
                icon = { Icon(item.icon, contentDescription = item.title) },  
                selected = currentRoute == item.route,  
                label = { Text(item.title) },  
                onClick = {  
                    navController.navigate(item.route) {  
                        popUpTo(navController.graph.findStartDestination().id) {  
                            saveState = true  
                        }  
                        launchSingleTop = true  
                        restoreState = true  
                    }  
                }
			)  
        }  
    }
}

現在應該可以透過BottomBar切換頁面了，但是我們還需要可以在各個頁面間直接切換

實作頁面間導覽

首先，要給TodoGroups頁面navController，讓他可以操作導覽
在某一個Group被按下的時候可以切換到TodoDisplay頁面，雖然現在還無法正確的顯示內容
所以要讓這些組別能夠被按下，並觸發對應的function

// TodoGroups
items(groupList) { group->  
    GroupItem(group) {  
        navController.navigate(Screens.Main.Todos.route){  
            launchSingleTop = true  
        }  
    }
}
// GroupItem
Column(  
    modifier = Modifier.fillMaxWidth()  
        .background(Color.Unspecified, RoundedCornerShape(5.dp))  
        .clickable{onClick(group.first)},  
)

如果有按照過程操作，現在應該可以正常的切換，且可以從group進到todolist
但是會切換不回來，除非按下返回鍵，所以可以考慮讓main不要saveState，或是內建一個返回的按鈕在top bar上