android compose Card 卡片 使用

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 : maoning20080808163.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 ) } } }