Jetpack Compose TextField：巧妙替换特定标记，自定义文本输入

2024-03-20 14:29:40

使用图像替换特定标记：TextField自定义指南

在构建文本输入界面时，有时需要将特定的文本标记替换为图像，例如表情符号或图标。在Jetpack Compose中，实现这一目标需要同时使用InlineTextContent和VisualTransformation。

InlineTextContent

InlineTextContent允许在文本字段中插入图像或其他自定义内容。要将图像与特定的标记关联起来，可以使用mapOf()函数创建InlineTextContent映射表。例如：

val inlineContentMap = mapOf("ab_12" to emojiImage("https://c.tenor.com/Rd6ULrCRvlQAAAAd/tenor.gif"))

其中，"ab_12"是标记，"https://c.tenor.com/Rd6ULrCRvlQAAAAd/tenor.gif"是表情符号的图像URL。

VisualTransformation

VisualTransformation是一个接口，允许修改文本字段中的文本。要将标记替换为InlineTextContent，需要创建一个VisualTransformation实现：

object EmojiVisualTransformation: VisualTransformation {

    override fun filter(text: AnnotatedString): TransformedText {
        val originText = text.text
        val annotatedString = replaceTokens(originText)
        return TransformedText(annotatedString, EmojiOffsetMapping(originText, annotatedString.text))
    }
}

其中，replaceTokens()函数负责将标记替换为InlineTextContent，EmojiOffsetMapping类维护原始文本和转换后文本之间的偏移量映射。

集成到TextField

将InlineTextContent和VisualTransformation集成到TextField中，可以实现图像替换：

BasicTextField(
    value = inputText,
    onValueChange = {
        inputText = it
    },
    modifier = Modifier
        .fillMaxWidth()
        .border(1.dp, Color.LightGray, RoundedCornerShape(4.dp))
        .padding(8.dp),
    textStyle = TextStyle(fontSize = 16.sp).copy(color = Color.Transparent),
    visualTransformation = EmojiVisualTransformation,
    decorationBox = { innerTextField ->
        Box(
            modifier = Modifier,
            contentAlignment = Alignment.TopStart
        ) {
            val annotatedString = replaceTokens(inputText)
            Text(
                text = annotatedString,
                style = TextStyle(fontSize = 16.sp),
                inlineContent = inlineContentMap
            )
            innerTextField()
        }
    }
)