【筆記】使用 Bottom Navigation 的範例（By ChatGPT）

Jetpack Compose 是一個新的 Android UI 工具包，可以幫助開發者更方便地編寫 Android UI。Bottom Navigation 是一種常見的 UI 元素，它可以讓用戶在應用程序的不同部分之間切換。下面是一個使用 Jetpack Compose 寫的 Bottom Navigation 範例。

首先，我們需要創建一個新的 Composable 函數來創建 Bottom Navigation。在這個函數中，我們使用 BottomNavigation 和 BottomNavigationItemComposable 兩個組件來創建底部導航。

@Composable
fun BottomNavigation() {
    val navItems = listOf(
        NavItem.Home,
        NavItem.Profile,
        NavItem.Settings
    )
    BottomNavigation {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        navItems.forEach { screen ->
            BottomNavigationItem(
                icon = { Icon(screen.icon, contentDescription = null) },
                label = { Text(screen.title) },
                selected = currentRoute == screen.route,
                onClick = {
                    navController.navigate(screen.route) {
                        launchSingleTop = true
                    }
                }
            )
        }
    }
}

在這個函數中，我們創建了一個 NavItem 對象列表，每個對象都代表一個底部導航項目。在 BottomNavigation 中，我們使用 navController 和 BottomNavigationItemComposable 來創建每個項目。在 BottomNavigationItemComposable 中，我們使用當前路徑來確定哪個項目應該被選中。當用戶點擊一個項目時，我們使用 navController 來導航到相應的目的地。

接下來，我們需要在應用程序的主要 Composable 函數中調用 BottomNavigation。

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = NavItem.Home.route
    ) {
        composable(NavItem.Home.route) { HomeScreen() }
        composable(NavItem.Profile.route) { ProfileScreen() }
        composable(NavItem.Settings.route) { SettingsScreen() }
    }
    BottomNavigation(navController = navController)
}

在這個函數中，我們創建了一個 NavHost，用於顯示不同的屏幕。然後，我們將 navController 傳遞給 BottomNavigation，以便能夠正確地處理用戶的導航操作。

最後，我們需要定義 NavItem 對象，以便能夠在應用程序中使用它們。

sealed class NavItem(val route: String, val title: String, val icon: ImageVector) {
    object Home : NavItem("home", "Home", Icons.Filled.Home)
    object Profile : NavItem("profile", "Profile", Icons.Filled.Person)
    object Settings : NavItem("settings", "Settings", Icons.Filled.Settings)
}

在這個示例中，我們使用了密封類（sealed class）來定義 NavItem 對象。每個對象都有一個路徑、標題和圖標，分別表示底部導航項目的路徑、顯示在底部導航中的標題和圖標。 完整的 Bottom Navigation 範例代碼如下：

```kotlin
sealed class NavItem(val route: String, val title: String, val icon: ImageVector) {
    object Home : NavItem("home", "Home", Icons.Filled.Home)
    object Profile : NavItem("profile", "Profile", Icons.Filled.Person)
    object Settings : NavItem("settings", "Settings", Icons.Filled.Settings)
}

@Composable
fun BottomNavigation(navController: NavHostController) {
    val navItems = listOf(
        NavItem.Home,
        NavItem.Profile,
        NavItem.Settings
    )
    BottomNavigation {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        navItems.forEach { screen ->
            BottomNavigationItem(
                icon = { Icon(screen.icon, contentDescription = null) },
                label = { Text(screen.title) },
                selected = currentRoute == screen.route,
                onClick = {
                    navController.navigate(screen.route) {
                        launchSingleTop = true
                    }
                }
            )
        }
    }
}

@Composable
fun HomeScreen() {
    Text("Home Screen")
}

@Composable
fun ProfileScreen() {
    Text("Profile Screen")
}

@Composable
fun SettingsScreen() {
    Text("Settings Screen")
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = NavItem.Home.route
    ) {
        composable(NavItem.Home.route) { HomeScreen() }
        composable(NavItem.Profile.route) { ProfileScreen() }
        composable(NavItem.Settings.route) { SettingsScreen() }
    }
    BottomNavigation(navController = navController)
}

在這個示例中，我們定義了三個屏幕：HomeScreen、ProfileScreen 和 SettingsScreen。然後，我們在 MyApp 函數中創建了一個 NavHost，將這些屏幕與相應的路徑進行映射。最後，我們在 MyApp 函數中調用了 BottomNavigation，以顯示底部導航。

當應用程序啟動時，它會顯示 HomeScreen，並在底部顯示三個導航選項。當用戶點擊不同的選項時，應用程序會使用 NavHostController 將用戶導向相應的屏幕。