更改部分 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
@Composable
fun CommentsScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.background(color = Color(0xFFFFFFFF))
.padding(16.dp)
StatusBarMaskLayout(
darkIcons = true,
maskBoxBackgroundColor = Color(0xFFFFFFFF)
) {
NoticeScreenHeader("COMMENTS")
Spacer(modifier = Modifier.height(28.dp))
LazyColumn(
modifier = Modifier.weight(1f)
Column(
modifier = Modifier
.fillMaxSize()
.background(color = Color(0xFFFFFFFF))
.padding(horizontal = 16.dp)
) {
item {
repeat(20) {
CommentsItem()
NoticeScreenHeader("COMMENTS")
Spacer(modifier = Modifier.height(28.dp))
LazyColumn(
modifier = Modifier.weight(1f)
) {
item {
repeat(20) {
CommentsItem()
}
}
}
}
}
}
@Composable

View File

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

View File

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

View File

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

View File

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

View File

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