如何在 BottomSheetDialogFragment 中正确使用 Jetpack Compose？

Question

例如，我在应用程序中有 MyBottomSheetDialogFragment 和 Compose LazyColumn 代码：

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)

这就是我们所拥有的：

MyBottomSheetDialogFragment 屏幕图像.jpg

现在，如果向下滚动 LazyColumn 列表，则一切都会正常工作，但如果向上滚动 LazyColumn 列表，则底部工作表对话框将滚动，而不是 LazyColumn 列表。

如何在 BottomSheetDialogFragment 中正确实现 LazyColumn？

当我们使用 XML RecyclerView 列表时，要解决此问题，我们必须使用 NestedScrollView 包装 RecyclerView 列表，如此处所述，但是如何使用 Jetpack Compose 修复它？

Answer 1

您应该使用 a并将与底部工作表内容一起BottomSheetScaffold设置。sheetContent不要使用 BottomSheetDialogFragment。

下面是 BottomSheetScaffold 基本结构的示例：

    val scaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = rememberBottomSheetState(BottomSheetValue.Expanded)
    )

    BottomSheetScaffold(
        modifier = Modifier.navigationBarsPadding(),
        scaffoldState = scaffoldState,
        topBar = {
            // Your topBar
        },
        sheetShape = BottomSheetShape,
        sheetPeekHeight = MaterialTheme.spacing.large,
        sheetContent = {
            // Your sheet content
        }
    ) { innerPadding ->
      // You content
    }