Jetpack Compose中ConstraintLayout与Row约束异常问题

问题 #

使用Jetpack Compose结合ConstraintLayout实现列表卡片布局时，Row组件约束关联出现异常：为Row设置了start关联productName的start、end关联父组件end，且添加了Arrangement.SpaceBetween属性，但每张卡片的Row布局表现不一致，真机与模拟器显示效果相同。

代码示例 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ProductCard(product:ProductModel){
    ElevatedCard(
        onClick = { },
        modifier = Modifier
            .padding(start = 15.dp, end = 15.dp, top = 10.dp, bottom = 10.dp)
            .fillMaxWidth(),
        colors = CardDefaults.cardColors(
            containerColor = Color.White,
        )
    ) {
        ConstraintLayout{
            val (productImage,productName,productCategory,
                productPrice,ratingPrice) = createRefs()

            AsyncImage(
                model = ImageRequest.Builder(LocalContext.current)
                    .data(product.productImage)
                    .crossfade(true)
                    .build(),
                contentDescription = null,
                placeholder = painterResource(id = R.drawable.user),
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .constrainAs(productImage) {
                        start.linkTo(parent.start, margin = 10.dp)
                        top.linkTo(parent.top, margin = 15.dp)
                        end.linkTo(productName.start)
                        bottom.linkTo(parent.bottom)
                    }
                    .width(72.dp)
                    .height(72.dp)
            )

            Text(
                modifier = Modifier
                    .constrainAs(productName) {
                        top.linkTo(productImage.top)
                        start.linkTo(productImage.end, margin = 10.dp)
                        end.linkTo(parent.end,margin = 10.dp)
                        width = Dimension.wrapContent
                    },
                text = product.productName,
                fontFamily = notoSansFontFamily,
                fontWeight = FontWeight.Bold,
                fontSize = 16.sp,
            )

            Text(
                modifier = Modifier
                    .constrainAs(productCategory) {
                        top.linkTo(productName.bottom, margin = 5.dp)
                        start.linkTo(productName.start)
                        width = Dimension.wrapContent
                    },
                text = product.productCategory,
                fontFamily = notoSansFontFamily,
                fontWeight = FontWeight.Medium,
                fontSize = 15.sp,
            )

            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.constrainAs(ratingPrice){
                    top.linkTo(productCategory.bottom, margin = 5.dp)
                    start.linkTo(productName.start)
                    end.linkTo(parent.end)
                    width = Dimension.fillToConstraints
                }
                    .background(Color.Blue)
            ) {
                Text(
                    text = product.productPrice,
                    fontFamily = notoSansFontFamily,
                    fontWeight = FontWeight.Bold,
                    fontSize = 14.sp,
                    color = Color.White
                )

                Text(
                    text = "Rating : ${product.productRating}",
                    fontFamily = notoSansFontFamily,
                    fontWeight = FontWeight.Normal,
                    fontSize = 12.sp,
                    color = Color.Yellow,
                    modifier = Modifier.background(Color.Red)
                )
            }
        }
    }
}

问题截图 #

解决方案 #

问题核心在于Row的约束与productName的宽度范围不匹配，调整如下：

1. 对齐Row与productName的右侧margin
   productName的end设置了10dp的margin，而Row的end直接关联父组件end未设margin，导致Row宽度超出预期范围。给Row的end添加相同margin：

modifier = Modifier.constrainAs(ratingPrice){
    top.linkTo(productCategory.bottom, margin = 5.dp)
    start.linkTo(productName.start)
    end.linkTo(parent.end, margin = 10.dp) // 添加10dp margin，与productName对齐
    width = Dimension.fillToConstraints
}

2. 补充Row的底部约束（可选）
   为避免卡片内容溢出，给Row添加底部margin约束，让布局更稳定：

bottom.linkTo(parent.bottom, margin = 15.dp)

修改后的完整Row约束代码：

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier.constrainAs(ratingPrice){
        top.linkTo(productCategory.bottom, margin = 5.dp)
        start.linkTo(productName.start)
        end.linkTo(parent.end, margin = 10.dp)
        bottom.linkTo(parent.bottom, margin = 15.dp)
        width = Dimension.fillToConstraints
    }
        .background(Color.Blue)
) {
    // 内部Text组件保持不变
}

调整后，Row会严格对齐productName的左右范围，Arrangement.SpaceBetween就能正常让两个Text分别居左、居右，所有卡片的布局表现将保持一致。

内容的提问来源于stack exchange，提问作者Dnveeraj