Jetpack Compose ConstraintLayout TextField baseline moves

Viewed 81

I'm experimenting with Jetpack Compose and ConstraintLayout.

I have a Text()-Resource and a TextField. I want the Text to vertically align with TextFields baseline.

@Composable
fun MyComposable() {
    ContraintLayout {
        val (text, textfield) = createRefs()
        var tfValue by remember { mutableStateOf("") }
        
        Text(
            "foo",
            Modifier.constrainAs(text) {
                baseline.linkTo(textfield.baseline)
            }
        )

        TextField(
            value = tfValue,
            onValueChange = { tfValue = it },
            label = { Text("bar") },
            modifier = Modifier
               .constrainAs(textfield) {
                   top.linkTo(parent.top, margin = 24.dp)
               }
        )
    }
}

When I use this composable, the text "foo" is perfectly aligned with the baseline of textfield. But when i focus the textfield and the label moves to the top of the textfield, the Text()-Component moves with it. Is this intended?

How can i constrain foo's baseline to the baseline of the content of Textfield rather than to Textfield's label?

0 Answers
Related