dm-111
This commit is contained in:
parent
d22d38b8fd
commit
6d48ad74ef
3 changed files with 342 additions and 313 deletions
|
|
@ -7,6 +7,8 @@ import androidx.activity.compose.rememberLauncherForActivityResult
|
|||
import androidx.activity.result.contract.ActivityResultContracts
|
||||
import androidx.compose.animation.AnimatedContent
|
||||
import androidx.compose.animation.AnimatedVisibility
|
||||
import androidx.compose.animation.AnimatedVisibilityScope
|
||||
import androidx.compose.animation.SharedTransitionScope
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.clickable
|
||||
|
|
@ -105,6 +107,8 @@ fun MessageMessaging(
|
|||
roomId: String,
|
||||
navController: NavController,
|
||||
onBackClick: () -> Unit,
|
||||
sharedTransitionScope: SharedTransitionScope,
|
||||
animatedVisibilityScope: AnimatedVisibilityScope,
|
||||
viewModel: ChatViewModel = hiltViewModel(),
|
||||
bottomBarViewModel: BottomBarViewModel
|
||||
) {
|
||||
|
|
@ -175,6 +179,8 @@ fun MessageMessaging(
|
|||
is MessagesUiState.Loading -> "載入中..."
|
||||
}
|
||||
|
||||
|
||||
with(sharedTransitionScope){
|
||||
Scaffold(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
|
|
@ -221,7 +227,7 @@ fun MessageMessaging(
|
|||
// 🌟 關鍵修改 1：設定半透明背景色
|
||||
colors = TopAppBarDefaults.topAppBarColors(
|
||||
// 這裡可以用 Surface 色加上 0.6 的透明度，或者直接用自訂顏色如 Color.White.copy(0.5f)
|
||||
containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.6f)
|
||||
containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.4f)
|
||||
)
|
||||
)
|
||||
},
|
||||
|
|
@ -294,8 +300,7 @@ fun MessageMessaging(
|
|||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(innerPadding)
|
||||
,
|
||||
.padding(innerPadding),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
// 根據不同的狀態渲染主畫面內容
|
||||
|
|
@ -303,6 +308,7 @@ fun MessageMessaging(
|
|||
is MessagesUiState.Loading -> {
|
||||
CircularProgressIndicator()
|
||||
}
|
||||
|
||||
is MessagesUiState.Success -> {
|
||||
if (state.messages.isEmpty()) {
|
||||
Text("目前沒有新訊息")
|
||||
|
|
@ -325,7 +331,8 @@ fun MessageMessaging(
|
|||
},
|
||||
onReactionClick = { message, emoji ->
|
||||
// 這是訊息氣泡下方既有 Reaction 小標籤的點擊事件，保持原樣即可
|
||||
val targetReaction = message.reactions?.find { it.emoji == emoji }
|
||||
val targetReaction =
|
||||
message.reactions?.find { it.emoji == emoji }
|
||||
if (targetReaction?.meReacted == true) {
|
||||
viewModel.removeMessageReaction(roomId, message.id, emoji)
|
||||
} else {
|
||||
|
|
@ -335,6 +342,7 @@ fun MessageMessaging(
|
|||
)
|
||||
}
|
||||
}
|
||||
|
||||
is MessagesUiState.Error -> {
|
||||
Text(
|
||||
text = "載入失敗：${state.message}",
|
||||
|
|
@ -345,6 +353,7 @@ fun MessageMessaging(
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun MessageList(
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
package com.example.login_v3.home.Message.UI.Detail
|
||||
|
||||
import androidx.compose.animation.AnimatedVisibilityScope
|
||||
import androidx.compose.animation.SharedTransitionScope
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.clickable
|
||||
|
|
@ -76,6 +78,8 @@ val ChatRoom?.displayTitle: String
|
|||
fun Loaded_Tg_Message(
|
||||
navController: NavController,
|
||||
viewModel: ChatRoomsViewModel = hiltViewModel(),
|
||||
sharedTransitionScope: SharedTransitionScope,
|
||||
animatedVisibilityScope: AnimatedVisibilityScope,
|
||||
onRoomClick: (String, String) -> Unit = { _, _ -> }
|
||||
) {
|
||||
var expanded by remember { mutableStateOf(false) }
|
||||
|
|
@ -191,11 +195,13 @@ fun Loaded_Tg_Message(
|
|||
LazyColumn(modifier = Modifier.padding(innerPadding)) {
|
||||
items(
|
||||
items = rooms,
|
||||
key = { it.roomId } // 增加效能，防止列表閃爍
|
||||
key = { it.roomId }
|
||||
) { room ->
|
||||
RoomItem(
|
||||
navController = navController,
|
||||
room = room,
|
||||
sharedTransitionScope = sharedTransitionScope, // 傳下去
|
||||
animatedVisibilityScope = animatedVisibilityScope, // 傳下去
|
||||
onClick = { roomId, roomName ->
|
||||
onRoomClick(roomId, roomName)
|
||||
}
|
||||
|
|
@ -215,19 +221,24 @@ fun Loaded_Tg_Message(
|
|||
fun RoomItem(
|
||||
navController: NavController,
|
||||
room: ChatRoom,
|
||||
sharedTransitionScope: SharedTransitionScope,
|
||||
animatedVisibilityScope: AnimatedVisibilityScope,
|
||||
// 🚀 修正 2：onClick 改成攜帶兩個參數 (roomId, roomName)
|
||||
onClick: (String, String) -> Unit
|
||||
) {
|
||||
val title = room.displayTitle
|
||||
|
||||
with(sharedTransitionScope){
|
||||
Card(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 12.dp, vertical = 6.dp) // 增加外邊距，讓 Card 之間有呼吸感
|
||||
.clickable {
|
||||
// 🚀 修正：直接呼叫傳進來的 lambda 函式即可，不要包含 createRoute 唷！
|
||||
onClick(room.roomId, room.displayTitle)
|
||||
}
|
||||
.padding(horizontal = 12.dp, vertical = 6.dp)
|
||||
.clickable { onClick(room.roomId, room.displayTitle) }
|
||||
// 🌟 關鍵：把共享元素鎖定在整個外層 Container 上！
|
||||
.sharedElement(
|
||||
rememberSharedContentState(key = "container_${room.roomId}"),
|
||||
animatedVisibilityScope = animatedVisibilityScope
|
||||
)
|
||||
,
|
||||
shape = RoundedCornerShape(16.dp), // 較大的圓角看起來更現代
|
||||
colors = CardDefaults.cardColors(
|
||||
|
|
@ -353,4 +364,6 @@ fun RoomItem(
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
package com.example.login_v3.home.Message.UI
|
||||
|
||||
import androidx.compose.animation.SharedTransitionLayout
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.hilt.navigation.compose.hiltViewModel
|
||||
import androidx.navigation.NavType
|
||||
|
|
@ -33,15 +34,20 @@ fun Tg_Message(
|
|||
) {
|
||||
val navController = rememberNavController()
|
||||
|
||||
SharedTransitionLayout{
|
||||
NavHost(
|
||||
navController = navController,
|
||||
startDestination = Screen.Messages.route,
|
||||
) {
|
||||
// 你的訊息主頁面
|
||||
// 訊息主頁面
|
||||
composable(Screen.Messages.route) {
|
||||
Loaded_Tg_Message(
|
||||
navController = navController,
|
||||
// ✨ 2. 這裡的點擊事件如果原本有傳 roomName，現在直接忽略，只傳 roomId 給路由
|
||||
// 2. 傳入 sharedTransitionScope (this@SharedTransitionLayout)
|
||||
sharedTransitionScope = this@SharedTransitionLayout,
|
||||
// 3. 傳入 animatedVisibilityScope (this@composable)
|
||||
animatedVisibilityScope = this@composable,
|
||||
onRoomClick = { roomId, _ ->
|
||||
val route = Screen.MessageMessaging.createRoute(roomId)
|
||||
navController.navigate(route)
|
||||
|
|
@ -74,7 +80,6 @@ fun Tg_Message(
|
|||
composable(
|
||||
route = Screen.MessageMessaging.route,
|
||||
arguments = listOf(
|
||||
// ✨ 3. 只保留 roomId 的參數宣告，完全刪除 roomName 的 navArgument
|
||||
navArgument("roomId") {
|
||||
type = NavType.StringType
|
||||
nullable = true
|
||||
|
|
@ -84,16 +89,18 @@ fun Tg_Message(
|
|||
) { backStackEntry ->
|
||||
val roomId = backStackEntry.arguments?.getString("roomId").orEmpty()
|
||||
|
||||
// ✨ 4. 呼叫新版的 MessageMessaging，不再傳入 roomName 參數
|
||||
MessageMessaging(
|
||||
roomId = roomId,
|
||||
navController = navController,
|
||||
onBackClick = {
|
||||
navController.popBackStack()
|
||||
},
|
||||
// 4. 同樣把這兩個 Scope 傳入詳情頁
|
||||
sharedTransitionScope = this@SharedTransitionLayout,
|
||||
animatedVisibilityScope = this@composable,
|
||||
onBackClick = { navController.popBackStack() },
|
||||
bottomBarViewModel = bottomBarViewModel
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue