在ComposeView+Fragment场景下，如何通过返回键/手势隐藏ModalBottomSheetLayout？

问题原因 #

在基于Navigation Graph的Fragment中，导航组件会优先拦截返回事件并处理Fragment的回退逻辑，导致Compose内置的BackHandler无法接收到返回触发信号，因此你的日志不会打印。

解决方案 #

方案1：在Fragment层拦截返回事件 #

直接在Fragment中注册返回回调，根据BottomSheet的展开状态决定是关闭弹窗还是执行导航回退：

class MyFragment : Fragment() {
    // 用于跟踪BottomSheet的展开状态
    private val isSheetExpanded = mutableStateOf(false)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 注册返回事件回调
        val backCallback = object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() {
                if (isSheetExpanded.value) {
                    // 通过协程通知Compose关闭BottomSheet
                    viewLifecycleOwner.lifecycleScope.launch {
                        // 这里需要和Compose中的sheetState关联，可通过状态提升实现
                        (view as? ComposeView)?.run {
                            findViewTreeLifecycleOwner()?.let { owner ->
                                // 示例：如果sheetState在Fragment中定义，直接调用hide
                                // sheetState.hide()
                            }
                        }
                    }
                } else {
                    // 交给导航组件处理返回
                    isEnabled = false
                    requireActivity().onBackPressedDispatcher.onBackPressed()
                    isEnabled = true
                }
            }
        }
        requireActivity().onBackPressedDispatcher.addCallback(this, backCallback)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View {
        // 将sheetState提升到Fragment层级，方便回调中操作
        val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)

        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // 监听BottomSheet状态变化，更新Fragment的跟踪状态
                LaunchedEffect(sheetState.currentValue) {
                    isSheetExpanded.value = sheetState.currentValue == ModalBottomSheetValue.Expanded
                }

                ModalBottomSheetLayout(
                    sheetState = sheetState,
                    sheetContent = {
                        // 底部弹窗内容
                        Text("我是底部弹窗")
                    }
                ) {
                    // 主内容区
                    Button(onClick = {
                        viewLifecycleOwner.lifecycleScope.launch {
                            sheetState.show()
                        }
                    }) {
                        Text("打开底部弹窗")
                    }
                }
            }
        }
    }
}

方案2：在Compose中手动绑定返回调度器 #

通过LocalOnBackPressedDispatcher直接注册回调，确保仅当BottomSheet展开时处理返回事件：

class MyFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
                val backDispatcher = LocalOnBackPressedDispatcher.current

                // 监听BottomSheet状态，动态注册/注销返回回调
                LaunchedEffect(sheetState.currentValue) {
                    val callback = object : OnBackPressedCallback(sheetState.currentValue == ModalBottomSheetValue.Expanded) {
                        override fun handleOnBackPressed() {
                            // 关闭BottomSheet
                            launch {
                                sheetState.hide()
                                // 关闭后禁用回调，让导航处理后续返回
                                isEnabled = false
                            }
                        }
                    }
                    backDispatcher?.addCallback(callback)
                    // 组件销毁时移除回调
                    onDispose {
                        callback.remove()
                    }
                }

                ModalBottomSheetLayout(
                    sheetState = sheetState,
                    sheetContent = {
                        Text("我是底部弹窗")
                    }
                ) {
                    Button(onClick = {
                        viewLifecycleOwner.lifecycleScope.launch {
                            sheetState.show()
                        }
                    }) {
                        Text("打开底部弹窗")
                    }
                }
            }
        }
    }
}

关键注意点 #

• 必须确保OnBackPressedCallback的isEnabled状态与BottomSheet的展开状态绑定，避免拦截不必要的返回事件。
• 若使用状态提升，需保证Fragment和Compose之间的状态同步，避免出现状态不一致的情况。

内容的提问来源于stack exchange，提问作者SURYA S R