ModalBottomSheetLayout内嵌LazyColumn滚动时底部弹窗关闭问题求解

使用Compose开发时，当滚动BottomSheet内的LazyColumn（或带verticalScroll修饰符的Column），ModalBottomSheet会意外触发关闭操作。以下是相关代码：

主页面代码 #

val navController = rememberNavController()
val sheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    skipHalfExpanded = true,
    confirmValueChange = { it ->
        Log.d("HomePageActivity", "SheetStateInside is $it")
        false
    },
)
val bottomSheetNavigator = remember { BottomSheetNavigator(sheetState) }
navController.navigatorProvider += bottomSheetNavigator
AppTheme {
    ModalBottomSheetLayout(
        bottomSheetNavigator = bottomSheetNavigator,
        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        sheetBackgroundColor = neutral5,
    ) {
        DestinationsNavHost(
            navController = navController,
            navGraph = NavGraphs.root,
            startRoute = AppChooserBottomSheetDestination,
            engine = rememberAnimatedNavHostEngine(),
        )
       }
}

BottomSheet内的LazyColumn代码 #

@Destination(style = DestinationStyleBottomSheet::class)
@Composable
fun AppChooserBottomSheet(
    navigator: DestinationsNavigator,
) {
        LazyColumn {
            repeat(100) {
                item {
                    Text(text = "App $it", style = MaterialTheme.typography.titleLarge, color = neutral100, modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp))
                    Log.d("HomePageActivity", "SheetStateAppChooser visible is $it")
                }
            }
        }
}

解决方法 #

问题根源是BottomSheet的手势与内部滚动组件的手势发生冲突，导致滚动时误触发BottomSheet的关闭逻辑。只需给LazyColumn添加nestedScroll修饰符，使用rememberNestedScrollInteropConnection()处理嵌套滚动即可解决：

修改后的BottomSheet代码：

@Destination(style = DestinationStyleBottomSheet::class)
@Composable
fun AppChooserBottomSheet(
    navigator: DestinationsNavigator,
) {
    // 创建嵌套滚动连接
    val nestedScrollConnection = rememberNestedScrollInteropConnection()
    
    LazyColumn(
        modifier = Modifier.nestedScroll(nestedScrollConnection)
    ) {
        repeat(100) {
            item {
                Text(
                    text = "App $it",
                    style = MaterialTheme.typography.titleLarge,
                    color = neutral100,
                    modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
                )
            }
        }
    }
}

如果使用的是带verticalScroll的Column，同样给Column添加该修饰符即可：

Column(
    modifier = Modifier
        .verticalScroll(rememberScrollState())
        .nestedScroll(nestedScrollConnection)
) {
    // 内容
}

内容的提问来源于stack exchange，提问作者nizam.sp