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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With