点击HorizontalPager内TextField引发页面异常水平滚动问题求助

核心原因 #

这种HorizontalPager意外横向滚动的问题，大概率是焦点冲突或键盘弹出时的布局计算偏差导致的——LazyColumn为避让键盘触发垂直滚动时，父布局（HorizontalPager）的子项宽度或布局边界出现异常，触发了Pager的滚动逻辑，即使你禁用了用户手动滚动，内部的布局重算仍可能触发位移。

具体解决办法 #

1. 严格锁定Pager子项的宽度

确保每个Pager页面的子布局（NavHost）完全填满父容器，避免键盘弹出时布局重算导致宽度变化：

HorizontalPager(count = 4) { page ->
    Box(modifier = Modifier.fillMaxWidth()) {
        NavHost(navController = navControllers[page], startDestination = "your_start_route") {
            // 页面路由定义
        }
    }
}

2. 彻底禁用Pager的滚动交互

除了userScrollEnabled = false，还需要关闭嵌套滚动，避免LazyColumn的滚动事件意外传递给Pager：

HorizontalPager(
    count = 4,
    userScrollEnabled = false,
    nestedScrollEnabled = false
) { page ->
    // 子布局内容
}

3. 调整键盘交互的窗口配置

在Activity的Manifest中修改软输入模式，避免布局重算时的连锁反应：

<activity
    android:name=".YourMainActivity"
    android:windowSoftInputMode="adjustPan">
    <!-- 其他配置 -->
</activity>

或者在Compose中手动处理键盘Insets，精准控制LazyColumn的滚动范围：

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .windowInsetsPadding(WindowInsetsCompat.Type.ime())
) {
    // 列表项内容
}

架构优化建议 #

你当前“每个Pager页面对应一个NavHost”的设计，虽然能保留标签页的导航栈，但会增加布局嵌套层级和冲突风险。可以改用单个NavHost + 底部TabBar的方案，通过保存每个标签的导航栈状态实现切换保留：

enum class Tab { Home, Profile, Settings, Messages }

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    val currentTab = remember { mutableStateOf(Tab.Home) }
    // 保存每个标签的导航栈状态
    val tabBackStacks = rememberSaveable { mutableStateMapOf<Tab, NavBackStackEntry?>() }

    Scaffold(
        bottomBar = {
            TabRow(selectedTabIndex = currentTab.value.ordinal) {
                Tab.values().forEach { tab ->
                    Tab(
                        selected = currentTab.value == tab,
                        onClick = {
                            tabBackStacks[currentTab.value] = navController.currentBackStackEntry
                            currentTab.value = tab
                            // 恢复对应标签的导航栈
                            tabBackStacks[tab]?.let { navController.popBackStack(it.destination.id, false) }
                                ?: navController.navigate(tab.name.lowercase()) {
                                    popUpTo(navController.graph.startDestinationId) { saveState = true }
                                    launchSingleTop = true
                                    restoreState = true
                                }
                        },
                        text = { Text(tab.name) }
                    )
                }
            }
        }
    ) { padding ->
        NavHost(
            navController = navController,
            startDestination = Tab.Home.name.lowercase(),
            modifier = Modifier.padding(padding)
        ) {
            composable(Tab.Home.name.lowercase()) { HomeScreen() }
            composable(Tab.Profile.name.lowercase()) { ProfileScreen() }
            composable(Tab.Settings.name.lowercase()) { SettingsScreen() }
            composable(Tab.Messages.name.lowercase()) { MessagesScreen() }
            // 其他嵌套路由
        }
    }
}

这种方案既保留了标签切换时的导航栈状态，又简化了布局结构，从根源上减少了Pager与多NavHost的交互冲突。

最后排查 #

如果以上方法都无效，建议升级你的Compose Pager库到最新稳定版，部分旧版本确实存在键盘弹出时的布局Bug。

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