Jetpack Compose 组件 - Card

543 阅读1分钟

[Card] 可组合项充当界面的 Material Design 容器。卡片通常只会呈现一段连贯的内容

基本实现方法

Card 的行为与 Compose 中其他容器非常相似。您可以通过调用其中的其他可组合项来声明其内容。例如,在下面的极简示例中,假设 Card 包含对 Text 的调用:

image.png

Card(modifier = Modifier
    .padding(16.dp)) {
    Text(text = "Hello, world!",modifier = Modifier
        .padding(16.dp),
        textAlign = TextAlign.Center)
}

高级实现方法

如需了解 Card 的 API 定义。其中定义了多个参数,这些参数可用于自定义组件的外观和行为。

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

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

填充卡片

以下示例说明了如何实现已填充的卡片。

关键在于使用 colors 属性更改填充颜色。

image.png

上层卡片

image.png

ElevatedCard(
    elevation = CardDefaults.cardElevation(
        defaultElevation = 6.dp
    ),
    modifier = Modifier
        .size(width = 240.dp, height = 100.dp).padding(16.dp)
) {
    Text(
        text = "Elevated",
        modifier = Modifier
            .padding(16.dp),
        textAlign = TextAlign.Center,
    )
}

轮廓卡片

image.png

上一篇 Jetpack Compose 组件 - Button

下一篇 Jetpack Compose 条状标签