Card
可組合函式可做為使用者介面的 Material Design 容器。資訊卡通常會呈現一項連貫的內容。以下列舉幾個可使用資訊卡的範例:
- 購物應用程式中的產品。
- 新聞應用程式中的新聞報導。
- 通訊應用程式中的訊息。
這著重於呈現單一內容,以便區分 Card
和其他容器。例如,Scaffold
可提供整個螢幕的一般結構。資訊卡通常是大型版面配置中的小型 UI 元素,而 Column
或 Row
等版面配置元件則提供較簡單且通用的 API。
基本導入
Card
的運作方式與 Compose 中的其他容器類似。您可以藉由呼叫其中的其他可組合項來宣告內容。舉例來說,在以下的最低範例中,請考慮 Card
包含對 Text
的呼叫:
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
進階導入
如要瞭解 Card
的 API 定義,請參閱參考資料。並定義多個參數,可讓您自訂元件的外觀和行為。
以下列舉幾個需要注意的重要參數:
elevation
:為元件加上陰影,使該元件顯示在背景上方。colors
:使用CardColors
類型設定容器和任何子項的預設顏色。enabled
:如果您針對這個參數傳遞false
,資訊卡會顯示為已停用,且不會回應使用者輸入內容。onClick
:一般來說,Card
不接受點擊事件。因此,您需要注意的主要超載是定義onClick
參數。如果想讓Card
實作回應使用者按下的按鈕,應使用這個超載。
以下示範如何使用這些參數和其他常見參數 (例如 shape
和 modifier
)。
實心資訊卡
以下範例說明如何實作已填寫的資訊卡。
這裡的重點是使用 colors
屬性變更填滿顏色。
@Composable fun FilledCardExample() { Card( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surfaceVariant, ), modifier = Modifier .size(width = 240.dp, height = 100.dp) ) { Text( text = "Filled", modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } }
實作內容如下所示:
升降卡
下列程式碼片段說明如何實作進階卡片。使用專屬的 ElevatedCard
可組合項。
您可以使用 elevation
屬性控制高度和產生的陰影。
@Composable fun ElevatedCardExample() { ElevatedCard( elevation = CardDefaults.cardElevation( defaultElevation = 6.dp ), modifier = Modifier .size(width = 240.dp, height = 100.dp) ) { Text( text = "Elevated", modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } }
實作內容如下所示:
外框資訊卡
以下是外框資訊卡的範例。使用專屬的 OutlinedCard
可組合項。
@Composable fun OutlinedCardExample() { OutlinedCard( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surface, ), border = BorderStroke(1.dp, Color.Black), modifier = Modifier .size(width = 240.dp, height = 100.dp) ) { Text( text = "Outlined", modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } }
實作內容如下所示:
限制
資訊卡不提供固有的捲動或關閉動作,但可以整合至提供這些功能的可組合項。舉例來說,若要在資訊卡上實作滑動關閉,將其與 SwipeToDismiss
可組合項整合。如要與捲動整合,請使用捲動修飾符,例如 verticalScroll
。詳情請參閱捲動說明文件。