資訊卡

Card 元件包含與單一主題相關的內容和動作。

圖解

資訊卡元件只有一個版位。資訊卡可以使用圖示、圖片或標籤，並可以自訂內容。

資訊卡預設為圓角矩形，並有漸層背景。將資訊卡高度上限設為 60%，確保資訊卡能完整顯示在畫面上，因為圓形螢幕最多可覆蓋 20% 的螢幕頂端與底部。

標題資訊卡

您可以使用 標題資訊卡在應用程式中顯示資訊，例如以訊息形式顯示。標題資訊卡有三個版位版面配置，分別代表標題、選用時間欄位以及相關內容，可使用圖片或文字。

應用程式資訊卡

請用應用程式資訊卡顯示來自多個應用程式的互動元素。應用程式資訊卡有五個版位版面配置，分別為應用程式圖示、應用程式名稱、活動發生時間、某類資訊方塊及相關內容，可使用圖片或文字。

設計建議

圖片資訊卡

圖片資訊卡會顯示和相關主題有關的內容，並有背景圖片。圖片資訊卡也可以顯示獨立的圖片。

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")
}

大小

資訊卡寬度

資訊卡預設使用容器寬度上限。

資訊卡高度

您可以自由調整資訊卡的高度。可按照元件內容決定此設定。

在圓形錶面上，系統會剪裁高於螢幕 60% 高度的資訊卡。