dm-111

app/src/main/java/com/example/login_v3/home/Message/UI/Detail/Message_Messaging.kt

@@ -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}",
@@ -344,6 +352,7 @@ fun MessageMessaging(
                 }
             }
         }
+    }
 }
 
 @Composable

app/src/main/java/com/example/login_v3/home/Message/UI/Detail/Message_list.kt

@@ -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 之間有呼吸感
+                .padding(horizontal = 12.dp, vertical = 6.dp)
-            .clickable {
+                .clickable { onClick(room.roomId, room.displayTitle) }
-                // 🚀 修正：直接呼叫傳進來的 lambda 函式即可，不要包含 createRoute 唷！
+                // 🌟 關鍵：把共享元素鎖定在整個外層 Container 上！
-                onClick(room.roomId, room.displayTitle)
+                .sharedElement(
-            }
+                    rememberSharedContentState(key = "container_${room.roomId}"),
+                    animatedVisibilityScope = animatedVisibilityScope
+                )
             ,
             shape = RoundedCornerShape(16.dp), // 較大的圓角看起來更現代
             colors = CardDefaults.cardColors(
@@ -353,4 +364,6 @@ fun RoomItem(
 
             }
         }
+
+    }
 }

app/src/main/java/com/example/login_v3/home/Message/UI/Message.kt

@@ -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 = {
+                    // 4. 同樣把這兩個 Scope 傳入詳情頁
-                    navController.popBackStack()
+                    sharedTransitionScope = this@SharedTransitionLayout,
-                },
+                    animatedVisibilityScope = this@composable,
+                    onBackClick = { navController.popBackStack() },
                     bottomBarViewModel = bottomBarViewModel
                 )
             }
 
         }
+
+    }
 }