当前位置：首页 > news >正文

Compose笔记(五十四)--Card

news 2025/10/27 11:39:49

这一节主要了解一下Compose中的Card，在Jetpack Compose开发中，它是Material3提供的卡片组件，用于展示相关联的内容，具有内置的阴影、圆角和边框效果，适合用于信息分组、列表项或独立内容块。它能通过视觉层次突出内容，提升界面的立体感和可读性。简单总结:

API
modifier：布局修饰符（控制大小、边距等）
shape：卡片形状
colors：卡片颜色配置设置背景色、内容色等）
elevation：卡片阴影高度
border：卡片边框
content：卡片内部内容

场景:
1 信息展示卡片,用于展示结构化信息。
2 列表项/网格项,在LazyColumn或LazyVerticalGrid中作为列表项使用，使每个条目具有独立的视觉容器。
3 可交互选项卡,作为可点击/选择的选项载体，通过状态变化反馈用户操作。

栗子:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp@Composable
fun CardDemo01() {var isSelected by remember { mutableStateOf(false) }Card(modifier = Modifier.fillMaxWidth().padding(16.dp),shape = MaterialTheme.shapes.small, colors = CardDefaults.cardColors(containerColor = if (isSelected) {MaterialTheme.colorScheme.primaryContainer } else {MaterialTheme.colorScheme.surface }),elevation = if (isSelected) {CardDefaults.cardElevation(defaultElevation = 12.dp) } else {CardDefaults.cardElevation(defaultElevation = 4.dp)},onClick = { isSelected = !isSelected } ) {Column(modifier = Modifier.fillMaxWidth().padding(20.dp),horizontalAlignment = Alignment.CenterHorizontally,verticalArrangement = Arrangement.spacedBy(12.dp)) {if (isSelected) {Icon(imageVector = Icons.Default.Check,contentDescription = "已选中",tint = MaterialTheme.colorScheme.primary,modifier = Modifier.size(24.dp))}Text(text = if (isSelected) "已选择该选项" else "点击选择该选项",style = MaterialTheme.typography.titleMedium)Text(text = "这是一个可交互的卡片，点击切换选中状态",style = MaterialTheme.typography.bodySmall,color = MaterialTheme.colorScheme.onSurfaceVariant)}}
}

combinedClickable

import android.widget.Toast
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CardDemo02() {var clickInfo by remember { mutableStateOf("点击卡片触发事件") }var isLiked by remember { mutableStateOf(false) } val context = LocalContext.currentCard(modifier = Modifier.fillMaxWidth().padding(16.dp)//复合点击事件修饰符.combinedClickable(onClick = {clickInfo = "单击：查看卡片详情"Toast.makeText(context,clickInfo,Toast.LENGTH_SHORT).show()},onLongClick = {clickInfo = "长按：弹出操作菜单"Toast.makeText(context,clickInfo,Toast.LENGTH_SHORT).show()},onDoubleClick = {isLiked = !isLikedclickInfo = if (isLiked) "双击：已点赞 ❤️" else "双击：取消点赞"Toast.makeText(context,clickInfo,Toast.LENGTH_SHORT).show()}),elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)) {Column(modifier = Modifier.fillMaxWidth().padding(20.dp),horizontalAlignment = Alignment.CenterHorizontally,verticalArrangement = Arrangement.spacedBy(16.dp)) {Text(text = "复合点击卡片",style = MaterialTheme.typography.headlineSmall)Icon(imageVector = Icons.Default.Favorite,contentDescription = "点赞",tint = if (isLiked) Color.Red else Color.Gray,modifier = Modifier.size(48.dp))Text(text = clickInfo,style = MaterialTheme.typography.bodyMedium,color = MaterialTheme.colorScheme.onSurfaceVariant,textAlign = TextAlign.Center)}}}

注意:
1 修饰符顺序,combinedClickable需放在modifier链的靠前位置,确保点击区域正确。
2 Card默认可能占据过多空间,可使用Modifier.widthIn(max = ...)防止卡片过宽。

查看全文

http://www.dtcms.com/a/533218.html