diff --git a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
index 2d23341..6534764 100644
--- a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
+++ b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
@@ -12,6 +12,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
@@ -63,6 +64,9 @@ val LocalNavController = compositionLocalOf<NavHostController> {
 
 @Composable
 fun NavigationController(navController: NavHostController) {
+    val navigationBarHeight = with(LocalDensity.current) {
+        WindowInsets.navigationBars.getBottom(this).toDp()
+    }
     NavHost(
         navController = navController,
         startDestination = NavigationItem.Home.route,
@@ -72,60 +76,117 @@ fun NavigationController(navController: NavHostController) {
         exitTransition = {
             fadeOut(animationSpec = tween(0))
         }) {
-        composable(route = NavigationItem.Home.route) {
-            Home()
-        }
-        composable(route = NavigationItem.Street.route) {
-            Street()
-        }
-        composable(route = NavigationItem.Add.route) {
-            Add()
-        }
-        composable(route = NavigationItem.Message.route) {
-            Video()
-        }
-        composable(route = NavigationItem.Profile.route) {
-            Profile()
+        // 带底部导航栏的路由：
+        listOf(NavigationItem.Home,
+               NavigationItem.Street,
+               NavigationItem.Add,
+               NavigationItem.Message,
+               NavigationItem.Profile).forEach { item ->
+            composable(route = item.route) {
+                ScaffoldWithNavigationBar(navController) {
+                    when (item) {
+                        NavigationItem.Home -> Home()
+                        NavigationItem.Street -> Street()
+                        NavigationItem.Add -> Add()
+                        NavigationItem.Message -> Video()
+                        NavigationItem.Profile -> Profile()
+                        else -> {} // 由于过滤，这里不会发生
+                    }
+                }
+            }
         }
         composable(route = "ProfileTimeline") {
-            GalleryPage()
+            Box(
+                modifier = Modifier.padding(bottom = navigationBarHeight)
+            ) {
+                GalleryPage()
+            }
         }
         composable(route="LocationDetail") {
-            LocationDetail()
+            Box(
+                modifier = Modifier.padding(bottom = navigationBarHeight)
+            ) {
+                LocationDetail()
+            }
         }
         composable(route="OfficialPhoto") {
-            OfficialGalleryPage()
+            Box(
+                modifier = Modifier.padding(bottom = navigationBarHeight)
+            ) {
+                OfficialGalleryPage()
+            }
         }
         composable(route="OfficialPhotographer") {
-            OfficialPhotographer()
+            Box(
+                modifier = Modifier.padding(bottom = navigationBarHeight)
+            ) {
+                OfficialPhotographer()
+            }
         }
         composable(route="Post") {
-            PostPage()
+            Box(
+                modifier = Modifier.padding(bottom = navigationBarHeight)
+            ) {
+                PostPage()
+            }
         }
         composable(route="ModificationList") {
-            ModificationListScreen()
+            Box(
+                modifier = Modifier.padding(bottom = navigationBarHeight)
+            ) {
+                ModificationListScreen()
+            }
         }
         composable(route="MyMessage") {
-            NotificationsScreen()
+            Box(
+                modifier = Modifier.padding(bottom = navigationBarHeight)
+            ) {
+                NotificationsScreen()
+            }
         }
         composable(route="Comments") {
-            CommentsScreen()
+            Box(
+                modifier = Modifier.padding(navigationBarHeight)
+            ) {
+                CommentsScreen()
+            }
         }
         composable(route="Likes") {
-            LikePage()
+            Box(
+                modifier = Modifier.padding(navigationBarHeight)
+            ) {
+                LikePage()
+            }
         }
         composable(route="Followers") {
-            FollowerPage()
+            Box(
+                modifier = Modifier.padding(navigationBarHeight)
+            ) {
+                FollowerPage()
+            }
         }
     }
 }
 
 @Composable
 fun Navigation() {
+    val navController = rememberNavController()
+    CompositionLocalProvider(LocalNavController provides navController) {
+        Box {
+            NavigationController(navController = navController)
+        }
+    }
+}
+
+// 用于带导航栏的路由的可复用 composable
+@Composable
+fun ScaffoldWithNavigationBar(
+    navController: NavHostController,
+    content: @Composable () -> Unit
+) {
     val navigationBarHeight = with(LocalDensity.current) {
         WindowInsets.navigationBars.getBottom(this).toDp()
     }
-    val navController = rememberNavController()
     val item = listOf(
         NavigationItem.Home,
         NavigationItem.Street,
@@ -133,76 +194,70 @@ fun Navigation() {
         NavigationItem.Message,
         NavigationItem.Profile
     )
-    CompositionLocalProvider(LocalNavController provides navController) {
-        Scaffold(
-            modifier = Modifier.statusBarsPadding(),
-            topBar = {},
-
-            bottomBar = {
-                NavigationBar(
-                    modifier = Modifier.height(56.dp + navigationBarHeight),
-                    containerColor = Color.Black
-                ) {
-                    val navBackStackEntry by navController.currentBackStackEntryAsState()
-                    val currentRoute = navBackStackEntry?.destination?.route
-                    val systemUiController = rememberSystemUiController()
-                    item.forEach { it ->
-                        NavigationBarItem(
-                            selected = currentRoute == it.route,
-                            onClick = {
-                                if (currentRoute != it.route) {
-                                    navController.navigate(it.route)
-                                }
-                                when (it.route) {
-                                    NavigationItem.Add.route -> {
-                                        systemUiController.setSystemBarsColor(
-                                            color = Color.Black
-                                        )
-                                    }
-
-                                    NavigationItem.Message.route -> {
-                                        systemUiController.setSystemBarsColor(
-                                            color = Color.Black
-                                        )
-                                    }
-
-                                    else -> {
-                                        systemUiController.setSystemBarsColor(
-                                            color = Color.Transparent
-                                        )
-                                    }
-                                }
-                            },
-                            colors = NavigationBarItemColors(
-                                selectedIconColor = Color.Red,
-                                selectedTextColor = Color.Red,
-                                selectedIndicatorColor = Color.Black,
-                                unselectedIconColor = Color.Red,
-                                unselectedTextColor = Color.Red,
-                                disabledIconColor = Color.Red,
-                                disabledTextColor = Color.Red,
-
-                                ),
-                            icon = {
-                                Icon(
-                                    modifier = Modifier.size(24.dp),
-                                    imageVector = it.icon(), contentDescription = null,
-                                    tint = if (currentRoute == it.route) Color.Red else Color.White
+    Scaffold(
+        modifier = Modifier.statusBarsPadding(),
+        bottomBar = { NavigationBar(
+            modifier = Modifier.height(56.dp + navigationBarHeight),
+            containerColor = Color.Black
+        ) {
+            val navBackStackEntry by navController.currentBackStackEntryAsState()
+            val currentRoute = navBackStackEntry?.destination?.route
+            val systemUiController = rememberSystemUiController()
+            item.forEach { it ->
+                NavigationBarItem(
+                    selected = currentRoute == it.route,
+                    onClick = {
+                        if (currentRoute != it.route) {
+                            navController.navigate(it.route)
+                        }
+                        when (it.route) {
+                            NavigationItem.Add.route -> {
+                                systemUiController.setSystemBarsColor(
+                                    color = Color.Black
                                 )
                             }
+
+                            NavigationItem.Message.route -> {
+                                systemUiController.setSystemBarsColor(
+                                    color = Color.Black
+                                )
+                            }
+
+                            else -> {
+                                systemUiController.setSystemBarsColor(
+                                    color = Color.Transparent
+                                )
+                            }
+                        }
+                    },
+                    colors = NavigationBarItemColors(
+                        selectedIconColor = Color.Red,
+                        selectedTextColor = Color.Red,
+                        selectedIndicatorColor = Color.Black,
+                        unselectedIconColor = Color.Red,
+                        unselectedTextColor = Color.Red,
+                        disabledIconColor = Color.Red,
+                        disabledTextColor = Color.Red,
+
+                        ),
+                    icon = {
+                        Icon(
+                            modifier = Modifier.size(24.dp),
+                            imageVector = it.icon(), contentDescription = null,
+                            tint = if (currentRoute == it.route) Color.Red else Color.White
                         )
                     }
-                }
-            }
-        ) {  it
-            Box(
-                modifier = Modifier.padding(it)
-            ) {
-                NavigationController(navController = navController)
+                )
             }
+
+        } }
+    ) { innerPadding ->
+        Box(
+            modifier = Modifier.padding(innerPadding)
+        ) {
+            content()
         }
     }
-
 }
 
 @Composable