eric/technologia-jetpack-compose
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dm-45

Browse source
This commit is contained in:
Eric85710 2026-05-26 15:23:37 +08:00
parent d82884b1d3
commit 85b4954bed
1 changed files with 84 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,6 +31,7 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.Send import androidx.compose.material.icons.automirrored.filled.Send
import androidx.compose.material.icons.filled.AccountCircle import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.AddCircle import androidx.compose.material.icons.filled.AddCircle
import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Close import androidx.compose.material.icons.filled.Close
@ -40,6 +41,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
@ -383,66 +385,98 @@ fun MessageRow(
@Composable @Composable
fun MessageInputBar( fun MessageInputBar(
isLoading: Boolean, isLoading: Boolean,
replyingMessage: Message?, // 💡 新增 replyingMessage: Message?,
onCancelReply: () -> Unit, // 💡 新增 onCancelReply: () -> Unit,
onSendClick: (String) -> Unit, onSendClick: (String) -> Unit,
onImageSelected: (Uri) -> Unit onImageSelected: (Uri) -> Unit
) { ) {
var textState by remember { mutableStateOf("") } var textState by remember { mutableStateOf("") }
Column( // 💡 使用打包器，確保軟鍵盤彈出時系統會正確計算高度
modifier = Modifier Surface(
.fillMaxWidth() modifier = Modifier.fillMaxWidth(),
.background(Color.White) // 或者是你的背景色 tonalElevation = 2.dp,
color = Color.White // 確保底色不透明，不會透出後方的聊天訊息
) { ) {
// 💡 如果目前處於回覆狀態，就在輸入框上方橫向塞一個預覽 UI Column(modifier = Modifier.fillMaxWidth()) {
AnimatedVisibility(visible = replyingMessage != null) {
if (replyingMessage != null) { // 1. 回覆預覽列
Row( AnimatedVisibility(visible = replyingMessage != null) {
modifier = Modifier if (replyingMessage != null) {
.fillMaxWidth() Row(
.background(Color(0xFFF5F5F5)) modifier = Modifier
.padding(horizontal = 16.dp, vertical = 8.dp), .fillMaxWidth()
verticalAlignment = Alignment.CenterVertically, .background(Color(0xFFF5F5F5))
horizontalArrangement = Arrangement.SpaceBetween .padding(horizontal = 16.dp, vertical = 8.dp),
) { verticalAlignment = Alignment.CenterVertically,
Column(modifier = Modifier.weight(1f)) { horizontalArrangement = Arrangement.SpaceBetween
Text( ) {
text = "正在回覆訊息", Column(modifier = Modifier.weight(1f)) {
style = MaterialTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold), Text(
color = Color(0xFFDA7029) text = "正在回覆訊息",
) style = MaterialTheme.typography.bodySmall.copy(fontWeight = FontWeight.Bold),
Text( color = Color(0xFFDA7029)
text = replyingMessage.content, )
style = MaterialTheme.typography.bodySmall, Text(
color = Color.Gray, text = replyingMessage.content,
maxLines = 1, style = MaterialTheme.typography.bodySmall,
overflow = TextOverflow.Ellipsis color = Color.Gray,
) maxLines = 1,
} overflow = TextOverflow.Ellipsis
// 取消回覆的 X 按鈕 )
IconButton(onClick = onCancelReply, modifier = Modifier.size(24.dp)) { }
Icon( IconButton(onClick = onCancelReply, modifier = Modifier.size(24.dp)) {
imageVector = Icons.Default.Close, Icon(
contentDescription = "取消回覆", imageVector = Icons.Default.Close,
tint = Color.Gray contentDescription = "取消回覆",
) tint = Color.Gray
)
}
} }
} }
} }
}
// 下方維持你原本既有的輸入框 Row 排版 // 2. 💡 實際的輸入工具列 (確保有 padding 且元件垂直置中)
Row( Row(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(8.dp), .padding(horizontal = 8.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
// 你原本的 TextField, 選擇圖片按鈕, 送出按鈕... // 圖片選擇按鈕 (範例，可換成你的實作)
// 送出時呼叫： IconButton(onClick = { /* 觸發你的圖片選取器，回傳 URI */ }) {
// onSendClick(textState) Icon(imageVector = Icons.Default.Add, contentDescription = "選擇圖片", tint = Color.Gray)
// textState = "" }
// 輸入文字框
OutlinedTextField(
value = textState,
onValueChange = { textState = it },
modifier = Modifier
.weight(1f)
.padding(horizontal = 4.dp),
placeholder = { Text("請輸入訊息...") },
maxLines = 4, // 避免使用者打太多字時無限長高
shape = RoundedCornerShape(20.dp)
)
// 送出按鈕
IconButton(
onClick = {
if (textState.isNotBlank() && !isLoading) {
onSendClick(textState)
textState = "" // 送出後清空輸入框
}
},
enabled = textState.isNotBlank() && !isLoading
) {
if (isLoading) {
CircularProgressIndicator(modifier = Modifier.size(24.dp), strokeWidth = 2.dp)
} else {
Icon(imageVector = Icons.Default.Send, contentDescription = "送出", tint = Color(0xFFDA7029))
}
}
}
} }
} }
} }