Jetpack compose ui：如何创建cardview？

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