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

来源：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)
               }
        }
    }
}