From 12c1ed7e7cc4f84fd8f99e901cfd55f656a6193e Mon Sep 17 00:00:00 2001 From: Kevinlinpr Date: Sun, 14 Jul 2024 17:14:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E5=8F=96Scaffold=EF=BC=8C=E9=83=A8?= =?UTF-8?q?=E5=88=86=E6=A0=B8=E5=BF=83=E9=A1=B5=E9=9D=A2=E6=89=8D=E6=9C=89?= =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F=E3=80=90=E4=BD=86?= =?UTF-8?q?=E6=98=AF=E6=80=A7=E8=83=BD=E5=8F=98=E5=B7=AE=E4=BA=86=E3=80=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/aiosman/riderpro/MainActivity.kt | 231 +++++++++++------- 1 file changed, 143 insertions(+), 88 deletions(-) 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 { @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