Jetpack Compose中decorFitsSystemWindows为false时Popup无法全屏显示

问题背景 #

我们在Android平台使用Jetpack Compose开发功能，需要全屏显示带背景模糊的遮罩，同时设置透明区域来突出并讲解部分UI组件。采用Popup与Canvas API结合实现，已将decorFitsSystemWindows设为false，但功能存在一处UI问题：Popup无法占据全屏高度，屏幕底部会留有空白区域，红色遮罩无法完全覆盖全屏。

原示例代码 #

class MainActivity : ComponentActivity() {
  @OptIn(ExperimentalComposeUiApi::class)
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
      WindowCompat.setDecorFitsSystemWindows(window, false)

      val configuration = LocalConfiguration.current
      val screenHeight = configuration.screenHeightDp.dp
      val screenWidth = configuration.screenWidthDp.dp

      val statusBarHeightDp = WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
      val totalHeight = screenHeight + statusBarHeightDp

      val cornerRadius = CornerRadius(16f)

      val properties = PopupProperties(
        clippingEnabled = false,
        usePlatformDefaultWidth = false)

      Popup(
        properties = properties){
        Canvas(
          modifier = Modifier
            .fillMaxSize()
            .clickable {
            },
          onDraw = {
            val spotlightPath = Path().apply {
              addRoundRect(
                RoundRect(
                  rect = Rect(
                    offset = Offset(16f, 987f),
                    size = Size(1048f, 512f),
                  ),
                  cornerRadius = cornerRadius
                )
              )
            }
            clipPath(
              path = spotlightPath,
              clipOp = ClipOp.Difference
            ) {
              drawRect(
                brush = SolidColor(Color.Red),
                size = Size(screenWidth.toPx(), totalHeight.toPx())
              )
            }
          }
        )
      }
    }
  }
}

问题原因分析 #

• 屏幕高度计算错误：configuration.screenHeightDp获取的是系统栏（状态栏、导航栏）排除后的可用高度，再叠加状态栏高度会导致总高度计算偏差，且完全忽略了导航栏的高度，最终绘制的红色矩形高度不足以覆盖全屏。
• Popup未处理系统栏Insets：即使全局设置了decorFitsSystemWindows=false，Popup内部的Modifier.fillMaxSize()默认不会延伸到导航栏区域，导致底部被留白。
• 手动指定绘制尺寸：硬编码的绘制尺寸和Canvas实际可用尺寸不匹配，进一步加剧了底部留白问题。

解决方案 #

1. 修正全局设置位置 #

将WindowCompat.setDecorFitsSystemWindows(window, false)移到setContent外部，确保全局窗口配置生效。

2. 让Popup内容延伸至系统栏 #

给Canvas添加windowInsetsPadding(WindowInsets.systemBars)修饰符，强制内容覆盖状态栏和导航栏区域。

3. 使用Canvas自身尺寸绘制 #

放弃手动计算屏幕尺寸，直接使用Canvas的size属性进行绘制，保证尺寸完全匹配。

修正后的代码 #

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalComposeUiApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 全局设置，移到setContent外确保生效
        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            val cornerRadius = CornerRadius(16f)

            val properties = PopupProperties(
                clippingEnabled = false,
                usePlatformDefaultWidth = false
            )

            Popup(properties = properties) {
                Canvas(
                    modifier = Modifier
                        .fillMaxSize()
                        // 让内容延伸覆盖状态栏和导航栏
                        .windowInsetsPadding(WindowInsets.systemBars)
                        .clickable {},
                    onDraw = {
                        val spotlightPath = Path().apply {
                            addRoundRect(
                                RoundRect(
                                    rect = Rect(
                                        offset = Offset(16f, 987f),
                                        size = Size(1048f, 512f),
                                    ),
                                    cornerRadius = cornerRadius
                                )
                            )
                        }
                        clipPath(
                            path = spotlightPath,
                            clipOp = ClipOp.Difference
                        ) {
                            // 使用Canvas自身尺寸绘制，无需手动计算
                            drawRect(brush = SolidColor(Color.Red), size = this.size)
                        }
                    }
                )
            }
        }
    }
}

额外优化提示 #

如果需要实现背景模糊效果（而非示例中的红色遮罩），可以在API 31及以上版本使用BlurEffect：

// 替换drawRect部分
drawRect(
    brush = Brush.backwardCompatibleBlur(
        radius = 16.dp.toPx(),
        edgeTreatment = BlurredEdgeTreatment.Unbounded
    ),
    size = this.size
)

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