JetPack Compose 中的 LazyColumn 和约束

Question

我正在使用 jetpack compose + 约束设置基于列表的设计，但我面临约束链接的一些问题，因为当它链接到父级时它无法正常工作。

这是我的代码

@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,
                modifier = Modifier.constrainAs(ratingPrice){
                    top.linkTo(productCategory.bottom, margin = 5.dp)
                    start.linkTo(productName.start)
                    end.linkTo(parent.end)
                }
                    .background(Color.Blue)
            ) {
                Text(
                    text = product.productPrice,
                    fontFamily = notoSansFontFamily,
                    fontWeight = FontWeight.Bold,
                    fontSize = 14.sp,
                    color = Color.White,
                    textAlign = TextAlign.Start
                )

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

结果

如图所示，我希望行编辑器中的项目应该在开始处对齐，并且必须在末尾对齐。我还设置了开始和结束的约束，但尺寸无法正常工作。

如果我更改下面的代码

  Row(
                verticalAlignment = Alignment.CenterVertically,
                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)
                )
            }

它的行为是这样的

你能告诉我这背后可能的原因吗？

Answer 1

你的第二种方法看起来不错。请尝试将

horizontalArrangement

参数添加到

Row

，如下所示，并报告是否获得了所需的结果：

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween,  // add this line
    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)
    )
}