Constraint layout chains are messed

[iZakirSheikh]

I don't know how but the constraint layout's chains are not working with latest version of compose (1.4 -alpha2).

Here is the code

private val HeaderArtWorkShape = RoundedCornerShape(20)
context(TracksViewModel) @composable
fun Header(
modifier: Modifier = Modifier
) {
ConstraintLayout(modifier = modifier) {

    val meta by header
    val title = stringResource(value = title)
    val (Artwork, Play, Title, Subtitle, Share, Shuffle, Sort, Divider) = createRefs()

    // create the chain
    // this will determine the size of the
    // Header
    constrain(
        ref = createVerticalChain(Artwork, Share, Divider, chainStyle = ChainStyle.Packed),
        constrainBlock = {
            // Divider will act as the center anchor of Play Button
            top.linkTo(parent.top, ContentPadding.normal)
            bottom.linkTo(parent.bottom, ContentPadding.large)
        }
    )

    Surface(
        shape = HeaderArtWorkShape,
        elevation = ContentElevation.high,

        content = {
            val artwork = meta?.artwork
            Image(data = artwork)
        },

        modifier = Modifier
            .constrainAs(Artwork) {
                start.linkTo(parent.start, ContentPadding.normal)
                width = Dimension.value(76.dp)
                height = Dimension.ratio("0.61")
            },
    )

    val context = LocalContext.current
    val channel = LocalSnackDataChannel.current
    val enabled by remember { derivedStateOf { selected.size > 0 } }
    //Share
    IconButton(
        onClick = { share(context, channel) },
        imageVector = Icons.TwoTone.Share,
        contentDescription = null,
        enabled = enabled,
        modifier = Modifier
            .padding(top = ContentPadding.large)
            .constrainAs(Share) {}
    )

    // Divider
    Divider(
        modifier = Modifier
            .constrainAs(Divider) {}
    )


    // line 2 is the line of Button aligned with share
    constrain(
        ref = createHorizontalChain(Share, Shuffle, Sort, chainStyle = ChainStyle.Packed(0f)),
        constrainBlock = {
            start.linkTo(Artwork.start)
        }
    )

    //Shuffle
    IconButton(
        imageVector = Icons.TwoTone.Shuffle,
        contentDescription = null,

        onClick = { onRequestPlay(context, true, channel = channel) },

        modifier = Modifier.constrainAs(Shuffle) {
            bottom.linkTo(Share.bottom)
        }
    )

    // Sort
    var show by rememberState(initial = false)
    IconButton(
        onClick = { show = true },

        modifier = Modifier.constrainAs(Sort) {
            bottom.linkTo(Share.bottom)
        },

        content = {
            Icon(imageVector = Icons.TwoTone.Sort, contentDescription = null)
            SortBy(expanded = show) {
                show = false
            }
        }
    )

    // Play Button
    NeumorphicButton(
        shape = CircleShape,
        onClick = { onRequestPlay(context, false, null, channel = channel) },

        colors = NeumorphicButtonDefaults.neumorphicButtonColors(
            lightShadowColor = Material.colors.lightShadowColor,
            darkShadowColor = Material.colors.darkShadowColor
        ),

        modifier = Modifier
            .constrainAs(Play) {
                top.linkTo(Divider.top)
                bottom.linkTo(Divider.bottom)
                end.linkTo(parent.end, ContentPadding.large)
                width = Dimension.value(60.dp)
                height = Dimension.value(60.dp)
            },

        content = {
            Icon(
                painter = painterResource(id = R.drawable.ic_play_arrow),
                contentDescription = null,
                modifier = Modifier.requiredSize(20.dp)
            )
        }
    )


    // Title
    Header(
        text = title,
        style = Material.typography.h5,
        maxLines = 2,
        textAlign = TextAlign.Start,

        modifier = Modifier.constrainAs(Title) {
            start.linkTo(Artwork.end, ContentPadding.normal)
            end.linkTo(parent.end, ContentPadding.normal)
            top.linkTo(Artwork.top)
            width = Dimension.fillToConstraints
        }
    )

    // Subtitle
    val subtitle = stringResource(value = meta?.subtitle) ?: AnnotatedString("")
    Label(
        text = subtitle,
        textAlign = TextAlign.Start,
        style = Material.typography.caption2,
        fontWeight = FontWeight.SemiBold,
        color = LocalContentColor.current.copy(ContentAlpha.medium),
        maxLines = 2,
        modifier = Modifier
            .constrainAs(Subtitle) {
                end.linkTo(parent.end, ContentPadding.normal)
                top.linkTo(Title.bottom)
                start.linkTo(Title.start)
                width = Dimension.fillToConstraints
            },
    )

    // line 3 of details
    val (Duration, Divider1, Tracks, Divider2, Size) = createRefs()
    constrain(
        ref = createHorizontalChain(
            Duration,
            Divider1,
            Tracks,
            Divider2,
            Size,
            chainStyle = ChainStyle.SpreadInside
        ),

        constrainBlock = {
            start.linkTo(Title.start)
            end.linkTo(parent.end, ContentPadding.normal)
        }
    )

    //Duration
    val duration = Util.formatAsDuration((meta?.duration ?: 0).toLong())
    Text(
        reference = Duration,
        value = duration,
        title = "Duration",

        block = {
            top.linkTo(Subtitle.bottom, ContentPadding.normal)
        }
    )

    // Divider 1
    Divider(
        modifier = Modifier.constrainAs(Divider1) {
            top.linkTo(Duration.top, -ContentPadding.small)
            height = Dimension.value(56.dp)
            width = Dimension.value(1.dp)
        }
    )

    //Tracks
    val count = meta?.cardinality ?: 0
    Text(
        reference = Tracks,
        value = "$count",
        title = "Tracks",

        block = {
            top.linkTo(Duration.top)
        },
    )

    //Divider 2
    Divider(
        modifier = Modifier.constrainAs(Divider2) {
            height = Dimension.value(56.dp)
            top.linkTo(Duration.top, -ContentPadding.small)
            width = Dimension.value(1.dp)
        }
    )

    // Size
    val size = FileUtils.toFormattedDataUnit(context, meta?.size ?: 0L)
    Text(
        reference = Size,
        value = size,
        title = "Size",
        block = {
            top.linkTo(Duration.top)
        },
    )
}

}

Note: The code was working properly in 1.3.0-beta01. Here the chains logic is all messed up.

[iZakirSheikh]

during my tests I found out the issue is releated to compose ui version not compose compiler.