Card
@Composable
fun Card(
modifier: Modifier = Modifier,
shape: Shape = MaterialTheme.shapes.medium,
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(backgroundColor),
border: BorderStroke? = null,
elevation: Dp = 1.dp,
content: @Composable () -> Unit
)
Card 是 Compose 中一个布局组件，我们用它可以来创造出一些类似于卡片界面
@Composable
fun CardDemo() {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(15.dp) // 外边距
.clickable{ },
// 设置点击波纹效果，注意如果 CardDemo() 函数不在 MaterialTheme 下调用
// 将无法显示波纹效果
elevation = 10.dp // 设置阴影
) {
Column(
modifier = Modifier.padding(15.dp) // 内边距
) {
Text(
buildAnnotatedString {
append("欢迎来到 ")
withStyle(style = SpanStyle(fontWeight = FontWeight.W900, color = Color(0xFF4552B8))
) {
append("Jetpack Compose 博物馆")
}
}
)
Text(
buildAnnotatedString {
append("你现在观看的章节是 ")
withStyle(style = SpanStyle(fontWeight = FontWeight.W900)) {
append("Card")
}
}
)
}
}
}
