Jetpack compose ui：如何创建cardview？

Question

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

谢谢。

Answer 1

通过0.1.0-dev03，您可以使用类似的内容：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        MaterialTheme {
            Column(modifier = Spacing(32.dp))
            {
                Card()
            }
        }
    }
}

@Composable
fun Card() {

    Card(shape = RoundedCornerShape(8.dp)) {
        Padding(padding = 16.dp) {
            Container(height = 200.dp, expanded = true) {
                Text("This is a card view",
                    style = (+MaterialTheme.typography()).h4  )
            }
        }
    }
}

Answer 2

<{>在v0.1.0-dev09版本中，可以这样完成，其中Card的填充设置卡片的边距，Box的填充设置卡片内的填充。

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

Screenshot of the card