BottomSheetDialogFragment 内的 LazyColumn 滚动问题

Question

我在BottomSheetDialogFragment中使用LazyColumn ，但是如果向上滚动LazyColumn列表，那么Bottom工作表对话框将滚动而不是LazyColumn列表。 似乎BottomSheetDialogFragment拦截了用户触摸输入。

这就是它的样子：

如何在BottomSheetDialogFragment中正确使用LazyColumn ？

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)
                        }
                    }
                }
            }
        }
    }
}

并使用此代码显示它：

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

当我们使用 XML RecyclerView列表时，为了解决这个问题，我们必须像这里描述的那样用NestedScrollView包装RecyclerView列表，但是如何用 Jetpack Compose 修复它呢？

Answer 1

由于 compose 1.2.0-beta01问题可以通过使用rememberNestedScrollInteropConnection来解决：

Modifier.nestedScroll(rememberNestedScrollInteropConnection())

在我的例子中， BottomSheetDialogFragment是标准View ，它有ComposeView和 id container 。 在onViewCreated我做的：

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

现在列表以正确的方式滚动。

Answer 2

如果您在启动底部工作表对话框片段的 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.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)

Answer 3

你可以试试这个https://gist.github.com/chrisbanes/053189c31302269656c1979edf418310 。

这是https://issuetracker.google.com/issues/174348612的解决方法，这意味着 Compose 中的嵌套滚动布局不能作为视图系统中的嵌套滚动子项工作。

您的案例中的示例用法：

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)
                        }
                    }
                }
            }
        }
    }
}