Android Compose LazyColumn：ConstraintLayout 中的项目：上下滚动 - 文本不再可见

Question

在 LazyColumn 中使用 ConstraintLayout 时，当我们简单地上下滚动时，不会出现简单的文本。将 Item 从 ConstraintLayout 更改为 Row 解决了这个问题，因此我得出结论，要么我的代码有问题，要么 ConstraintLayout alpha 有问题。

您可以在布局检查器图片中看到文本应该显示 -6.40 欧元

编辑：我也将它发布在 android 错误跟踪器上，因为我不确定这是我的问题还是错误 https://issuetracker.google.com/issues/188855913 - 很可能会很快关闭它

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

Answer 1

在 beta08 中修复了错误

参考资料

https://issuetracker.google.com/issues/188855913

https://issuetracker.google.com/issues/188566058

Android Compose LazyColumn：ConstraintLayout 中的项目：上下滚动 - 文本不再可见

Android Compose LazyColumn: Item in a ConstraintLayout: Scrolling up and down - Text no longer visible

android

scroll

android-jetpack-compose