android compose Card 卡片使用

以下是一些需要注意的关键参数：

elevation：为组件添加阴影，使其看起来高于背景。
colors ：使用 CardColors 类型设置容器和所有子项的默认颜色。
enabled ：如果您为此参数传递 false，则卡片会显示为已停用，并且不会响应用户输入。
onClick ：通常情况下，Card 不接受点击事件。因此，您需要注意的主要重载是定义了 onClick 参数的重载。如果您希望 Card 的实现响应用户的按压操作，则应使用此重载。

复制代码

package com.wn.androidcomposedemo1.basegoogle

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CardElevation
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/6/22 21:03
 * Description : 卡片
 */
class CardActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CardExample()
        }
    }

    @Preview
    @Composable
    fun CardExample(){
        Column(
            modifier = Modifier.padding(start = 20.dp, top = 20.dp)
        ) {
            FilledCardExample()
            Spacer(modifier = Modifier.height(20.dp))
            ElevatedCardExample()
            Spacer(modifier = Modifier.height(20.dp))
            OutlinedCardExample()
        }
    }

    @Preview
    @Composable
    fun OutlinedCardExample(){
        OutlinedCard(
            border = BorderStroke(3.dp, Color.Black),
            colors = CardDefaults.cardColors(
                containerColor = Color.Blue
            ),
            modifier = Modifier.size(width = 240.dp, height = 100.dp)
        ) {
            Text(
                text = "Outlined - 轮廓卡片",
                modifier = Modifier.padding(16.dp),
                textAlign = TextAlign.Center
            )
        }
    }

    @Preview
    @Composable
    fun ElevatedCardExample(){
        ElevatedCard (
            elevation = CardDefaults.cardElevation(
                defaultElevation = 36.dp
            ),
            colors = CardDefaults.cardColors(
                containerColor = Color.Green
            ),
            modifier = Modifier.size(width = 240.dp, height = 100.dp)
        ) {
            Text(
                text = "Filled - 上层卡片",
                modifier = Modifier.padding(16.dp),
                textAlign = TextAlign.Center
            )
        }
    }

    @Preview
    @Composable
    fun FilledCardExample(){
        Card(
            colors = CardDefaults.cardColors(
                //containerColor = MaterialTheme.colorScheme.surfaceVariant
                containerColor = Color.Red
            ),
            modifier = Modifier.size(width = 240.dp, height = 100.dp)
        ) {
            Text(
                text = "Filled - 填充卡片",
                modifier = Modifier.padding(16.dp),
                textAlign = TextAlign.Center
            )
        }
    }
}

android compose Card 卡片 使用

android compose Card 卡片使用