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