更改部分 UI 下的状态栏表现

This commit is contained in:
2024-07-15 20:21:03 +08:00
parent ca8b9299b9
commit a518699f29
6 changed files with 117 additions and 99 deletions

View File

@@ -30,24 +30,30 @@ import androidx.compose.ui.unit.sp
@Preview @Preview
@Composable @Composable
fun CommentsScreen() { fun CommentsScreen() {
Column( StatusBarMaskLayout(
modifier = Modifier darkIcons = true,
.fillMaxSize() maskBoxBackgroundColor = Color(0xFFFFFFFF)
.background(color = Color(0xFFFFFFFF))
.padding(16.dp)
) { ) {
NoticeScreenHeader("COMMENTS") Column(
Spacer(modifier = Modifier.height(28.dp)) modifier = Modifier
LazyColumn( .fillMaxSize()
modifier = Modifier.weight(1f) .background(color = Color(0xFFFFFFFF))
.padding(horizontal = 16.dp)
) { ) {
item { NoticeScreenHeader("COMMENTS")
repeat(20) { Spacer(modifier = Modifier.height(28.dp))
CommentsItem() LazyColumn(
modifier = Modifier.weight(1f)
) {
item {
repeat(20) {
CommentsItem()
}
} }
} }
} }
} }
} }
@Composable @Composable

View File

@@ -27,25 +27,31 @@ import androidx.compose.ui.unit.sp
@Preview @Preview
@Composable @Composable
fun LikePage() { fun LikePage() {
Column( StatusBarMaskLayout(
modifier = Modifier darkIcons = true,
.fillMaxSize() maskBoxBackgroundColor = Color(0xFFFFFFFF)
.background(color = Color(0xFFFFFFFF))
.padding(16.dp)
) { ) {
NoticeScreenHeader("LIKES") Column(
Spacer(modifier = Modifier.height(28.dp)) modifier = Modifier
LazyColumn( .fillMaxSize()
modifier = Modifier.weight(1f) .background(color = Color(0xFFFFFFFF))
.padding(horizontal = 16.dp)
) { ) {
item { NoticeScreenHeader("LIKES")
repeat(20) { Spacer(modifier = Modifier.height(28.dp))
LikeItem() LazyColumn(
modifier = Modifier.weight(1f)
) {
item {
repeat(20) {
LikeItem()
}
} }
}
}
} }
} }
} }

View File

@@ -52,7 +52,7 @@ class MainActivity : ComponentActivity() {
super.onCreate(savedInstanceState) super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false) WindowCompat.setDecorFitsSystemWindows(window, false)
if (!Places.isInitialized()) { if (!Places.isInitialized()) {
Places.initialize(applicationContext,"AIzaSyDpgLDH1-SECw_pdjJq_msynq1XrxwgKVI") Places.initialize(applicationContext, "AIzaSyDpgLDH1-SECw_pdjJq_msynq1XrxwgKVI")
} }
enableEdgeToEdge() enableEdgeToEdge()
setContent { setContent {
@@ -142,32 +142,19 @@ fun NavigationController(navController: NavHostController) {
} }
} }
composable(route = "Comments") { composable(route = "Comments") {
Box( CommentsScreen()
modifier = Modifier.padding(navigationBarHeight)
) {
CommentsScreen()
}
} }
composable(route = "Likes") { composable(route = "Likes") {
Box( LikePage()
modifier = Modifier.padding(navigationBarHeight)
) {
LikePage()
}
} }
composable(route = "Followers") { composable(route = "Followers") {
Box(
modifier = Modifier.padding() FollowerPage()
) {
FollowerPage()
}
} }
composable(route = "NewPost") { composable(route = "NewPost") {
Box(
modifier = Modifier.padding(navigationBarHeight, top = 64.dp)
) {
NewPostScreen() NewPostScreen()
}
} }
composable(route = "EditModification") { composable(route = "EditModification") {
Box( Box(

View File

@@ -34,62 +34,65 @@ import androidx.compose.ui.unit.sp
@Composable @Composable
fun NotificationsScreen() { fun NotificationsScreen() {
val navController = LocalNavController.current val navController = LocalNavController.current
Column( StatusBarMaskLayout(darkIcons = true) {
modifier = Modifier.fillMaxSize() Column(
) { modifier = Modifier.fillMaxSize()
Box(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp, vertical = 16.dp)
) { ) {
Image( Box(
painter = painterResource(id = R.drawable.rider_pro_message_title), modifier = Modifier
contentDescription = "Back", .fillMaxWidth()
modifier = Modifier.width(120.dp) .padding(horizontal = 24.dp, vertical = 16.dp)
) ) {
} Image(
Row( painter = painterResource(id = R.drawable.rider_pro_message_title),
modifier = Modifier contentDescription = "Back",
.fillMaxWidth() modifier = Modifier.width(120.dp)
.padding(horizontal = 16.dp), )
horizontalArrangement = Arrangement.SpaceBetween,
) {
NotificationIndicator(10, R.drawable.rider_pro_like, "LIKE") {
navController.navigate("Likes")
} }
NotificationIndicator(10, R.drawable.rider_pro_followers, "FOLLOWERS"){ Row(
navController.navigate("Followers") modifier = Modifier
} .fillMaxWidth()
NotificationIndicator(10, R.drawable.rider_pro_comments, "COMMENTS"){ .padding(horizontal = 16.dp),
navController.navigate("Comments") horizontalArrangement = Arrangement.SpaceBetween,
) {
NotificationIndicator(10, R.drawable.rider_pro_like, "LIKE") {
navController.navigate("Likes")
}
NotificationIndicator(10, R.drawable.rider_pro_followers, "FOLLOWERS"){
navController.navigate("Followers")
}
NotificationIndicator(10, R.drawable.rider_pro_comments, "COMMENTS"){
navController.navigate("Comments")
}
} }
} HorizontalDivider(color = Color(0xFFEbEbEb), modifier = Modifier.padding(16.dp))
HorizontalDivider(color = Color(0xFFEbEbEb), modifier = Modifier.padding(16.dp)) NotificationCounterItem(24)
NotificationCounterItem(24) LazyColumn(
LazyColumn( modifier = Modifier
modifier = Modifier .weight(1f)
.weight(1f) .fillMaxSize()
.fillMaxSize() ) {
) { item {
item { repeat(20) {
repeat(20) { MessageItem(
MessageItem( MessageItemData(
MessageItemData( userName = "Onyama Limba",
userName = "Onyama Limba", message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", timeAgo = "3 days ago",
timeAgo = "3 days ago", profileImage = R.drawable.default_avatar
profileImage = R.drawable.default_avatar )
) )
) }
} }
} }
} }
} }
} }
@Composable @Composable

View File

@@ -48,17 +48,22 @@ import coil.compose.AsyncImage
@Composable @Composable
fun NewPostScreen() { fun NewPostScreen() {
val model = NewPostViewModel val model = NewPostViewModel
Column( StatusBarMaskLayout(
modifier = Modifier darkIcons = true,
.fillMaxSize()
) { ) {
NewPostTopBar() Column(
NewPostTextField("Share your adventure…", model.textContent) { modifier = Modifier
model.textContent = it .fillMaxSize()
) {
NewPostTopBar()
NewPostTextField("Share your adventure…", model.textContent) {
model.textContent = it
}
AddImageGrid()
AdditionalPostItem()
} }
AddImageGrid()
AdditionalPostItem()
} }
} }
@Composable @Composable

View File

@@ -1,10 +1,13 @@
package com.aiosman.riderpro package com.aiosman.riderpro
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.systemBars import androidx.compose.foundation.layout.systemBars
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@@ -29,6 +32,7 @@ fun StatusBarMask(darkIcons: Boolean = true) {
fun StatusBarMaskLayout( fun StatusBarMaskLayout(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
darkIcons: Boolean = true, darkIcons: Boolean = true,
maskBoxBackgroundColor: Color = Color.Transparent,
content: @Composable ColumnScope.() -> Unit content: @Composable ColumnScope.() -> Unit
) { ) {
val paddingValues = WindowInsets.systemBars.asPaddingValues() val paddingValues = WindowInsets.systemBars.asPaddingValues()
@@ -39,7 +43,14 @@ fun StatusBarMaskLayout(
Column( Column(
modifier = modifier modifier = modifier
) { ) {
Spacer(modifier = Modifier.height(paddingValues.calculateTopPadding())) Box(
modifier = Modifier
.height(paddingValues.calculateTopPadding())
.fillMaxWidth()
.background(maskBoxBackgroundColor)
) {
}
content() content()
} }
} }