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