本頁面由 Cloud Translation API 翻譯而成。

晶片

Chip 元件是精巧的互動式 UI 元素。代表聯絡人或標籤等複雜實體，通常會附上圖示和標籤。可勾選、可關閉或可點選。

以下是四種晶片類型，以及可能的使用情境：

協助：在工作期間引導使用者。通常會顯示為回應使用者輸入內容的暫時性 UI 元素。
篩選：可讓使用者從一組選項中篩選內容。可以選取或取消選取，選取時可能會顯示勾號圖示。
輸入：代表使用者提供的資訊，例如選單中的選項。其中可包含圖示和文字，並提供 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.** Google 助理方塊。

篩選器方塊

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 可組合函式，建立因使用者互動而產生的動態晶片。舉例來說，在電子郵件用戶端中，當使用者撰寫電子郵件時，輸入資訊方塊可能代表使用者已新增至「收件者：」欄位的聯絡人。

下列實作範例示範已處於選取狀態的輸入方塊。使用者按下晶片時，系統會將其關閉。

@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

實作方式如下所示。

建議方塊

SuggestionChip 可組合項是本頁列出的可組合項中最基本的項目，無論是 API 定義還是常見用途都是如此。建議方塊會顯示動態生成的提示。舉例來說，在 AI 聊天應用程式中，您可能會使用建議方塊，針對最新訊息顯示可能的回覆。

請考慮以下 SuggestionChip 實作項目：

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

實作方式如下：

升起效果方塊

本文中的所有範例都使用基本可組合項，這些可組合項採用平面外觀。如要使用外觀凸顯的資訊方塊，請使用下列三種可組合項之一：

其他資源

Material UI 文件