[英]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.我在
BottomSheetDialogFragment
中使用LazyColumn
,但是如果向上滚动LazyColumn
列表,那么Bottom
工作表对话框将滚动而不是LazyColumn
列表。 Seems like BottomSheetDialogFragment
intercepts user touch input.似乎
BottomSheetDialogFragment
拦截了用户触摸输入。
That's how it looks:这就是它的样子:
How to properly use LazyColumn
inside BottomSheetDialogFragment
?如何在
BottomSheetDialogFragment
中正确使用LazyColumn
?
MyBottomSheetDialogFragment.kt: 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?当我们使用 XML
RecyclerView
列表时,为了解决这个问题,我们必须像这里描述的那样用NestedScrollView
包装RecyclerView
列表,但是如何用 Jetpack Compose 修复它呢?
Since compose 1.2.0-beta01
problem can be solved by using rememberNestedScrollInteropConnection :由于 compose
1.2.0-beta01
问题可以通过使用rememberNestedScrollInteropConnection来解决:
Modifier.nestedScroll(rememberNestedScrollInteropConnection())
In my case BottomSheetDialogFragment
is standard View
and it has ComposeView
with id container
.在我的例子中,
BottomSheetDialogFragment
是标准View
,它有ComposeView
和 id container
。 In onViewCreated
I do:在
onViewCreated
我做的:
binding.container.setContent {
AppTheme {
Surface(
modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection())
) {
LazyColumn {
// ITEMS
}
}
}
}
And now the list is scrolling in a correct way.现在列表以正确的方式滚动。
If you're using compose within the activity that launched the bottom sheet dialog fragment, you might be better off simply sticking with a purely compose implementation and leveraging the compose equivalent bottom sheet component: ModalBottomSheetLayout如果您在启动底部工作表对话框片段的 Activity 中使用 compose,则最好坚持使用纯粹的 compose 实现并利用 compose 等效的底部工作表组件:ModalBottomSheetLayout
https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#ModalBottomSheetLayout(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material.ModalBottomSheetState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0) https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#ModalBottomSheetLayout(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material.ModalxBottomSheetState,android. ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)
You might give a try to this https://gist.github.com/chrisbanes/053189c31302269656c1979edf418310 .你可以试试这个https://gist.github.com/chrisbanes/053189c31302269656c1979edf418310 。
This is a workaround for https://issuetracker.google.com/issues/174348612 , which means that nested scrolling layouts in Compose do not work as nested scrolling children in the view system.
这是https://issuetracker.google.com/issues/174348612的解决方法,这意味着 Compose 中的嵌套滚动布局不能作为视图系统中的嵌套滚动子项工作。
Sample usage in your case:您的案例中的示例用法:
class MyBottomSheetDialogFragment : BottomSheetDialogFragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
return ComposeView(requireContext()).apply {
setContent {
Surface(
modifier = Modifier.nestedScroll(rememberViewInteropNestedScrollConnection())
){
LazyColumn(
Modifier
.weight(1f)
.fillMaxWidth()) {
items(100) {
Text("Item $it", Modifier.fillMaxWidth(), Color.Black)
}
}
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.