晶片

Chip 元件是精簡的互動式 UI 元素。這代表的是 標記或標記等實體，通常還會包含圖示和標籤。可以 可勾選、可關閉或可點選。

以下是四種類型的方塊及適用位置：

  • 輔助：引導使用者完成工作。通常顯示為暫時 UI 元素來回應使用者輸入內容。
  • 篩選器：讓使用者透過一組選項修正內容。他們可以 並選擇是否含有勾號圖示
  • 輸入內容：代表使用者提供的資訊，例如 或前往 Google 試算表選單可包含圖示和文字，並提供「X」以便移除
  • 建議：根據使用者的近期記錄提供建議 活動或輸入內容通常會顯示在輸入欄位下方，以提示使用者 動作。
，瞭解如何調查及移除這項存取權。
以上是這四個方塊元件的範例，並醒目顯示其特點。
圖 1.四個方塊元件。

API 介面

共有四種可組合元件，會對應至四種類型的方塊。 以下各節將詳細概述這些可組合項及其差異。 然而，兩者共用下列參數：

  • label：方塊上顯示的字串。
  • icon：方塊開頭顯示的圖示。部分 特定可組合函式有獨立的 leadingIcon 和 trailingIcon 參數。
  • onClick：使用者按下方塊時呼叫的 lambda。

輔助方塊

AssistChip 可組合函式可讓您輕鬆建立 輔助方塊，可引導使用者往特定方向前進。一項差異 功能是 leadingIcon 參數，可讓您在左側顯示圖示 外觀。以下範例說明如何實作：

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

實作內容如下所示。

簡易的輔助方塊。
圖 2.輔助方塊。

篩選器方塊

FilterChip 可組合函式需要您追蹤方塊是否具有 已選取以下範例說明如何顯示 使用者選取方塊時才會顯示已勾選圖示：

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

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

未選取該實作項目會如下所示：

未選取的篩選器方塊，無勾號和企劃書背景。
圖 3.未選取的篩選器方塊。

選取後，如下所示：

已選取的篩選器方塊，旁邊有勾號和彩色背景。
圖 4.選取的篩選器方塊。

輸入方塊

您可以使用 InputChip 可組合函式建立結果方塊 互動。例如，在電子郵件用戶端中，當使用者輸入 電子郵件，輸入方塊可能代表使用者輸入地址的使用者 轉換成「to:」] 欄位。

以下實作示範了 系統就會選取狀態使用者按下方塊後關閉方塊。

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

實作內容如下所示。

含有顯示圖片和結尾圖示的輸入方塊。
圖 5. 輸入方塊。

建議方塊

SuggestionChip 可組合項是所列可組合項最基本的 ，瞭解 API 定義和常見用途。建議 方塊會顯示動態產生的提示舉例來說，在 AI 即時通訊應用程式中 使用建議方塊，顯示最新可能的回覆 撰寫新的電子郵件訊息

請考慮採用以下 SuggestionChip 實作：

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

實作內容如下所示：

簡易的輔助方塊。
圖 6. 輔助方塊。
，瞭解如何調查及移除這項存取權。

進階方塊

本文件中的所有範例均使用一般的 外觀。如果你想使用具有較高外觀的方塊，請使用 以下三個可組合元件：

其他資源