Jetpack Compose 条状标签

Chip 组件是一个紧凑的互动式界面元素。它表示复杂的实体，如联系人或标签，通常带有图标和标签。该消息可以是勾选、可关闭或可点击

辅助条状标签

AssistChip(
  onClick = { Log.d("Assist chip", "hello world") },
  label = { Text("Assist chip") },
  leadingIcon = {
      Icon(
          Icons.Filled.Settings,
          contentDescription = "Localized description",
          Modifier.size(AssistChipDefaults.IconSize)
      )
  }
)

过滤条件块

val selected = remember {
    mutableStateOf(false)
}

FilterChip(
    modifier = Modifier.padding(start = 16.dp),
    onClick = { selected.value = !selected.value },
    label = {
        Text("Filter chip")
    },
    selected = selected.value,
    leadingIcon = if (selected.value) {
        {
            Icon(
                imageVector = Icons.Filled.Done,
                contentDescription = "Done icon",
                modifier = Modifier.size(FilterChipDefaults.IconSize)
            )
        }
    } else {
        null
    }
)

输入条状标签

您可以使用 [InputChip] 可组合项创建因用户互动产生的条状标签。例如，在电子邮件客户端中，当用户撰写电子邮件时，输入条状标签可能表示用户在“收件人”字段中输入的地址。

以下实现演示了已处于选定状态的输入条状标签。用户在按下条状标签后将其关闭。

val enabled = remember {
    mutableStateOf(true)
}

InputChip(
    modifier = Modifier.padding(start = 16.dp),
    onClick = {
        enabled.value = !enabled.value
    },
    label = { Text("text") },
    selected = enabled.value,
    avatar = {
        Icon(
            Icons.Filled.Person,
            contentDescription = "Localized description",
            Modifier.size(InputChipDefaults.AvatarSize)
        )
    },
    trailingIcon = {
        Icon(
            Icons.Default.Close,
            contentDescription = "Localized description",
            Modifier.size(InputChipDefaults.AvatarSize)
        )
    },
)

建议条状标签

就 API 定义和常见用例而言，[SuggestionChip] 可组合项是本页列出的最基本的可组合项。建议条状标签用于呈现动态生成的提示。例如，在 AI 聊天应用中，您可以使用建议内容信息卡来提供对最新消息的可能回复。

SuggestionChip(
    onClick = { Log.d("Suggestion chip", "hello world") },
    label = { Text("Suggestion chip") }
)

上一篇 Jetpack Compose 组件 - Card

下一篇 Jetpack Compose FlowRow