更新消息功能

- 调整评论区样式
- 优化评论区滚动交互
- 优化文案显示
This commit is contained in:
2024-09-01 21:00:16 +08:00
parent c08e6a0d62
commit 1a62bf26e4

View File

@@ -1,5 +1,6 @@
package com.aiosman.riderpro.ui.post package com.aiosman.riderpro.ui.post
import android.util.Log
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalSharedTransitionApi import androidx.compose.animation.ExperimentalSharedTransitionApi
import androidx.compose.animation.animateContentSize import androidx.compose.animation.animateContentSize
@@ -55,6 +56,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
@@ -258,113 +260,110 @@ fun PostScreen(
val scope = rememberCoroutineScope() val scope = rememberCoroutineScope()
val commentsPagging = viewModel.commentsFlow.collectAsLazyPagingItems() val commentsPagging = viewModel.commentsFlow.collectAsLazyPagingItems()
var showCollapseContent by remember { mutableStateOf(true) } var showCollapseContent by remember { mutableStateOf(false) }
val scrollState = rememberLazyListState() val scrollState = rememberLazyListState()
val uiController = rememberSystemUiController()
LaunchedEffect(Unit) { LaunchedEffect(Unit) {
// uiController.setNavigationBarColor(Color.Transparent)
viewModel.initData() viewModel.initData()
} }
Scaffold( Scaffold(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
bottomBar = { bottomBar = {
BottomNavigationBar( BottomNavigationBar(
onLikeClick = { onLikeClick = {
scope.launch { scope.launch {
if (viewModel.moment?.liked == true) { if (viewModel.moment?.liked == true) {
viewModel.dislikeMoment() viewModel.dislikeMoment()
} else { } else {
viewModel.likeMoment() viewModel.likeMoment()
}
}
},
onCreateComment = {
scope.launch {
viewModel.createComment(it)
commentsPagging.refresh()
}
},
onFavoriteClick = {
scope.launch {
if (viewModel.moment?.isFavorite == true) {
viewModel.unfavoriteMoment()
} else {
viewModel.favoriteMoment()
}
}
},
momentEntity = viewModel.moment
)
}
) {
it
Column(
modifier = Modifier
.fillMaxSize()
) {
StatusBarSpacer()
Header(
avatar = viewModel.avatar,
nickname = viewModel.nickname,
userId = viewModel.moment?.authorId,
isFollowing = viewModel.accountProfileEntity?.isFollowing ?: false,
onFollowClick = {
scope.launch {
if (viewModel.accountProfileEntity?.isFollowing == true) {
viewModel.unfollowUser()
} else {
viewModel.followUser()
}
} }
} }
) },
Column(modifier = Modifier.animateContentSize()) { onCreateComment = {
AnimatedVisibility(visible = showCollapseContent) { scope.launch {
// collapse content viewModel.createComment(it)
Column( commentsPagging.refresh()
modifier = Modifier }
.fillMaxWidth() },
) { onFavoriteClick = {
Box( scope.launch {
modifier = Modifier if (viewModel.moment?.isFavorite == true) {
.fillMaxWidth() viewModel.unfavoriteMoment()
.aspectRatio(1f) } else {
) { viewModel.favoriteMoment()
PostImageView( }
id, }
viewModel.moment?.images ?: emptyList() },
) momentEntity = viewModel.moment
)
} }
PostDetails( ) {
id, it
viewModel.moment Column(
) modifier = Modifier
.fillMaxSize()
) {
StatusBarSpacer()
Header(
avatar = viewModel.avatar,
nickname = viewModel.nickname,
userId = viewModel.moment?.authorId,
isFollowing = viewModel.accountProfileEntity?.isFollowing ?: false,
onFollowClick = {
scope.launch {
if (viewModel.accountProfileEntity?.isFollowing == true) {
viewModel.unfollowUser()
} else {
viewModel.followUser()
} }
} }
} }
Box( )
modifier = Modifier LazyColumn(
.fillMaxWidth() modifier = Modifier
) { .fillMaxWidth().weight(1f)
CommentsSection( ) {
lazyPagingItems = commentsPagging, item {
scrollState, Box(
onLike = { commentEntity: CommentEntity -> modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
) {
PostImageView(
id,
viewModel.moment?.images ?: emptyList()
)
}
PostDetails(
id,
viewModel.moment
)
}
items(commentsPagging.itemCount) { idx ->
val item = commentsPagging[idx] ?: return@items
Box(
modifier = Modifier.padding(horizontal = 16.dp)
) {
CommentItem(item, onLike = {
scope.launch { scope.launch {
if (commentEntity.liked) { if (item.liked) {
viewModel.unlikeComment(commentEntity.id) viewModel.unlikeComment(item.id)
} else { } else {
viewModel.likeComment(commentEntity.id) viewModel.likeComment(item.id)
} }
} }
}) { })
showCollapseContent = it
} }
} }
item {
Spacer(modifier = Modifier.height(72.dp))
}
} }
} }
}
} }
@@ -439,7 +438,9 @@ fun Header(
contentDescription = "" contentDescription = ""
) )
Text( Text(
text = if (isFollowing) "Following" else "Follow", text = if (isFollowing) stringResource(R.string.following_upper) else stringResource(
R.string.follow_upper
),
fontSize = 12.sp, fontSize = 12.sp,
color = Color.White, color = Color.White,
style = TextStyle(fontWeight = FontWeight.Bold) style = TextStyle(fontWeight = FontWeight.Bold)
@@ -540,9 +541,9 @@ fun PostDetails(
fontSize = 16.sp, fontSize = 16.sp,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
) )
Text(text = "${momentEntity?.time?.formatPostTime()} 发布") Text(text = "${momentEntity?.time?.formatPostTime()}")
Spacer(modifier = Modifier.height(8.dp)) Spacer(modifier = Modifier.height(8.dp))
Text(text = "${momentEntity?.commentCount ?: 0} Comments") Text(text = stringResource(R.string.comment_count, (momentEntity?.commentCount ?: 0)))
} }
} }
@@ -556,8 +557,8 @@ fun CommentsSection(
) { ) {
LazyColumn( LazyColumn(
state = scrollState, modifier = Modifier state = scrollState, modifier = Modifier
.padding(start = 16.dp, end = 16.dp)
.fillMaxHeight() .fillMaxHeight()
.padding(start = 16.dp, end = 16.dp)
) { ) {
items(lazyPagingItems.itemCount) { idx -> items(lazyPagingItems.itemCount) { idx ->
val item = lazyPagingItems[idx] ?: return@items val item = lazyPagingItems[idx] ?: return@items
@@ -573,6 +574,7 @@ fun CommentsSection(
coroutineScope.launch { coroutineScope.launch {
snapshotFlow { scrollState.firstVisibleItemScrollOffset } snapshotFlow { scrollState.firstVisibleItemScrollOffset }
.collect { offset -> .collect { offset ->
Log.d("scroll", "offset: $offset")
onWillCollapse(offset == 0) onWillCollapse(offset == 0)
} }
} }
@@ -600,11 +602,15 @@ fun CommentItem(commentEntity: CommentEntity, onLike: () -> Unit = {}) {
) { ) {
Text(text = commentEntity.name, fontWeight = FontWeight.Bold) Text(text = commentEntity.name, fontWeight = FontWeight.Bold)
Text(text = commentEntity.comment) Text(text = commentEntity.comment)
Text(text = commentEntity.date.timeAgo(context), fontSize = 12.sp, color = Color.Gray) Text(
text = commentEntity.date.timeAgo(context),
fontSize = 12.sp,
color = Color.Gray
)
} }
Column( Column(
modifier = Modifier.width(64.dp), horizontalAlignment = Alignment.CenterHorizontally
horizontalAlignment = Alignment.CenterHorizontally) { ) {
IconButton(onClick = { IconButton(onClick = {
onLike() onLike()
}) { }) {
@@ -660,7 +666,7 @@ fun BottomNavigationBar(
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
modifier = Modifier modifier = Modifier
.padding(horizontal = 16.dp, vertical = 8.dp) .padding(horizontal = 16.dp)
.background(Color.White) .background(Color.White)
) { ) {
// grey round box // grey round box
@@ -681,7 +687,7 @@ fun BottomNavigationBar(
) { ) {
Icon(Icons.Filled.Edit, contentDescription = "Send") Icon(Icons.Filled.Edit, contentDescription = "Send")
Spacer(modifier = Modifier.width(8.dp)) Spacer(modifier = Modifier.width(8.dp))
Text(text = "说点什么", fontSize = 12.sp) Text(text = stringResource(R.string.post_comment_hint), fontSize = 12.sp)
} }
} }