提取Scaffold,部分核心页面才有底部导航栏【但是性能变差了】

This commit is contained in:
2024-07-14 17:14:05 +08:00
parent 2f7cbaea74
commit 12c1ed7e7c

View File

@@ -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()
// 带底部导航栏的路由:
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 = NavigationItem.Street.route) {
Street()
}
composable(route = NavigationItem.Add.route) {
Add()
}
composable(route = NavigationItem.Message.route) {
Video()
}
composable(route = NavigationItem.Profile.route) {
Profile()
}
composable(route = "ProfileTimeline") {
Box(
modifier = Modifier.padding(bottom = navigationBarHeight)
) {
GalleryPage()
}
}
composable(route="LocationDetail") {
Box(
modifier = Modifier.padding(bottom = navigationBarHeight)
) {
LocationDetail()
}
}
composable(route="OfficialPhoto") {
Box(
modifier = Modifier.padding(bottom = navigationBarHeight)
) {
OfficialGalleryPage()
}
}
composable(route="OfficialPhotographer") {
Box(
modifier = Modifier.padding(bottom = navigationBarHeight)
) {
OfficialPhotographer()
}
}
composable(route="Post") {
Box(
modifier = Modifier.padding(bottom = navigationBarHeight)
) {
PostPage()
}
}
composable(route="ModificationList") {
Box(
modifier = Modifier.padding(bottom = navigationBarHeight)
) {
ModificationListScreen()
}
}
composable(route="MyMessage") {
Box(
modifier = Modifier.padding(bottom = navigationBarHeight)
) {
NotificationsScreen()
}
}
composable(route="Comments") {
Box(
modifier = Modifier.padding(navigationBarHeight)
) {
CommentsScreen()
}
}
composable(route="Likes") {
Box(
modifier = Modifier.padding(navigationBarHeight)
) {
LikePage()
}
}
composable(route="Followers") {
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,13 +194,9 @@ fun Navigation() {
NavigationItem.Message,
NavigationItem.Profile
)
CompositionLocalProvider(LocalNavController provides navController) {
Scaffold(
modifier = Modifier.statusBarsPadding(),
topBar = {},
bottomBar = {
NavigationBar(
bottomBar = { NavigationBar(
modifier = Modifier.height(56.dp + navigationBarHeight),
containerColor = Color.Black
) {
@@ -192,17 +249,15 @@ fun Navigation() {
}
)
}
}
}
) { it
Box(
modifier = Modifier.padding(it)
) {
NavigationController(navController = navController)
}
}
}
} }
) { innerPadding ->
Box(
modifier = Modifier.padding(innerPadding)
) {
content()
}
}
}
@Composable