Jetpack Compose检测键盘状态调整布局避免登录按钮被遮挡方案问询

原有实现存在的问题 #

• 硬编码的键盘高度阈值无法适配所有设备的定制系统、不同分辨率/屏幕比例的场景，判断键盘是否弹出的逻辑本身就存在准确率问题
• 固定250ms延迟完全依赖设备键盘弹出动画的时长，不同设备动画速度不同，很容易出现调用bringIntoView()时键盘还未完全弹出，滚动距离计算错误
• RelocationRequester已在Compose 1.2.0版本后被官方废弃，兼容性和稳定性没有保障

最优实现方案 #

该方案完全依赖官方原生API，无需自行监听键盘事件，兼容性覆盖所有Android 7.0+设备，无设备适配问题。

第一步：配置Activity软键盘模式 #

首先在AndroidManifest.xml中给对应Activity添加配置，开启系统布局自动调整：

<activity
    android:name=".LoginActivity"
    android:windowSoftInputMode="adjustResize" />

第二步：Compose端代码实现 #

@Composable
fun LoginScreen() {
    // 初始化视图定位请求器
    val bringIntoViewRequester = remember { BringIntoViewRequester() }
    val coroutineScope = rememberCoroutineScope()
    // 可滚动的根布局
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            // 自动适配键盘弹出的底部间距
            .imePadding()
            .padding(horizontal = 16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 其他布局元素 如Logo、提示文本等
        TextField(
            value = account,
            onValueChange = { account = it },
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 100.dp)
                .onFocusChanged { focusState ->
                    // 输入框获取焦点时，请求将登录按钮滚动到可视区域
                    if (focusState.isFocused) {
                        coroutineScope.launch {
                            bringIntoViewRequester.bringIntoView()
                        }
                    }
                },
            label = { Text("请输入账号") }
        )
        TextField(
            value = password,
            onValueChange = { password = it },
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp),
            label = { Text("请输入密码") }
        )
        // 登录按钮绑定定位请求器
        Button(
            onClick = { /* 登录逻辑 */ },
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 32.dp)
                .bringIntoViewRequester(bringIntoViewRequester)
        ) {
            Text("登录")
        }
    }
}

可选优化：多输入框场景适配 #

如果页面有多个输入框，可直接监听键盘显示状态触发滚动，无需给每个输入框单独加焦点监听：

// Compose Material 1.5.0+ 原生支持，低版本可引入accompanist-insets库实现
val isImeVisible = WindowInsets.ime.asPaddingValues().calculateBottomPadding() > 0.dp
LaunchedEffect(isImeVisible) {
    if (isImeVisible) {
        bringIntoViewRequester.bringIntoView()
    }
}

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