更新消息功能
- 调整评论区样式 - 优化评论区滚动交互 - 优化文案显示
This commit is contained in:
@@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user