Chip
元件是精簡的互動式 UI 元素。它代表聯絡人或標記等複雜實體,通常會搭配圖示和標籤。可供勾選、關閉或點選。
四種類型的方塊及其可能的使用位置如下:
- 協助:在使用者執行工作時提供指引。通常會以暫時性 UI 元素的形式顯示,以回應使用者輸入內容。
- 篩選器:可讓使用者從一組選項中精選內容。使用者可以選取或取消選取,如果選取此選項,畫面上還會顯示勾號圖示。
- 輸入內容:代表使用者提供的資訊,例如選單中的選項。可包含圖示和文字,並提供「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) ) } ) }
此實作方式如下所示。
篩選器方塊
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 }, ) }
未選取時,此實作方式會顯示如下:
選取後會顯示如下:
輸入方塊
您可以使用 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) ) }, ) }
此實作方式如下所示。
建議方塊
SuggestionChip
可組合項是本頁所列可組合項中最基本,無論是 API 定義或常見用途皆是如此。建議方塊會顯示動態產生的提示。舉例來說,在 AI 聊天應用程式中,您可以使用建議方塊,針對最新訊息顯示可能的回覆。
請考慮採用以下 SuggestionChip
實作:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
實作內容如下所示:
進階方塊
本文件中的所有範例都使用採用平面外觀的基本可組合項。如果想設計具有較高外觀的方塊,請從下列三個可組合元件中擇一使用: