当 Admob 的 Interstitial 在 Jetpack Compose 中显示时，Activity 的内容会跳转到状态栏下方

Question

这是使用 Jetpack Compose 创建的空活动的默认示例，只需用按钮替换文本即可显示全屏广告（Admob 插页式广告）

类 MainActivity : ComponentActivity() { private var interstitialAd：InterstitialAd？ = 空

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ... load ad 

    enableEdgeToEdge()
    setContent {
        AppTheme {
            Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                Column(
                    modifier = Modifier.padding(innerPadding)
                ) {
                    Button(onClick = {
                        interstitialAd?.show(this@MainActivity)
                    }) {
                        Text(
                            text = "Show fullscreen ad"
                        )
                    }
                }
            }
        }
    }
}

在按下按钮之前，UI 看起来不错（如预期）：

但是当我点击按钮显示广告时，应用程序活动的内容会跳转到状态栏下方：

这很烦人。我在我的实际项目中也遇到了这个问题，我也使用 Jetpack Compose。

我们需要使用

enableEdgeToEdge()

或

WindowCompat.setDecorFitsSystemWindows(window, false)

才能使用 Jetpack Compose 而不是主题/样式 xml 绘制系统栏的背景。

出现在应用程序自身活动上方的任何活动都会出现此问题，例如：

1. 当出现带有应用程序选择器的对话框时：

   context.startActivity(Intent.createChooser(...))

2. Google Play 应用程序评论：

   reviewManager.launchReviewFlow(activity, reviewInfo)

等等

修复它的最佳方法是什么？

Answer 1

你应该使用WindowInsets.displayCutout 像这样

Scaffold() { innerPadding ->
            Column(
                modifier = Modifier
                      .fillMaxSize()
                      .padding(innerPadding) 
.windowInsetsPadding(your'sWindowInsets.union(WindowInsets.displayCutout))
            ) {
                Button(onClick = {
                    interstitialAd?.show(this@MainActivity)
                }) {
                    Text(
                        text = "Show fullscreen ad"
                    )
                }
            }
        }