Layout Intrinsics example from <Layouts in Compose...

# compose

[Vince Rickey]

Layout Intrinsics example from Layouts in Compose documentation and CodeLab doesn't seem to be working. Screenshots and code in the thread.

[Vince Rickey]

I copy-pasted the following code into my sample app and it doesn't have the desired outcome of setting the height of the row to the height of the text.

Since the time the example was written Modifier.preferredHeight(intrinsic) was deprecated and replaced by just Modifier.preferredHeight(intrinsic).

Surface {
    TwoTexts(text1 = "Hello World", text2 = "Hello World 2")
}

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier.height(IntrinsicSize.Min)) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )
        Divider(color = Color.Black, modifier = Modifier.fillMaxHeight().width(5.dp))
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),
            text = text2
        )
    }
}

[Vince Rickey]

cc: @YASAN @Kai Zhu since you were working with this recently. Thanks!

[Vince Rickey]

I'm currently on Compose Beta03 for the record.

[YASAN]

I was working on a similar situation and I fixed it by just adding .height(IntrinsicSize.Min) on the parent as you have done. So based on my knowledge it should work. But I think I have missed one step in the process since even though I fixed this issue in one part of my app, I could not do the same on other parts of my app by adding .height(IntrinsicSize.Min) on the parent and .fillMaxHeigh() on the parent.

So I hope someone helps us both here 😫

[Vince Rickey]

@YASAN Thanks for following up. I think the cause of our confusion is that there are different results in the Compose Preview (and CodeLab) than if it were run.

The intrinsic Compose Preview renders correctly with the example code:

Surface {
    TwoTexts(text1 = "Hello World", text2 = "Hello World 2")
}

But in order to achieve that same result in an app, I needed to wrap TwoTexts in a parent container as you suggested. In my example, it is a Column . (However, the Column doesn't need any Intrinsics, so you may want to revisit that in your project if I understood you correctly).

Working Code

Surface {
    Column {
        TwoTexts(text1 = "Hello World", text2 = "Hello World 2")
    }
}

I also updated to the latest version of compose to make sure it wasn't a bug