Compose Dialog在三星等设备显示全屏问题求助

问题原因 #

基础Dialog组件的默认布局行为依赖系统Window参数，部分厂商（如三星）的系统未给Dialog施加默认宽度限制，导致fillMaxWidth()会让内容铺满整个屏幕，而Pixel等设备的系统默认做了宽度约束。

解决思路 #

• 显式设置最大宽度
  给Dialog的内容容器添加maxWidth修饰符，指定固定DP值或相对屏幕宽度的比例，强制限制Dialog宽度：

  Dialog(
      onDismissRequest = { },
      properties = DialogProperties(
          dismissOnBackPress = false,
          dismissOnClickOutside = false
      )
  ) {
      Box(
          modifier = Modifier
              .fillMaxWidth()
              .maxWidth(320.dp) // 可根据需求调整该值
              .background(MaterialTheme.colorScheme.background)
      ) { /* 内容区域 */ }
  }
  

• 使用AlertDialog替代基础Dialog
  AlertDialog是Compose封装好的组件，内部已处理不同设备的宽度适配逻辑，默认会保持合理的最大宽度：

  AlertDialog(
      onDismissRequest = { },
      properties = DialogProperties(
          dismissOnBackPress = false,
          dismissOnClickOutside = false
      ),
      text = {
          Box(
              modifier = Modifier.background(MaterialTheme.colorScheme.background)
          ) { /* 内容区域 */ }
      },
      confirmButton = {} // 无确认按钮时留空，或设为null
  )
  

• 动态适配屏幕宽度
  通过LocalConfiguration获取屏幕宽度，设置Dialog最大宽度为屏幕的比例值（比如80%），适配不同尺寸设备：

  val configuration = LocalConfiguration.current
  val screenWidth = configuration.screenWidthDp.dp
  val maxDialogWidth = screenWidth * 0.8f
  
  Dialog(
      onDismissRequest = { },
      properties = DialogProperties(
          dismissOnBackPress = false,
          dismissOnClickOutside = false
      )
  ) {
      Box(
          modifier = Modifier
              .fillMaxWidth()
              .maxWidth(maxDialogWidth)
              .background(MaterialTheme.colorScheme.background)
      ) { /* 内容区域 */ }
  }
  

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