如何在 Material 3 Jetpack Compose 中实现 BottomSheet Android

Question

我知道如何使用 BottomSheetScaffold 在 Material 2 Jetpack Compose 中实现BottomSheetScaffold 。

但是Material 3中并没有BottomSheetScaffold 。另外，官方样本中也没有任何关于BottomSheet的内容。

Answer 1

所以我能够让它发挥作用！

看来，截至今天， BottomSheetScaffold在 Material3 上尚不可用，我在这个问题中对此进行了讨论： https://issuetracker.google.com/issues/229839039

我引用了谷歌开发人员回复中的重要部分：

我们在 Swipeable 方面并不容易。 它目前有许多需要首先解决的严重错误（我们正在努力解决这个问题），这就是为什么我们暂时限制我们在 M3 中为 Swipeable 公开的表面。 我们未来几个月的计划是专注于这一特定领域并改善开发人员体验。

Jetpack Compose 的 Material 3 仍处于 alpha 阶段——这意味着我们考虑组件生产就绪，但 API 形状在 alpha 阶段是灵活的。 这为我们提供了迭代空间，同时从开发人员那里获得真实世界的反馈，最终有助于改善您的体验。 同时，为未（完全）实现或在 alpha 版本中公开的组件复制粘贴源代码可能是一件好事！ 在 API 形状仍然灵活的情况下拥有源代码可为您带来许多好处，例如即使 API 发生变化也可以轻松更新依赖项，并允许您按照自己的步调发展组件。

所以我只是听从了建议，并将粘贴的BottomSheetScaffold复制到我的项目中。 当然，由于缺少一些类和一些小的 API 更改，它并没有立即工作。 最后，我能够通过提取和修改以下类并将它们添加到我的项目中来使其工作：

• BottomSheetScaffold.kt
• Drawer.kt
• Strings.kt
• Swipeable.kt

如果您想尝试，我已经用源代码创建了一个要点： https://gist.github.com/Marlinski/0b043968c2f574d70ee6060aeda54882

您必须更改导入以使其适用于您的项目，并通过将以下内容添加到您的 gradle 文件的android{}部分来添加"-Xjvm-default=all"选项：

android{ 
   ...
   kotlinOptions {
        freeCompilerArgs += ["-Xjvm-default=all"]

        // "-Xjvm-default=all" option added because of this error:
        // ... Inheritance from an interface with '@JvmDefault' members is only allowed with -Xjvm-default option
        // triggered by porting BottomSheetScaffold for Material3 on Swipeable.kt:844
   }
}

它对我来说效果很好，将保留这个解决方案，直到它在 material3 中得到正式支持。

希望能帮助到你！

Answer 2

我使用带有 AnimatedVisibility 的全屏对话框得到了非常相似的结果，如果有兴趣，这里是代码：

// Visibility state for the dialog which will trigger it only once when called
val transitionState = remember {
    MutableTransitionState(false).apply {
        targetState = true
    }
}

Dialog(
    onDismissRequest = { // You can set a visibility state variable to false in here which will close the dialog when clicked outside its bounds, no reason to when full screen though },
    properties = DialogProperties(
        // This property makes the dialog full width of the screen
        usePlatformDefaultWidth = false
    )
) {

    // Visibility animation, more information in android docs if needed
    AnimatedVisibility(
        visibleState = transitionState,
        enter = slideInVertically(
            initialOffsetY = { it },
            animationSpec = ...
        ),
        exit = slideOutVertically(
            targetOffsetY = { it },
            animationSpec = ...
        )
    )
) {

    Box(
        modifier = Modifier.fillMaxSize().background(color = ...)
    ) {
        // Your layout

        // This can be any user interraction that closes the dialog
        Button(
            transitionState.apply { targetState = false }
        ) ...
    }
}

所有这些都在一个可组合的 function 中，当执行打开所述对话框的 UI 操作时调用它，它并不理想，但它可以工作。

希望我能提供帮助！

Answer 3

Marlinski已经给出了一个很好的答案，但我想补充一点，还有一个ModalBottomSheetLayout也没有任何 Material 3 的实现。

我为现在需要它的人创建了一个要点： https://gist.github.com/Pasha831/bdedcfee01acdc96cf3ae643da64f88a