卡片

Card 可組合函式可做為使用者介面的 Material Design 容器。 資訊卡通常會呈現一項連貫的內容。以下是 以下列舉幾個可使用資訊卡的範例：

• 購物應用程式中的產品。
• 新聞應用程式中的新聞報導。
• 通訊應用程式中的訊息。

這類格式著重於呈現單一內容， 其他容器的 Card。例如，Scaffold 可提供一般結構 播放到整個螢幕資訊卡通常是較大尺寸的 UI 元素 版面配置元件 (例如 Column 或 Row) 則提供較精簡的內容 以及一般 API

圖 1. 填入文字和圖示的資訊卡範例。

基本導入

Card 的運作方式與 Compose 中的其他容器類似。您可以藉由宣告內容 呼叫其中的其他可組合函式舉例來說，假設 Card 包含 呼叫 Text。

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

注意： 根據預設，Card 會將內容納入 Column 可組合函式中， 卡片中的各個項目。

進階導入

如要瞭解 Card 的 API 定義，請參閱參考資料。它定義了多個 參數，以便您自訂 元件。

以下列舉幾個需要注意的重要參數：

• elevation：為元件加上陰影 顯示在背景上方的高度
• colors：使用 CardColors 類型設定兩者的預設顏色 容器和任何子項
• enabled：如果您針對這個參數傳遞 false，資訊卡就會顯示為 並且不回應使用者輸入的內容。
• onClick：一般來說，Card 不接受點擊事件。因此 有關主要超載的情況是 onClick 參數。如果您要 實作 Card，回應使用者的按下動作。

下例示範這些參數的使用方式 做為其他常見參數，例如 shape 和 modifier。

Beta 版： 定義 onClick 參數的 Card 超載目前仍為實驗功能。

實心資訊卡

以下範例說明如何實作已填寫的資訊卡。

這裡的鍵是使用 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

實作內容如下所示：

圖 2. 已填滿的資訊卡範例。

升降卡

下列程式碼片段說明如何實作進階卡片。使用 專屬的 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

實作內容如下所示：

圖 3. 升高的卡片範例。

外框資訊卡

以下是外框資訊卡的範例。使用 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

實作內容如下所示：

圖 4. 標有外框的卡片範例。

限制

資訊卡不支援固有的捲動或關閉動作，但可以整合至 提供這些功能的可組合函式例如，實作滑動關閉 將其與 SwipeToDismiss 可組合函式整合。為了整合 捲動輔助鍵，例如 verticalScroll。請參閱捲動 說明文件。

其他資源

• Material Design 使用者介面說明文件