Chip
元件是代表輸入、屬性或動作的互動式密集元素。
圖解
![](https://developer.android.com/static/wear/images/components/chips-anatomy.png?authuser=4&hl=zh-tw)
A. 主要標籤
B. 次要標籤 (選填)
C. 圖示 (選擇性)
D. 容器
設計建議
![](https://developer.android.com/static/wear/images/components/chips-image.png?authuser=4&hl=zh-tw)
圖片方塊包含與所選圖片相關的動作。圖片方塊非常適合用來傳達更具體的外觀和風格。
Chip(
...
label = {
Text(
text = "Summer Mix",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
colors = ChipDefaults.imageBackgroundChipColors(
backgroundImagePainter = painterResource(id = R.drawable.clouds)
)
)
![](https://developer.android.com/static/wear/images/components/chip-avatar.png?authuser=4&hl=zh-tw)
使用與已選擇圖片方塊相關的動作的圖片顯示方塊。顯示圖片方塊也可以加入圖示,讓顯示圖片更容易辨識,例如聯絡人 ID 相片。顯示圖片的圖示尺寸為 32x32dp。
Chip(
...
label = {
Text(text = "Mark Castle")
},
icon = {
Icon(
painter = painterResource(id = R.drawable.avatar),
contentDescription = null,
modifier = Modifier.size(ChipDefaults.LargeIconSize)
.wrapContentSize(align = Alignment.Center)
)
}
)
相關元件
![](https://developer.android.com/static/wear/images/components/chip-compact.png?authuser=4&hl=zh-tw)
相關元件 ComactChip 是方塊元件的變化版本,其外觀較小,且專為空間較少的用途設計。密集方塊有提供給圖示的版位,以及提供給單行文字標籤的版位。密集方塊的高度為 48dp 的可輕觸區域。
階層
![](https://developer.android.com/static/wear/images/components/chip-hierarchy.png?authuser=4&hl=zh-tw)
使用不同的填滿色彩表示方塊階層。請將各個畫面設計成包含主要動作的單一醒目方塊。
高強調請針對頁面主要動作使用高強調方塊。您可以使用 Primary 顏色做為高強調方塊的填滿色彩。
中強調
如果是比主要動作更不重要的動作,請使用中強調方塊。您可以使用 Secondary 顏色做為中強調方塊的填滿色彩。
或者,您也可以使用自訂 OutlinedChip 元件。這個標有外框的方塊含有透明背景、不透明度 60% 的 Primary Variant 色彩筆劃,以及 Primary 顏色的內容。
低強調
低強調方塊採用透明的填滿色彩,且只有文字標籤。如要表示與主要或次要方塊之間的子項關係,請使用低強調方塊。
大小
![](https://developer.android.com/static/wear/images/components/chip-size1.png?authuser=4&hl=zh-tw)
預設方塊
圖示:24dp
高度:52dp
![](https://developer.android.com/static/wear/images/components/chip-size2.png?authuser=4&hl=zh-tw)
密集方塊
圖示:20dp
高度:32dp
可輕觸區域:48dp
使用方式
查看方塊使用範例,例如「設定」中的標準晶片,以及運動應用程式中的圖片方塊。