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

Question

例如，我在应用程序中使用了带有Compose LazyColumn代码的MyBottomSheetDialogFragment:

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

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

如何在BottomSheetDialogFragment中正确实现LazyColumn？

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

Answer 1

您应该使用BottomSheetScaffold并将SheetContent与您的底部工作表内容一起设置。不要使用BottomSheetDialogFraank。

下面是一个底层脚手架的基本结构示例:

    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
    }