Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scroll issue with LazyColumn inside BottomSheetDialogFragment

I use LazyColumn inside BottomSheetDialogFragment, but if to scroll LazyColumn list UP then Bottom Sheet Dialog scrolls instead of LazyColumn list. Seems like BottomSheetDialogFragment intercepts user touch input.

That's how it looks:

How to properly use LazyColumn inside BottomSheetDialogFragment?

MyBottomSheetDialogFragment.kt:

class MyBottomSheetDialogFragment : BottomSheetDialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text("Header", color = Color.Black)
                    LazyColumn(
                        Modifier
                            .weight(1f)
                            .fillMaxWidth()) {
                        items(100) {
                            Text("Item $it", Modifier.fillMaxWidth(), Color.Black)
                        }
                    }
                }
            }
        }
    }
}

And show it using this code:

MyBottomSheetDialogFragment().show(activity.supportFragmentManager, null)

When we used the XML RecyclerView list, to fix this issue we had to wrap the RecyclerView list with NestedScrollView like described here, but how to fix it with Jetpack Compose?

like image 935
Mike Avatar asked Sep 12 '25 02:09

Mike


1 Answers

Since compose 1.2.0-beta01 problem can be solved by using rememberNestedScrollInteropConnection:

Modifier.nestedScroll(rememberNestedScrollInteropConnection())

In my case BottomSheetDialogFragment is standard View and it has ComposeView with id container. In onViewCreated I do:

binding.container.setContent {
    AppTheme {
        Surface(
            modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection())
        ) {
            LazyColumn {
                // ITEMS
            }
        }
    }
}

And now the list is scrolling in a correct way.

like image 79
iknow Avatar answered Sep 14 '25 17:09

iknow