如何在Jetpack Compose中实现带删除功能的多标签添加

要实现类似StackOverflow的标签添加/删除功能，核心思路是将标签与输入框分离处理：标签作为独立的可交互组件展示，输入框负责新增标签，无需把标签混在BasicTextField里。以下是具体实现方案：

核心实现步骤 #

1. 管理标签数据 #

使用MutableStateList存储标签列表，它能自动触发Compose重组，适配增删操作：

val tags = remember { mutableStateListOf<String>() }

2. 实现可删除标签组件 #

单独封装一个标签组件，包含标签文本和删除按钮，点击删除按钮时移除对应标签：

@Composable
fun TagItem(tag: String, onDelete: () -> Unit) {
    Surface(
        modifier = Modifier.padding(end = 8.dp, bottom = 8.dp),
        shape = RoundedCornerShape(16.dp),
        color = Color.LightGray.copy(alpha = 0.3f)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(horizontal = 12.dp, vertical = 6.dp)
        ) {
            Text(text = tag, fontSize = 14.sp)
            IconButton(onClick = onDelete, modifier = Modifier.size(16.dp)) {
                Icon(Icons.Default.Close, contentDescription = "删除标签", tint = Color.DarkGray)
            }
        }
    }
}

3. 整体标签输入布局 #

用FlowRow（需依赖Material3）实现标签自动换行，搭配输入框完成新增标签逻辑：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TagInputField(
    modifier: Modifier = Modifier,
    hint: String = "添加标签，按回车或逗号确认"
) {
    val tags = remember { mutableStateListOf<String>() }
    val inputText = remember { mutableStateOf("") }

    FlowRow(
        modifier = modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.Start
    ) {
        // 渲染所有标签
        tags.forEach { tag ->
            TagItem(tag = tag) {
                tags.remove(tag)
            }
        }

        // 新增标签的输入框
        BasicTextField(
            value = inputText.value,
            onValueChange = { inputText.value = it },
            textStyle = TextStyle(fontSize = 14.sp),
            modifier = Modifier
                .widthIn(min = 100.dp)
                .padding(bottom = 8.dp),
            decorationBox = { innerTextField ->
                if (inputText.value.isEmpty()) {
                    Text(text = hint, fontSize = 14.sp, color = Color.Gray)
                }
                innerTextField()
            },
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
            keyboardActions = KeyboardActions(
                onDone = {
                    val newTag = inputText.value.trim()
                    if (newTag.isNotEmpty() && !tags.contains(newTag)) {
                        tags.add(newTag)
                        inputText.value = ""
                    }
                }
            ),
            onKeyEvent = { event ->
                // 监听逗号按键，也触发标签添加
                if (event.key == Key.Comma && event.type == KeyEventType.KeyUp) {
                    val newTag = inputText.value.trim()
                    if (newTag.isNotEmpty() && !tags.contains(newTag)) {
                        tags.add(newTag)
                        inputText.value = ""
                    }
                    return@onKeyEvent true
                }
                false
            }
        )
    }
}

4. 预览效果 #

@Preview
@Composable
fun TagInputPreview() {
    TagInputField()
}

关键说明 #

• 组件分工：标签用TagItem组件单独实现，删除操作直接绑定IconButton，无需纠结BasicTextField的复杂自定义；输入框仅负责接收新标签文本，按回车或逗号触发添加。
• 样式适配：可以根据需求调整Surface的背景色、圆角，以及标签文本的样式，贴近StackOverflow的视觉效果。
• 输入校验：代码中做了空值和重复标签的校验，避免无效标签添加。

内容的提问来源于stack exchange，提问作者AndroidRocket