Jetpack Compose与BottomSheetDialogFragment联动滚动冲突问题求助

你遇到的问题根源是BottomSheetDialogFragment底层的BottomSheetBehavior会优先拦截向下触摸事件来触发BottomSheet收起，导致Compose的滚动组件还没完成自身滚动到顶部的操作，就被BottomSheet抢了事件。下面是两种可行的解决方案：

方案一：拦截BottomSheet触摸事件，按需传递 #

通过修改BottomSheet的触摸事件处理逻辑，只有当Compose内容已经滚动到顶部时，才允许BottomSheet响应下拉操作：

class MyBottomSheet : BottomSheetDialogFragment() {
    private lateinit var scrollState: ScrollState

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = super.onCreateDialog(savedInstanceState)
        dialog.setOnShowListener {
            val bottomSheet = dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
            bottomSheet.setOnTouchListener { v, event ->
                // 仅当内容已滚到顶部时，才让BottomSheet处理下拉收起
                if (scrollState.value == 0 && event.action == MotionEvent.ACTION_DOWN) {
                    false
                } else {
                    // 阻止BottomSheet拦截事件，让Compose处理滚动
                    v.parent.requestDisallowInterceptTouchEvent(true)
                    false
                }
            }
        }
        return dialog
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?,
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                MyTheme(colors = getThemeColor()) {
                    scrollState = rememberScrollState()
                    MyBottomSheetScreen(scrollState = scrollState)
                }
            }
        }
    }
}

@Composable
fun MyBottomSheetScreen(
    scrollState: ScrollState,
    onBackPressed: () -> Unit = {}
) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.9F),
        shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
        color = MyTheme.colors.surface
    ) {
        Column(
            modifier = Modifier.verticalScroll(scrollState),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            content()
        }
    }
}

方案二：用Compose嵌套滚动机制控制事件流向 #

利用Compose的NestedScrollConnection，在内容滚到顶部且向下滚动时，把事件交给父布局（BottomSheet）处理：

@Composable
fun MyBottomSheetScreen(
    onBackPressed: () -> Unit = {}
) {
    val scrollState = rememberScrollState()
    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                // 向下滚动且已到顶部时，不消费事件，让BottomSheet处理收起
                if (source == NestedScrollSource.Drag && available.y > 0 && scrollState.value == 0) {
                    return Offset.Zero
                }
                return Offset.Zero
            }
        }
    }

    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.9F)
            .nestedScroll(nestedScrollConnection), // 绑定嵌套滚动逻辑
        shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
        color = MyTheme.colors.surface
    ) {
        Column(
            modifier = Modifier.verticalScroll(scrollState),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            content()
        }
    }
}

方案对比 #

• 方案一适合需要更精细控制BottomSheet行为的场景（比如自定义收起阈值），但需要在Fragment和Compose之间传递滚动状态。
• 方案二更贴合Compose原生滚动机制，代码简洁，不需要跨层状态传递，推荐优先尝试。

内容的提问来源于stack exchange，提问作者dev.farmer