Chip
元件是密集的互動式 UI 元素。它代表聯絡人或標記等複雜實體,通常會搭配圖示和標籤。可供勾選、關閉或點選。
以下是五種方塊類型和可能的使用位置:
- 協助:在使用者執行工作時提供指引。通常會以暫時性 UI 元素的形式顯示,以回應使用者輸入內容。
- 篩選器:讓使用者從一組選項中精選內容。這些項目可供選取或取消選取,選取後可能會顯示勾號圖示。
- 輸入:代表使用者提供的資訊,例如選單中的選項。可包含圖示和文字,並提供「X」以便移除。
- 建議:根據使用者最近的活動或輸入內容,為使用者提供建議。通常會顯示在輸入欄位下方,用來提示使用者採取行動。
- 浮動:具有浮動外觀,而非平面外觀。
版本相容性
這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。
依附元件
建立輔助方塊
AssistChip
可組合項提供簡單的方法,可讓您建立輔助方塊,將使用者推向特定方向。其中一個獨特功能是 leadingIcon
參數,可讓您在方塊的左側顯示圖示,如圖 1 所示。以下範例說明如何實作:
![簡單的輔助方塊。](https://developer.android.com/static/develop/ui/compose/images/components/chip-assist.png?hl=zh-tw)
建立篩選器方塊
FilterChip
可組合項需要追蹤晶片是否已選取。以下範例說明如何只在使用者選取方塊時顯示前置勾選圖示:
結果
![未選取的篩選器方塊,沒有勾號,且背景為計畫。](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter.png?hl=zh-tw)
![已選取的篩選器方塊,帶有勾號和彩色背景。](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter-active.png?hl=zh-tw)
建立輸入方塊
您可以使用 InputChip
可組合函式,建立使用者互動後產生的方塊。舉例來說,在電子郵件用戶端中,當使用者撰寫電子郵件時,輸入方塊可能會代表使用者在「to:」欄位中輸入地址的對象。
以下實作項目示範處於選取狀態的輸入方塊。使用者按下方塊時,系統會將其關閉。
結果
![含有顯示圖片和結尾圖示的輸入方塊。](https://developer.android.com/static/develop/ui/compose/images/components/chip-input.png?hl=zh-tw)
建立建議方塊
SuggestionChip
可組合項是本頁所列可組合項中最基本,無論是 API 定義或常見用途皆是如此。建議方塊會顯示動態產生的提示。舉例來說,在 AI 聊天應用程式中,您可以使用建議方塊,針對最新訊息顯示可能的回覆。
請考慮以下 SuggestionChip
實作項目:
結果
![簡單的輔助方塊。](https://developer.android.com/static/develop/ui/compose/images/components/chip-suggestion.png?hl=zh-tw)
建立升高方塊
本文件中的所有範例都使用採用平面外觀的基本可組合項。如果您想要顯示外觀較高的方塊,請使用下列三個可組合項之一:
重點
四個可組合函式對應到四種方塊類型,並共用下列參數:
label
:顯示在方塊上的字串。icon
:在方塊開頭顯示的圖示。部分可組合項具有獨立的leadingIcon
和trailingIcon
參數。onClick
:使用者點選時,方塊會呼叫的 lambda。
包含此指南的集合
本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=zh-tw)
顯示互動式元件
瞭解可組合函式如何讓您輕鬆根據 Material Design 設計系統,建立美觀的 UI 元件。
有問題或意見回饋嗎?
請前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。