Jetpack compose 中不可见的圆角

Jer*_*ego 4 android kotlin android-jetpack android-jetpack-compose

我正在尝试将其作为第一次喷气背包练习 图像

实际上这是代码,唯一缺少的是圆角,我尝试了一下,它确实剪辑了内容,但它不可见。

@Preview
@Composable()
fun Horizontal_card (){
Row(
    Modifier
        .size(width = 352.dp, height = 80.dp)
        .background(MaterialTheme.colors.background)
        .clip(RoundedCornerShape(10.dp)),
    verticalAlignment = Alignment.CenterVertically) {
    Spacer(Modifier.width(16.dp))
    Cardcontent ()
}

}
Run Code Online (Sandbox Code Playgroud)

这是该组件的预览: 图片2

Thr*_*ian 11

修饰符的顺序很重要。现在你设置你的背景

fun Modifier.background(
    color: Color,
    shape: Shape = RectangleShape
) = this.then(
    Background(
        color = color,
        shape = shape,
        inspectorInfo = debugInspectorInfo {
            name = "background"
            value = color
            properties["color"] = color
            properties["shape"] = shape
        }
    )
)
Run Code Online (Sandbox Code Playgroud)

它使用RectangleShape

你应该打电话

Modifier
    .size(width = 352.dp, height = 80.dp)
    .background(MaterialTheme.colors.background, RoundedCornerShape(10.dp))
Run Code Online (Sandbox Code Playgroud)

或者

Modifier
 .size(width = 352.dp, height = 80.dp)
 .clip(RoundedCornerShape(10.dp))
 .background(MaterialTheme.colors.background)
Run Code Online (Sandbox Code Playgroud)