锁定屏幕为横向时状态栏变为灰色背景

Question

在我的 Angular 应用程序中，我使用 Capacitor 和 此插件 在使用 Angular YouTube 播放器播放视频时将方向旋转为横向。当视图旋转时，状态栏会按预期移动到页面顶部，但是（现在位于设备的左侧）状态栏曾经的背景颜色已更改为灰色。

欣赏这位艺术家的演绎：

我主要在播放 YouTube 视频时使用方向，因此我的组件会检查视频是否正在播放，然后将屏幕锁定为横向：

if (this.playerIsPlaying) {
  window.screen.orientation.lock('landscape');
  StatusBar.hide();
} else {
  window.screen.orientation.lock('portrait');
  StatusBar.show();
}

Answer 1

如果有人遇到过这一点，答案是：

<item name="android:background">#000000</item>

，我将颜色值设置为

@null

。将其更改为黑色修复了我的背景颜色差异。

Answer 2

我还必须在

AppTheme.NoActionBar

中添加一个

styles.xml

，否则状态栏颜色会延伸到黑色竖条中，看起来很奇怪。

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
    ...
    <item name="android:windowLayoutInDisplayCutoutMode">default</item>
</style>