安卓撰写 : Surface can have only one direct measurable child

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

来源:Official Card Implementation code

而 Surface 是一种类似 ScrollView 的类型，不接受超过一个直接子级。因此，您需要将 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)
               }
        }
    }
}