卡片

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,
        )
    }
}
Card.kt

此實作方式如下：

升級卡片

下列程式碼片段示範如何實作進階資訊卡。請使用專屬的 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,
        )
    }
}
Card.kt

此實作方式如下：

描繪外框的資訊卡

以下是概略資訊卡範例。使用專屬的 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,
        )
    }
}
Card.kt

此實作方式如下：

限制

資訊卡未隨附捲動或關閉動作，但可以整合至提供這些功能的可組合項。舉例來說，如要實作資訊卡上的滑動關閉功能，請將其與 SwipeToDismiss 可組合項整合。如要整合捲動功能，請使用捲動修飾符，例如 verticalScroll。詳情請參閱 Scroll 說明文件。

其他資源

• Material UI 文件