Jetpack Compose ConstraintLayout TextField基线对齐异常问题咨询

我正在尝试使用Jetpack Compose与ConstraintLayout，现有一个Text组件和一个TextField，希望Text与TextField的基线（baseline）垂直对齐。实现代码如下：

@Composable
fun MyComposable() {
    ConstraintLayout {
        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)
               }
        )
    }
}

使用该Composable时，未聚焦TextField时，文本“foo”与TextField的基线对齐正常；但聚焦TextField后，标签上移，Text组件也随之移动。请问此现象是否为预期行为？如何将Text的基线绑定到TextField内容的基线而非标签的基线？

是否为预期行为？ #

是预期行为。TextField的默认基线指向整个组件的基线：未聚焦且输入为空时，标签作为占位符与输入区域重合，组件基线和输入内容基线一致；聚焦后标签上浮为浮动标签，整个组件的基线会切换为浮动标签的基线，因此绑定的Text会跟着移动。

解决方案：绑定到输入内容的基线 #

要实现和输入文本的基线对齐，需要绕过TextField的整体基线，直接获取输入区域的基线，以下是几种可行方案：

方案1：通过onTextLayout捕获输入基线调整 #

利用TextField的onTextLayout回调获取输入文本的基线，再通过Modifier.baselineOffset调整Text的基线位置：

@Composable
fun MyComposable() {
    ConstraintLayout {
        val (text, textfield) = createRefs()
        var tfValue by remember { mutableStateOf("") }
        var inputBaseline by remember { mutableStateOf(0f) }

        Text(
            "foo",
            Modifier
                .constrainAs(text) {
                    top.linkTo(textfield.top, margin = 24.dp)
                }
                .baselineOffset(inputBaseline)
        )

        TextField(
            value = tfValue,
            onValueChange = { tfValue = it },
            label = { Text("bar") },
            modifier = Modifier
               .constrainAs(textfield) {
                   top.linkTo(parent.top)
               },
            onTextLayout = { layoutResult ->
                inputBaseline = layoutResult.firstBaseline
            }
        )
    }
}

方案2：自定义decorationBox暴露输入区域基线 #

通过自定义TextField的decorationBox，用Baseline组件包裹输入区域，直接将输入区域的基线绑定到ConstraintLayout的引用上：

@Composable
fun MyComposable() {
    ConstraintLayout {
        val (text, inputAreaRef) = createRefs()
        var tfValue by remember { mutableStateOf("") }

        Text(
            "foo",
            Modifier.constrainAs(text) {
                baseline.linkTo(inputAreaRef.baseline)
                start.linkTo(inputAreaRef.start)
            }
        )

        TextField(
            value = tfValue,
            onValueChange = { tfValue = it },
            label = { Text("bar") },
            modifier = Modifier
               .constrainAs(inputAreaRef) {
                   top.linkTo(parent.top, margin = 24.dp)
               },
            decorationBox = { innerTextField ->
                // 仅将输入区域的基线暴露给ConstraintLayout
                Baseline {
                    innerTextField()
                }
            }
        )
    }
}

方案3：使用BasicTextField完全自定义布局 #

如果需要最精确的控制，直接使用BasicTextField拆分标签和输入区域，分别处理布局，确保Text只绑定输入文本的基线：

@Composable
fun MyComposable() {
    ConstraintLayout {
        val (text, inputText, floatingLabel) = createRefs()
        var tfValue by remember { mutableStateOf("") }
        val isFocused = remember { mutableStateOf(false) }

        Text(
            "foo",
            Modifier.constrainAs(text) {
                baseline.linkTo(inputText.baseline)
                start.linkTo(inputText.start)
            }
        )

        // 输入区域
        BasicTextField(
            value = tfValue,
            onValueChange = { tfValue = it },
            modifier = Modifier
                .constrainAs(inputText) {
                    top.linkTo(parent.top, margin = 24.dp)
                }
                .onFocusChanged { isFocused.value = it.isFocused },
            textStyle = TextStyle(fontSize = 16.sp)
        )

        // 浮动标签
        Text(
            text = "bar",
            modifier = Modifier
                .constrainAs(floatingLabel) {
                    top.linkTo(inputText.top)
                    start.linkTo(inputText.start)
                }
                .offset(
                    y = if (isFocused.value || tfValue.isNotEmpty()) (-16).dp else 0.dp,
                    x = if (isFocused.value || tfValue.isNotEmpty()) (-4).dp else 0.dp
                )
                .scale(if (isFocused.value || tfValue.isNotEmpty()) 0.75f else 1f),
            fontSize = 16.sp
        )
    }
}

内容的提问来源于stack exchange，提问作者Sockenklaus