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