IssueTracker

ConstraintLayout version: 2.1.0-beta02 Compose-ConstraintLayout version: 1.0.0-alpha07

When using ConstraintLayout in a LazyColumn a simple Text does not appear when we simply scroll up and down. Changing the Item from a ConstraintLayout to a Row fixes the issue thus I conclude either my code is bugged or ConstraintLayout alpha has a bug.

You can see in the Layout inspector picture the Text is supposed to display a -6.40 euro

LazyColumn(
    modifier = modifier,
    verticalArrangement = Arrangement.spacedBy(smallMargin),
) {
    item {
        header()
    }
    transactionsGroupedPer.forEach { (section, transactions) ->
        item {
            Text(
                modifier = modifier.padding(start = largeMargin, end = largeMargin, top = normalMargin),
                text = section.uppercase(),
                style = MyTheme.typography.label
            )
        }
        items(items) {
            MyItem(
                item = it,
                modifier = Modifier.fillParentMaxWidth(),
            )
        }
    }
}


@Composable
fun MyItem(
    name: String,
    amount: Money,
    modifier: Modifier = Modifier,
    textColor: Color = Color.Unspecified,
) {
    val constraints = ConstraintSet {
        val titleSubTitle = createRefFor(ModifierId.TITLE_SUBTITLE)
        val logo = createRefFor(ModifierId.LOGO)
        val amount = createRefFor(ModifierId.AMOUNT)

        constrain(amount) {
            top.linkTo(parent.top, margin = xsmallMargin)
            bottom.linkTo(parent.bottom, margin = xsmallMargin)
            end.linkTo(parent.end, margin = smallMargin)
        }
        constrain(logo) {
            start.linkTo(parent.start, margin = smallMargin)
            bottom.linkTo(parent.bottom) 
        }
        constrain(titleSubTitle) {
            top.linkTo(logo.top)
            bottom.linkTo(logo.bottom)
            start.linkTo(logo.end, margin = smallMargin)
            end.linkTo(amount.start, margin = smallMargin)
            width = Dimension.fillToConstraints
        }
    }

    ConstraintLayout(constraints,
        modifier = modifier.fillMaxWidth().wrapContentHeight()
    ) {
        Text(
            color = textColor,
            modifier = Modifier.layoutId(ModifierId.AMOUNT),
            text = amount.toMoneyAnnotatedString(),
            style = amountStyle,
        )
        ImageContainer(Modifier.layoutId(ModifierId.LOGO), image = image, size = logoSize)
        Column(modifier = Modifier.layoutId(ModifierId.TITLE_SUBTITLE), verticalArrangement = Arrangement.Center) {
            Text(
                color = textColor,
                maxLines = maxLines,
                text = name,
                style = MyTheme.typography.bodyBold
            )
            if (showSubTitle) {
                Text(
                    color = textColor,
                    text = date.formatDateTime(DateFormat.LONG), 
                    style = MyTheme.typography.meta
                )
            }
        }
    }
}

Layout Inspector