覆盖 Android Jetpack Compose 中的 TextField 标签大小（不破坏缩放动画）

Question

我需要覆盖

TextField

中的标签尺寸，以便为手机和平板电脑设置不同的尺寸。我的第一个方法是直接覆盖字体大小：

TextField(
    value = value,
    onValueChange = onValueChange,
    label = {
        Text(
            text = label,
            fontSize = 20.sp
        )
    },
    ...
)

这确实有效。问题是，这个大小“静态”地影响

TextField

中的两种状态，当它为空时和我正在编辑时，默认情况下会重新缩放，如屏幕截图所示。-

任何已知的方法可以实现这一目标？

Answer 1

根据文档

label - the optional label to be displayed inside the text field container. The default text style for internal Text is Typography.caption when the text field is in focus and Typography.subtitle1 when the text field is not in focus

您必须为 BasicTextField 创建包装器以实现更改字体大小/样式而不破坏缩放动画。所以代码看起来像这样

 BasicTextField(
            .................

            decorationBox = @Composable { innerTextField ->
                // this helps to not mess with label scale transition
                MaterialTheme(
                    typography = MaterialTheme.typography.copy(
                        subtitle1 = labelStyleUnfocused, // your custom style with different font size TextField is not in focus
                        caption = labelStyleFocused // your custom style with different font size TextField is in focus
                    )
                ) {
                    val label: @Composable (() -> Unit)? = if (labelText != null) {
                        {
                            Text(
                                text = labelText
                            )
                        }
                    } else {
                        null
                    }
                    // places leading icon, text field with label and placeholder, trailing icon
                    TextFieldDefaults.TextFieldDecorationBox(
                        ..........

                        label = label,
                        
                        ..........
                        
                    )
                }
            }
        )
    }