文本输入不再仅仅局限于文本。使用者已经习惯了丰富且富有表现力的沟通方式，而不仅仅局限于简单的字符。无论是发送有趣的 GIF、分享贴纸。 还是从其他应用拖放图片，富文本支持都已成为使用者的默认期望。

大多数流行的即时通讯和社交媒体应用都能无缝支持这些功能。只是对于 Android 开发者支持这种“默认”行为需要特定的实现步骤。标准的文本字段无法自动处理从 Gboard 发送的 GIF 或从剪贴板粘贴的图片。

“默认”体验

如果你只是将一个 TextField 拖放到 Compose UI 中，它就能完美地处理文本。如果你尝试从键盘插入 GIF 或粘贴图片，却发现…，没有任何反应。运气好的话，键盘可能会提交一个 URI 字符串；但更常见的情况是输入会被直接忽略，因为文本字段只接受文本。

为了解决这个问题，Jetpack Compose 引入了一个强大的修饰符：contentReceiver。

方法的观点是，contentReceiver

contentReceiver 修饰符是一个统一的 API。旨在处理来自多个来源的富文本内容：

1. 软键盘来自 Gboard 等应用的 GIF 和贴纸。

2. 剪贴板粘贴的图片或富文本。老实说，

3. 拖放从其他应用或同一应用内拖拽的内容。

contentReceiver 给了我们一个单一的入口点来处理所有 TransferableContent而无需为键盘管理 OnCommitContentListener也无需为拖放监听器单独管理。

逐步实现

让我们建立一个可以接收和显示图片的文本输入区域。

步骤 ：ViewModel 逻辑

需要一种方法来处理传入的内容。话说回来，我们将创建一个 RichContentViewModel 来处理 TransferableContent。主要原因涉及使用 .consume 函数。该函数允许我们提取可以处理的内容部分，并返回其余部分。

class RichContentViewModel : ViewModel {
// State to hold our received images
var selectedImages by mutableStateOf)

@OptIn
fun handleContent(
transferableContent: TransferableContent
): TransferableContent?说起来，{
val newUris = mutableListOf 

// consume returns parts of content we didn't use.
// inside lambda,we return true if we consumed item.
val remaining = transferableContent.consume { item ->
// If item has a URI。we take it
if {
newUris += item.uri
true // Consumed
} else {
false // Not consumed,leave it for or handlers
}
} 

// Update our state with new images
selectedImages = newUris 

return remaining
}
} 

步骤 ：UI 实现

现在让我们将其应用到 UI 中。contentReceiver 的一个关键优势是灵活性。老实说，我们不必将其直接应用于 TextField。通过将其应用于父容器，可以将整个区域转换为拖放操作的“放置区”，从而调整使用感受。

@OptIn
@Composable
fun RichContentTextField(
richContentViewModel: RichContentViewModel = viewModel
) {
Column(
modifier = Modifier
.fillMaxWidth
.border

// Attach content receiver here!// This delegates handling logic to our ViewModel
.contentReceiver 

) { 

// . Display received images 

LazyRow(
modifier = Modifier.fillMaxWidth 

items { imageUri -> 

AsyncImage( 

model = imageUri,

contentDescription = null,

modifier = Modifier 

.size 

.padding 

.clip)。

contentScale = ContentScale.Crop 

) 

} 

// . The actual text input 

val count = rememberTextFieldState 

// Optional: Update text state based on images 

LaunchedEffect { 

if ) { 

count.setTextAndPlaceCursorAtEnd) 

TextField( 

state = count,

placeholder = { Text },

支持富媒体内容不再是“额外”功能，而是现代 Android 应用开发的主要组成部分。Jetpack Compose 中的 contentReceiver 修饰符极大地简化了这一过程，将原本三个独立的 API 统一到一个简洁的声明式接口中。通过实现这一点，你可以确保你的应用拥有原生应用般的体验。还能响应使用者如今的实际交互方式。

保护原创，请勿转载！< /blockquote>