ViewPager2嵌入可兼作BottomSheet的DialogFragment背景变暗如何解决？

问题根因 #

DialogFragment默认showsDialog属性为true，会自动创建弹窗并附带暗色蒙层。手动执行replace事务时，DialogFragment检测到自身被添加到指定布局容器中，会自动将showsDialog置为false，不会触发弹窗逻辑；而FragmentStateAdapter的内部加载逻辑未触发该自动判断，因此依然创建了弹窗导致出现蒙层。

解决方案 #

通过显式设置showsDialog属性从根源控制DialogFragment的展示模式，避免多余的弹窗创建逻辑：

1. 新增模式参数，分别提供两种场景的实例化方法
2. 初始化时根据参数配置showsDialog属性

修改后的代码如下：

private val mViewModel: CardPricesViewModel by viewModels()
private val binding by viewBinding(FragmentCardDetailPricesBinding::inflate)

companion object {
    const val ARG_SKU_IDS = "skuIds"
    private const val ARG_IS_DIALOG_MODE = "is_dialog_mode"

    // 作为普通嵌入页面（ViewPager/事务加载）使用时调用
    fun newInstanceAsEmbed(skus: List<Long>?) = CardDetailPricesFragment().apply {
        arguments = Bundle().apply {
            putLongArray(ARG_SKU_IDS, skus?.toLongArray())
            putBoolean(ARG_IS_DIALOG_MODE, false)
        }
    }

    // 作为BottomSheet弹窗使用时调用
    fun newInstanceAsDialog(skus: List<Long>?) = CardDetailPricesFragment().apply {
        arguments = Bundle().apply {
            putLongArray(ARG_SKU_IDS, skus?.toLongArray())
            putBoolean(ARG_IS_DIALOG_MODE, true)
        }
    }
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 根据场景配置是否启用弹窗模式
    showsDialog = arguments?.getBoolean(ARG_IS_DIALOG_MODE, true) ?: true
}

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
    return binding.root
}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    // 原有逻辑保持不变
}

补充说明 #

你之前在onViewCreated后调用dismiss()属于临时规避方案，本质是销毁已经创建的多余弹窗，会带来不必要的性能消耗，极端场景可能出现弹窗闪烁，推荐使用上述显式控制模式的方案。

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