更新 UI

This commit is contained in:
2024-07-19 10:05:06 +08:00
parent e2e58ea955
commit baee6f66dc
16 changed files with 414 additions and 65 deletions

View File

@@ -5,6 +5,7 @@ import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
@@ -35,6 +36,7 @@ import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@@ -49,6 +51,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.core.view.WindowCompat
import androidx.navigation.NavGraph
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
@@ -85,28 +88,31 @@ fun NavigationController(navController: NavHostController) {
}
NavHost(
navController = navController,
startDestination = NavigationItem.Home.route,
startDestination = "Index",
) {
// 带底部导航栏的路由:
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 -> {} // 由于过滤,这里不会发生
}
}
}
// 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 = "Index") {
ScaffoldWithNavigationBar2()
}
composable(route = "ProfileTimeline") {
GalleryPage()
@@ -126,7 +132,7 @@ fun NavigationController(navController: NavHostController) {
}
composable(route = "Post") {
PostPage()
PostPage()
}
composable(route = "ModificationList") {
@@ -149,9 +155,7 @@ fun NavigationController(navController: NavHostController) {
FollowerPage()
}
composable(route = "NewPost") {
NewPostScreen()
}
composable(route = "EditModification") {
Box(
@@ -200,6 +204,11 @@ fun ScaffoldWithNavigationBar(
val currentRoute = navBackStackEntry?.destination?.route
val systemUiController = rememberSystemUiController()
item.forEach { it ->
val isSelected = currentRoute == it.route
val iconTint by animateColorAsState(
targetValue = if (isSelected) Color.Red else Color.White,
animationSpec = tween(durationMillis = 250), label = ""
)
NavigationBarItem(
selected = currentRoute == it.route,
onClick = {
@@ -232,20 +241,20 @@ fun ScaffoldWithNavigationBar(
}
},
colors = NavigationBarItemColors(
selectedIconColor = Color.Red,
selectedTextColor = Color.Red,
selectedIndicatorColor = Color.Black,
unselectedIconColor = Color.Red,
unselectedTextColor = Color.Red,
disabledIconColor = Color.Red,
disabledTextColor = Color.Red,
),
selectedIconColor = iconTint,
unselectedIconColor = iconTint,
),
icon = {
Icon(
modifier = Modifier.size(24.dp),
imageVector = it.icon(), contentDescription = null,
tint = if (currentRoute == it.route) Color.Red else Color.White
imageVector = if (currentRoute == it.route) it.selectedIcon() else it.icon(),
contentDescription = null,
tint = iconTint
)
}
)
@@ -263,10 +272,102 @@ fun ScaffoldWithNavigationBar(
}
@Composable
fun Home() {
fun ScaffoldWithNavigationBar2(
) {
val model = IndexViewModel
val navigationBarHeight = with(LocalDensity.current) {
WindowInsets.navigationBars.getBottom(this).toDp()
}
val item = listOf(
NavigationItem.Home,
NavigationItem.Street,
NavigationItem.Add,
NavigationItem.Message,
NavigationItem.Profile
)
val systemUiController = rememberSystemUiController()
LaunchedEffect(Unit) {
systemUiController.setNavigationBarColor(Color.Black)
}
Scaffold(
bottomBar = {
NavigationBar(
modifier = Modifier.height(56.dp + navigationBarHeight),
containerColor = Color.Black
) {
item.forEachIndexed { idx, it ->
val isSelected = model.tabIndex == idx
val iconTint by animateColorAsState(
targetValue = if (isSelected) Color.Red else Color.White,
animationSpec = tween(durationMillis = 250), label = ""
)
NavigationBarItem(
selected = isSelected,
onClick = {
model.tabIndex = idx
// if (it.route == NavigationItem.Add.route || it.route == NavigationItem.Message.route) {
// systemUiController.setStatusBarColor(Color.Black, darkIcons = false)
// } else {
// systemUiController.setStatusBarColor(
// Color.Transparent,
// darkIcons = true
// )
// }
},
colors = NavigationBarItemColors(
selectedTextColor = Color.Red,
selectedIndicatorColor = Color.Black,
unselectedTextColor = Color.Red,
disabledIconColor = Color.Red,
disabledTextColor = Color.Red,
selectedIconColor = iconTint,
unselectedIconColor = iconTint,
),
icon = {
Icon(
modifier = Modifier.size(24.dp),
imageVector = if (isSelected) it.selectedIcon() else it.icon(),
contentDescription = null,
tint = iconTint
)
}
)
}
}
}
) { innerPadding ->
Box(
modifier = Modifier
) {
when (model.tabIndex) {
0 -> Box(
modifier = Modifier.padding(innerPadding)
) { Home() }
1 -> Street()
2 -> Box(
modifier = Modifier.padding(innerPadding)
) { Add() }
3 -> Box(
modifier = Modifier.padding(innerPadding)
) { Video() }
4 -> Box(
modifier = Modifier.padding(innerPadding)
) { Profile() }
}
}
}
}
@Composable
fun Home() {
val systemUiController = rememberSystemUiController()
LaunchedEffect(Unit) {
systemUiController.setStatusBarColor(Color.Transparent, darkIcons = true)
}
Column(
modifier = Modifier
.fillMaxSize(),
@@ -280,8 +381,9 @@ fun Home() {
@Composable
fun Street() {
val navigationBarHeight = with(LocalDensity.current) {
WindowInsets.navigationBars.getBottom(this).toDp()
val systemUiController = rememberSystemUiController()
LaunchedEffect(Unit) {
systemUiController.setStatusBarColor(Color.Transparent, darkIcons = true)
}
Column(
modifier = Modifier
@@ -295,8 +397,9 @@ fun Street() {
@Composable
fun Add() {
val navigationBarHeight = with(LocalDensity.current) {
WindowInsets.navigationBars.getBottom(this).toDp()
val systemUiController = rememberSystemUiController()
LaunchedEffect(Unit) {
systemUiController.setStatusBarColor(Color.Black, darkIcons = false)
}
Column(
modifier = Modifier
@@ -311,8 +414,9 @@ fun Add() {
@Composable
fun Video() {
val navigationBarHeight = with(LocalDensity.current) {
WindowInsets.navigationBars.getBottom(this).toDp()
val systemUiController = rememberSystemUiController()
LaunchedEffect(Unit) {
systemUiController.setStatusBarColor(Color.Black, darkIcons = false)
}
Column(
modifier = Modifier
@@ -341,8 +445,9 @@ fun Message() {
@Composable
fun Profile() {
val navigationBarHeight = with(LocalDensity.current) {
WindowInsets.navigationBars.getBottom(this).toDp()
val systemUiController = rememberSystemUiController()
LaunchedEffect(Unit) {
systemUiController.setStatusBarColor(Color.Transparent, darkIcons = true)
}
Column(
modifier = Modifier