android - Jetpack compose ui：如何创建卡片视图？

Question

我想使用 jetpack compose 创建 Cardview，但我找不到任何示例。

Answer 1

你可以使用1.0.0类似的东西：

Card(
    shape = RoundedCornerShape(8.dp),
    backgroundColor = MaterialTheme.colors.surface,
) {
    Column(
        modifier = Modifier.height(200.dp).padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Text(text = "This is a card view",
            style = MaterialTheme.typography.h4)
    }
}

Answer 2

在v0.1.0-dev09版本中，可以这样做，其中 paddingCard设置卡片的边距， paddingBox设置卡片内部的填充。

Card(
  shape = RoundedCornerShape(8.dp), 
  modifier = Modifier.padding(16.dp).fillMaxWidth()
) {
  Box(modifier = Modifier.height(200.dp).padding(16.dp)) {
    Text("This is a card view")
  }
}

Answer 3

正如朋友们所推荐的，Card这是一种创造方式，CardView但你也可以通过表面来做到这一点：

val shape = RoundedCornerShape(10.dp)
Surface(modifier = Modifier.size(250.dp, 70.dp), elevation = 8.dp, shape = shape) {
      Text(text = "Sample text")
}

请注意，SurfaceandCard不能用于定位项目，所以如果你想定位它Text(text = "Sample text")，你应该在里面使用一个布局，Surface如下所示：

val shape = RoundedCornerShape(10.dp)
Surface(modifier = Modifier.size(250.dp, 70.dp), elevation = 8.dp, shape = shape) {
    Box(modifier = Modifier.fillMaxSize()) {
          Text(modifier = Modifier.align(Alignment.Center), text = "Sample text")
    }
}

适当的创建方式CardView是这样，但如果你只想为视图创建阴影，你可以使用Modifier.shadow（注意Modifier.shadow和Surface/Card不一样）：

Box(modifier = Modifier.size(250.dp, 70.dp).shadow(8.dp, RoundedCornerShape(10.dp)), contentAlignment = Alignment.Center) {
        Text(text = "Sample Text")
}