构建列表详情布局

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'

• 自适应：低级构建块，例如 HingeInfo 和 Posture
• adaptive-layout：ListDetailPaneScaffold 和 SupportingPaneScaffold 等自适应布局
• adaptive-navigation：用于在窗格内和窗格之间导航的可组合项，以及默认支持导航的自适应布局，例如 NavigableListDetailPaneScaffold 和 NavigableSupportingPaneScaffold

确保您的项目包含 compose-material3-adaptive 1.1.0-beta1 版或更高版本。

选择启用预测性返回手势

如需在 Android 15 或更低版本中启用预测性返回动画，您必须选择启用预测性返回手势。如需启用新样式，请将 android:enableOnBackInvokedCallback="true" 添加到 AndroidManifest.xml 文件中的 <application> 标记或各个 <activity> 标记。如需了解详情，请参阅选择启用预测性返回手势。

当您的应用以 Android 16（API 级别 36）或更高版本为目标平台后，系统会默认启用预测性返回。

基本用法

按如下方式实现 NavigableListDetailPaneScaffold：

1. 使用表示所选内容的类。使用 Parcelable 类支持保存和恢复所选列表项。使用 kotlin-parcelize 插件为您生成代码。
2. 使用 rememberListDetailPaneScaffoldNavigator 创建 ThreePaneScaffoldNavigator。

此导航器用于在列表、详情和其他窗格之间移动。通过声明通用类型，导航器还会跟踪框架的状态（即正在显示哪个 MyItem）。由于此类型是可分块的，因此导航器可以保存和恢复状态，以自动处理配置更改。

1. 将导航器传递给 NavigableListDetailPaneScaffold 可组合项。

2. 向 NavigableListDetailPaneScaffold 提供列表窗格实现。使用 AnimatedPane 在导航期间应用默认窗格动画。然后，使用 ThreePaneScaffoldNavigator 导航到详情窗格 ListDetailPaneScaffoldRole.Detail，并显示传递的项。

3. 在 NavigableListDetailPaneScaffold 中添加详情窗格实现。

导航完成后，currentDestination 将包含应用导航到的窗格，包括窗格中显示的内容。contentKey 属性与原始调用中指定的类型相同，因此您可以访问需要显示的任何数据。

1. （可选）更改 NavigableListDetailPaneScaffold 中的 defaultBackBehavior。默认情况下，NavigableListDetailPaneScaffold 会为 defaultBackBehavior 使用 PopUntilScaffoldValueChange。

如果您的应用需要其他返回导航模式，您可以通过指定其他 BackNavigationBehavior 选项来替换此行为。

BackNavigationBehavior 个选项

以下部分使用电子邮件应用的示例，其中一个窗格中显示电子邮件列表，另一个窗格中显示详细视图。

PopUntilScaffoldValueChange（默认值，在大多数情况下推荐使用）

此行为主要关注对整体布局结构所做的更改。在多窗格设置中，更改详情窗格中的电子邮件内容不会改变底层布局结构。因此，返回按钮可能会退出应用或当前导航图，因为当前上下文中没有可恢复的布局更改。在单窗格布局中，按返回键会跳过详情视图中的内容更改，并返回到列表视图，因为这代表了明确的布局更改。

请参考以下示例：

• 多窗格：您在详情窗格中查看电子邮件（项目 1）。点击另一封电子邮件（第 2 项）会更新详情窗格，但列表和详情窗格仍会显示。按返回键可能会退出应用或当前导航流程。
• 单窗格：您查看“项目 1”，然后查看“项目 2”，按返回键会直接返回电子邮件列表窗格。

如果您希望用户在每次返回操作时感知到不同的布局过渡，请使用此属性。

PopUntilContentChange

此行为会优先显示内容。如果您先查看了项 1，然后查看了项 2，那么无论布局如何，按返回键都会返回到项 1。

请参考以下示例：

• 多窗格：您在详情窗格中查看项目 1，然后点击列表中的项目 2。“详细信息”窗格会更新。按返回键会将详情窗格恢复为“项 1”。
• 单窗格：会发生相同的内容还原。

如果用户希望通过返回操作返回之前查看的内容，请使用此属性。

PopUntilCurrentDestinationChange

此行为会弹出返回堆栈，直到当前导航目的地发生变化。这同样适用于单窗格和多窗格布局。

请参考以下示例：

无论您使用的是单窗格布局还是多窗格布局，按返回键始终会将焦点从突出显示的导航元素移至上一个目的地。在我们的电子邮件应用中，这意味着所选窗格的视觉指示将发生变化。

如果保持对当前导航的清晰视觉指示对用户体验至关重要，请使用此属性。

PopLatest

此选项只会从返回堆栈中移除最近一个目的地。使用此选项可返回导航，而不会跳过中间状态。

实现这些步骤后，您的代码应如下所示：

val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
val scope = rememberCoroutineScope()

NavigableListDetailPaneScaffold(
    navigator = scaffoldNavigator,
    listPane = {
        AnimatedPane {
            MyList(
                onItemClick = { item ->
                    // Navigate to the detail pane with the passed item
                    scope.launch {
                        scaffoldNavigator.navigateTo(
                            ListDetailPaneScaffoldRole.Detail,
                            item
                        )
                    }
                },
            )
        }
    },
    detailPane = {
        AnimatedPane {
            // Show the detail pane content if selected item is available
            scaffoldNavigator.currentDestination?.contentKey?.let {
                MyDetails(it)
            }
        }
    },
)
SampleListDetailPaneScaffold.kt