Material 3空TextField获焦时标签跳转问题咨询

问题说明 #

使用Material 3的空TextField组件时，组件获取焦点的瞬间会引发界面跳转，影响交互体验。

环境信息 #

• Kotlin版本：2.0.20
• Compose Multiplatform版本：1.7.0-alpha03
• 测试设备：Xiaomi Redmi Note 10S

复现代码 #

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Hello")
        TextField(TextFieldValue(), {}, label = { Text("Label 1") })
        TextField(TextFieldValue(), {}, label = { Text("Label 2") })
    }
}

预期行为 #

TextField获取焦点时，界面保持稳定，无跳转现象。

解决方案 #

1. 固定TextField高度 #

问题根源之一是Material 3的TextField在标签上浮时会改变组件高度，引发布局重排。给TextField设置固定高度可以避免这个问题：

TextField(
    value = TextFieldValue(),
    onValueChange = {},
    label = { Text("Label 1") },
    modifier = Modifier.height(56.dp) // 匹配Material 3 TextField标准高度
)

2. 控制软键盘窗口调整 #

如果跳转是因为软键盘弹出导致的窗口布局调整，可以通过配置禁用自动调整：
在AndroidManifest.xml的对应Activity中添加属性：

<activity
    ...
    android:windowSoftInputMode="adjustPan">
</activity>

或者在Compose中通过WindowInsets手动控制：

val windowInsetsController = rememberWindowInsetsController()
DisposableEffect(Unit) {
    windowInsetsController.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
    onDispose {}
}

3. 自定义输入框布局 #

如果不需要默认的标签动画，使用BasicTextField完全自定义布局，避免默认的高度变化：

BasicTextField(
    value = TextFieldValue(),
    onValueChange = {},
    modifier = Modifier
        .fillMaxWidth()
        .height(56.dp)
        .border(1.dp, Color.Gray, RoundedCornerShape(4.dp))
        .padding(horizontal = 16.dp, vertical = 12.dp),
    decorationBox = { innerTextField ->
        Column {
            Text("Label 1", fontSize = 12.sp, modifier = Modifier.padding(bottom = 4.dp))
            innerTextField()
        }
    }
)

内容的提问来源于stack exchange，提问作者Mehdi.ncb