Android compose：Surface 只能有一个直接可测量的子级

Question

我是 Jetpack compose 的新手，我创建了一个如下所示的可组合项：

  Column(
        Modifier.clickable(onClick = onclick)
            .fillMaxWidth().background(pastelGray)
            .padding(16.dp)
    ) {
        Card(backgroundColor = Color.Cyan) {
   //         Image(asset = vectorResource(id = R.drawable.ic_coupon_back), modifier = Modifier.fillMaxWidth())
            Column(modifier = Modifier.padding(8.dp)) {
                Text(text = coupon.couponTitle, color = Color.Red, fontSize = 20.sp)
                Text(text = coupon.couponSubTitle, color = Color.Black, fontSize = 13.sp)
                Text(text = coupon.couponDateTitle, color = Color.Gray, fontSize = 11.sp)
            }
        }
    }

当我添加评论图像时，出现此错误：

Surface can have only one direct measurable child!

我至今找不到原因。

Answer 1

因为Card()代码中使用的可组合项在底层使用了 Surface：

@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
) {
    Surface(
        modifier = modifier,
        shape = shape,
        color = backgroundColor,
        contentColor = contentColor,
        elevation = elevation,
        border = border,
        content = content
    )
}

来源：官方卡实现代码

ScrollView而Surface是一种不接受多个直系子代的类型。因此，您需要将代码包装Card()到单个父级中，该父级是 的直接子级Card，或者换句话说，是 的直接子级Surface，例如：

Card(backgroundColor = Color.Cyan) {
     CardContent()
}

private fun CardContent() {
        Column() {
            // Image(asset = vectorResource(id = R.drawable.ic_coupon_back), modifier = Modifier.fillMaxWidth())
               Column(modifier = Modifier.padding(8.dp)) {
                      Text(text = coupon.couponTitle, color = Color.Red, fontSize = 20.sp)
                      Text(text = coupon.couponSubTitle, color = Color.Black, fontSize = 13.sp)
                      Text(text = coupon.couponDateTitle, color = Color.Gray, fontSize = 11.sp)
               }
        }
    }
}