Jetpack Compose 1.7中的新修饰符receiveContent

在 Jetpack Compose 1.7.0 中提供了一个新的修饰符，Modifier.receiveContent，通过该修饰符可以支持在输入框中输入输入法软键盘中自带的图片表情等，非常方便。

示例代码如下：

class MyActivity: ComponentActivity() {  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeApplicationTheme {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    var text by remember { mutableStateOf("") }
                    var imageUri by remember { mutableStateOf(Uri.EMPTY) }
                    AsyncImage(
                        model = imageUri,
                        contentDescription = null,
                        modifier = Modifier.height(150.dp),
                        contentScale = ContentScale.FillHeight
                    )
                    BasicTextField2(
                        value = text,
                        onValueChange = { text = it },
                        textStyle = TextStyle(fontSize = 14.sp),
                        modifier = Modifier
                            .padding(horizontal = 16.dp)
                            .fillMaxWidth()
                            .clip(RoundedCornerShape(5.dp))
                            .padding(16.dp)
                            .receiveContent(MediaType.All) { content ->
                                if (content.hasMediaType(MediaType.Image)) {
                                    val clipData = content.clipEntry.clipData
                                    for (index in 0 until clipData.itemCount) {
                                        val item = clipData.getItemAt(index) ?: continue
                                        imageUri = item.uri ?: continue
                                    }
                                }
                                content
                            }
                    )
                }
            }
        }
    }
}

注意 receiveContent 必须与 BasicTextField2 集成，以接受由软件键盘或通过剪贴板粘贴操作提供的富媒体内容。

BasicTextField2是官方正在优化的实验性版本，它修复了许多BasicTextField中存在的bug，并且支持许多新特性，在未来我们应该尽量选择使用 BasicTextField2来进行开发。如果想了解更多关于 BasicTextField2的新特性，可以看这里。

效果如下：

receiveContent 不仅可以接受软键盘中输入的图片，同时它也可以接受你从其他地方复制到剪贴板中的图片内容，可以粘贴到输入框中输入。

注意示例代码中使用了图片加载库 coil 加载gif图片，需要添加依赖：

implementation("androidx.compose.ui:ui:1.7.0-alpha01") 

implementation("io.coil-kt:coil-compose:2.5.0") 
implementation("io.coil-kt:coil-gif:2.5.0") 

要使用 coil 加载gif，还需要在 Application 中进行一下全局的配置，参考代码如下：

class MyApp: Application(), ImageLoaderFactory { 
    override fun newImageLoader(): ImageLoader {
        return ImageLoader(this)
            .newBuilder()
            .components {
                if(Build.VERSION.SDK_INT >= 28) { 
                    add(ImageDecoderDecoder.Factory()) 
                } else {
                    add(GifDecoder.Factory()) 
                }
            }
            .build() 
    }
}