Jetpack Compose：键盘弹出时固定TopAppBar避免被顶出屏幕

问题场景 #

我开发了一个Jetpack Compose页面，顶部设置了TopAppBar，屏幕底部有若干TextField。当TextField获取焦点弹出软键盘时，TextField能正常显示在键盘上方，但整个屏幕内容会上移，导致TopAppBar被顶出屏幕或顶部被截断。尝试了两种布局方式都出现该问题：

方式1：将TopAppBar设为Scaffold的topBar参数 #

Scaffold(
    topBar = {
        TopAppBar("...")
    }
) {
    // 包含TextField的可滚动内容
}

方式2：将TopAppBar放在Scaffold上方的Column中 #

Column {
    TopAppBar("...")
    Scaffold {
        // 包含TextField的可滚动内容
    }
}

问题表现：软键盘弹出时，TopAppBar随整体内容上移，无法固定在屏幕顶部。

解答 #

Compose中顶栏默认会被键盘顶起吗？ #

会的，这取决于Activity的windowSoftInputMode配置。如果设置为adjustResize或adjustPan，整个Compose布局会被系统调整，TopAppBar作为布局的一部分，自然会跟着上移。

实现TopAppBar固定的正确方法 #

方法1：正确配置系统参数+使用Scaffold的topBar

1. 配置AndroidManifest.xml：
   将对应Activity的windowSoftInputMode设为adjustResize，让窗口调整大小适配软键盘，而非平移整个窗口：

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

2. 优化Compose布局：
   确保Scaffold内部的内容使用可滚动容器（如LazyColumn、verticalScroll），并正确处理Scaffold的内边距：

Scaffold(
    topBar = {
        TopAppBar(title = { Text("固定顶栏") })
    }
) { scaffoldPadding ->
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .padding(scaffoldPadding), // 避免内容被TopAppBar遮挡
        verticalArrangement = Arrangement.Bottom
    ) {
        items(3) { index ->
            TextField(
                value = "",
                onValueChange = {},
                label = { Text("输入框 ${index + 1}") },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp, vertical = 8.dp)
            )
        }
    }
}

这样设置后，软键盘弹出时只有Scaffold内部的可滚动内容会上移，TopAppBar会固定在屏幕顶部。

方法2：独立TopAppBar+占满剩余空间的可滚动内容

如果要把TopAppBar放在Scaffold外部，需确保内容区域占满剩余屏幕空间且为可滚动容器：

Column(modifier = Modifier.fillMaxSize()) {
    // 固定在顶部的TopAppBar
    TopAppBar(title = { Text("固定顶栏") })

    // 内容区域占满剩余空间，且可滚动
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .weight(1f), // 占满Column剩余高度
        verticalArrangement = Arrangement.Bottom
    ) {
        items(3) { index ->
            TextField(
                value = "",
                onValueChange = {},
                label = { Text("输入框 ${index + 1}") },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp, vertical = 8.dp)
            )
        }
    }
}

同样需要配合adjustResize的系统配置，内容区域会自动适配软键盘高度，TopAppBar因未加入滚动容器，会保持固定。

关键注意事项 #

• 内容区域必须使用可滚动容器，否则软键盘弹出时整个布局会被顶起。
• 不要给包含TopAppBar的父容器设置滚动属性，否则顶栏会跟着滚动。
• adjustResize是核心配置，它让系统调整窗口大小而非平移，确保布局适配逻辑正常工作。

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