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, ) } }
實作內容如下所示:
![資訊卡中填入了 Material 主題的表面變化版本顏色。](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-filled.png?authuser=19&hl=zh-tw)
升降卡
下列程式碼片段說明如何實作進階卡片。使用
專屬的 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, ) } }
實作內容如下所示:
![資訊卡位於應用程式背景上方,並加上陰影。](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-elevated.png?authuser=19&hl=zh-tw)
外框資訊卡
以下是外框資訊卡的範例。使用
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, ) } }
實作內容如下所示:
![卡片具有黑色細邊框。](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-outlined.png?authuser=19&hl=zh-tw)
限制
資訊卡不支援固有的捲動或關閉動作,但可以整合至
提供這些功能的可組合函式例如,實作滑動關閉
將其與 SwipeToDismiss
可組合函式整合。為了整合
捲動輔助鍵,例如 verticalScroll
。請參閱捲動
說明文件。