Как добавить несколько тегов в Jetpack Compose

Я хочу добиться того же, что и добавление тегов в вопросе stackOverFlow, где мы выбираем теги для вопроса, как это сделать в компоновке реактивного ранца. вот так, где при нажатии на значок «x» тег должен быть удален

Я начал с этого пути, но запутался, с чего начать и как добиться, думая о добавлении кнопки со значком. может ли кто-нибудь помочь мне, как этого достичь

моя попытка, но после предварительного просмотра я запутался, должен ли я использовать кнопку со значком или основным текстовым полем...

@Composable
fun MultipleTextFieldWithDeleteIcon(
  text: String,
  hint: String,
  modifier: Modifier = Modifier,
  isHintVisible: Boolean = true,
  onValueChange: (String) -> Unit,
  textStyle: TextStyle = TextStyle()
) {
  Box(
    modifier = modifier
  ) {
    BasicTextField(
        value = text,
        onValueChange = onValueChange,
        textStyle = textStyle,
        modifier = Modifier
            .align(Alignment.Center)
            .height(100.dp)
            .width(300.dp)

    )
    if (isHintVisible) {
        Text(text = hint, style = textStyle, color = Color.DarkGray)
    }
  }
}

@Preview
@Composable
 fun AboveTextFieldWithIconPreview() {
 MultipleTextFieldWithDeleteIcon(text = "android, androidJetpackCompose, jetpack",
    hint = "",
    onValueChange  = {}
   )
 }
2
0
110
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать M3 InputChip.

Что-то вроде:

var selected by remember { mutableStateOf(false) }
InputChip(
    selected = selected,
    onClick = { selected = !selected },
    label = { Text("Input Chip") },
    trailingIcon = {
        Icon(
            Icons.Filled.Close,
            contentDescription = "Localized description",
            modifier = Modifier
                .size(InputChipDefaults.IconSize)
                .clickable {  }

        )
    }
)

Другие вопросы по теме