Jetpack Compose中键盘弹出时出现白色闪屏问题求助

问题场景 #

为解决Jetpack Compose页面中键盘激活时内容被遮挡的问题，我使用了以下代码动态更新页面底部内边距：

ViewCompat.setOnApplyWindowInsetsListener(findViewById(android.R.id.content)) { view, insets ->
    val bottom = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom
    view.updatePadding(bottom = bottom)
    insets
}

但出现新问题：打开键盘前会出现白色闪屏，页面背景色为非白色时闪屏尤为明显；如果移除这段代码，键盘激活时内容会被遮挡且无法滚动。

问题原因 #

这段代码直接操作系统原生的android.R.id.content视图，该视图默认背景色为白色。当IME窗口准备显示时，系统会先调整这个视图的内边距，此时Compose页面的背景内容尚未及时完成绘制更新，导致底层的白色原生视图短暂暴露，从而产生闪屏现象。

解决方案 #

方案1：统一原生视图与Compose页面的背景色

在Activity的onCreate方法中，给android.R.id.content视图设置和Compose页面一致的背景色，这样即使底层视图短暂暴露，颜色也和页面匹配，不会出现闪屏：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 设置content视图背景色与Compose页面一致
    findViewById<ViewGroup>(android.R.id.content).setBackgroundColor(
        ContextCompat.getColor(this, R.color.your_page_background_color)
    )
    setContent {
        YourAppTheme {
            // 你的Compose页面内容
            Box(modifier = Modifier.fillMaxSize().background(Color.YourPageBackground)) {
                // ...
            }
        }
    }
}

方案2：使用Compose原生WindowInsets API处理（推荐）

放弃操作原生View，改用Compose内置的WindowInsets处理机制，完全在Compose层面管理键盘内边距，从根源避免原生视图背景暴露的问题：

setContent {
    YourAppTheme {
        val imePadding = rememberWindowInsetsPaddingValues(WindowInsets.ime)
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.YourPageBackground)
                // 应用键盘内边距
                .padding(bottom = imePadding.calculateBottomPadding())
        ) {
            // 页面可滚动内容，比如LazyColumn
            LazyColumn {
                items(100) { index ->
                    Text("Item $index", modifier = Modifier.padding(16.dp))
                }
            }
        }
    }
}

如果使用Scaffold，也可以直接通过contentWindowInsets参数配置：

Scaffold(
    contentWindowInsets = WindowInsets.ime,
    modifier = Modifier.fillMaxSize().background(Color.YourPageBackground)
) { innerPadding ->
    LazyColumn(modifier = Modifier.padding(innerPadding)) {
        items(100) { index ->
            Text("Item $index", modifier = Modifier.padding(16.dp))
        }
    }
}

总结 #

优先选择Compose原生的WindowInsets处理方案，既能完美解决键盘遮挡问题，又能避免原生View带来的闪屏问题；如果需要保留原有原生代码，同步设置android.R.id.content的背景色与页面一致即可快速解决闪屏。

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