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

晶片

Chip 元件是精簡的互動式 UI 元素。代表聯絡人或標記等複雜的實體，通常帶有圖示和標籤。包括可勾選、可關閉或可點擊。

四種方塊類型和適用位置如下：

輔助：在工作期間引導使用者。通常是做為臨時 UI 元素，用於回應使用者輸入內容。
篩選器：可讓使用者從一組選項調整內容。這些元件可選取或取消選取，選取時可能包含勾號圖示。
「Input」：代表使用者提供的資訊，例如選單中的選項。這類訊息可以包含圖示和文字，並提供「X」移除。
建議：根據使用者最近的活動或輸入內容，提供建議。通常顯示在輸入欄位下方，用於提示使用者動作。

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

此實作方式如下所示。

篩選器方塊

使用 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.**已取消選取的篩選器方塊。

選取後會如下所示：

輸入方塊

您可以使用 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

此實作方式如下所示。

建議方塊

SuggestionChip 可組合項是本頁列出的可組合項最基本，包括 API 定義和常見用途。建議方塊會顯示動態產生的提示。舉例來說，在 AI 即時通訊應用程式中，您可以使用建議方塊，向最新訊息顯示可能的回應。

請考慮此 SuggestionChip 實作：

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

此實作方式如下：

升級晶片

本文件中的所有範例均使用以平坦外觀的基本可組合項。如果想讓方塊外觀提高，請使用以下三個可組合項之一：

其他資源

Material UI 文件