Card
元件包含與單一主題相關的內容和動作。
圖解
![](https://developer.android.com/static/wear/images/components/card-anatomy.png?authuser=5&hl=zh-tw)
資訊卡元件只有一個版位。資訊卡可以使用圖示、圖片或標籤,並可以自訂內容。
資訊卡預設為圓角矩形,並有漸層背景。將資訊卡高度上限設為 60%,確保資訊卡能完整顯示在畫面上,因為圓形螢幕最多可覆蓋 20% 的螢幕頂端與底部。
相關元件
![](https://developer.android.com/static/wear/images/components/card-app.png?authuser=5&hl=zh-tw)
![](https://developer.android.com/static/wear/images/components/card-title.png?authuser=5&hl=zh-tw)
標題資訊卡
您可以使用 標題資訊卡在應用程式中顯示資訊,例如以訊息形式顯示。標題資訊卡有三個版位版面配置,分別代表標題、選用時間欄位以及相關內容,可使用圖片或文字。
應用程式資訊卡
請用應用程式資訊卡顯示來自多個應用程式的互動元素。應用程式資訊卡有五個版位版面配置,分別為應用程式圖示、應用程式名稱、活動發生時間、某類資訊方塊及相關內容,可使用圖片或文字。
設計建議
![](https://developer.android.com/static/wear/images/components/card-image.png?authuser=5&hl=zh-tw)
圖片資訊卡
圖片資訊卡會顯示和相關主題有關的內容,並有背景圖片。圖片資訊卡也可以顯示獨立的圖片。
TitleCard(
onClick = { ... },
title = { Text("Workout") },
backgroundPainter = CardDefaults.imageWithScrimBackgroundPainter(
backgroundImagePainter = painterResource(id = R.drawable.backgroundimage)
),
contentColor = MaterialTheme.colors.onSurface,
titleColor = MaterialTheme.colors.onSurface
) {
Text("12 songs · 1 Hour 32 mins")
}
大小
![](https://developer.android.com/static/wear/images/components/card-size.png?authuser=5&hl=zh-tw)
資訊卡寬度
資訊卡預設使用容器寬度上限。
資訊卡高度
您可以自由調整資訊卡的高度。可按照元件內容決定此設定。
在圓形錶面上,系統會剪裁高於螢幕 60% 高度的資訊卡。