Jetpack Compose Material 实现自适应布局稳定版本已发布！

随着移动设备、平板电脑和桌面设备的普及，适应不同屏幕尺寸和窗口状态的应用程序布局变得至关重要。在 Android 开发中，Jetpack Compose Material 通过最新发布的自适应布局 API 为开发者提供了构建灵活响应式 UI 的能力。本文将介绍如何使用该 API 实现自适应布局，帮助你快速构建支持各种设备屏幕尺寸的应用程序。

什么是自适应布局？

自适应布局是指应用程序 UI 能够根据设备的屏幕尺寸、方向和窗口状态，自动调整其显示内容和布局方式。对于手机和大屏设备（如平板和桌面设备），用户界面应具备灵活性，以确保在不同窗口大小下的用户体验一致性。

Jetpack Compose 的 Material 自适应布局 API 提供了多个预定义的布局和工具，帮助开发者轻松应对这一挑战。

Compose Material 自适应布局的核心组件

在使用 Jetpack Compose Material 的自适应布局时，开发者可以依赖一系列已经提供好的组件来快速适应多窗格（Multi-pane）布局。以下是核心的三个 Scaffold 组件：

1. NavigationSuiteScaffold: 适用于需要导航功能的应用，它能根据窗口大小自动调整布局。
2. ListDetailPaneScaffold: 适用于需要同时展示列表和详情的场景，在大屏设备上能够并排展示两个窗格，而在小屏设备上则根据需要切换显示。
3. SupportingPaneScaffold: 主要用于侧边栏或辅助面板布局，适合在多窗格界面中展示辅助功能或操作。
   这些 Scaffold 组件具备开箱即用的自适应特性，它们可以根据窗口大小自动选择最合适的布局方式。

如何使用自适应组件构建 UI

NavigationSuiteScaffold 的示例

以下是一个使用 NavigationSuiteScaffold 的简单示例。通过使用该组件，可以轻松构建一个支持不同屏幕大小和方向的导航界面。

val navigator = rememberListDetailPaneScaffoldNavigator()

NavigableListDetailPaneScaffold(
navigator = navigator,
listPane = {
// 左侧的列表内容
},
detailPane = {
// 右侧的详细内容
},
)
这个代码示例展示了一个典型的列表-详情布局，当屏幕足够大时，左侧显示列表，右侧显示详情。在小屏设备上，它则会自动调整为单窗格显示，当用户选择某一项时，显示详情视图。

Phone布局

拖动后布局

宽屏布局
自定义行为与状态管理

尽管默认的自适应行为足够满足大部分场景的需求，但有时我们希望进一步自定义。例如，通过自定义 BackHandler，你可以手动处理设备的返回操作，甚至在不同屏幕大小时对返回行为做不同处理。

BackHandler(
enabled = navigator.canNavigateBack(BackNavigationBehavior.PopUntilContentChange)
) {
navigator.navigateBack(BackNavigationBehavior.PopUntilContentChange)
}
这个代码段展示了如何在 NavigableListDetailPaneScaffold 中自定义返回操作。当应用在大屏幕上显示时，用户按下返回按钮将回到列表，而在小屏幕上，返回按钮的行为可能会回到上一页。

自定义窗格布局

ListDetailPaneScaffold 组件可以根据窗口大小自动调整窗格数量，开发者还可以通过计算窗口自适应信息来自定义不同的布局策略。以下示例展示了如何在中等屏幕宽度下显示两个窗格：

val navigator = rememberListDetailPaneScaffoldNavigator(
scaffoldDirective = calculatePaneScaffoldDirectiveWithTwoPanesOnMediumWidth(currentWindowAdaptiveInfo()),
adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies(),
)
在这个示例中， calculatePaneScaffoldDirectiveWithTwoPanesOnMediumWidth 控制了中等宽度的设备上展示两个窗格。这在需要更加高效利用屏幕空间的场景中非常有用。

多层抽象与自定义实现

自适应布局 API 分为多个层次的依赖，每一层提供不同的抽象级别，允许开发者根据需求选择合适的层次进行使用。比如，开发者可以选择使用较高层次的 NavigationSuiteScaffold，也可以使用较低层次的 ListDetailPaneScaffold 来获取更多自定义控制。

以下是主要依赖库的介绍：

• androidx.compose.material3.adaptive: 包含计算当前窗口自适应信息的底层方法。
• androidx.compose.material3.adaptive-layout: 包含多窗格布局的 Scaffold 组件，例如 ListDetailPaneScaffold 和 SupportingPaneScaffold。
• androidx.compose.material3.adaptive-navigation: 提供了导航相关的 API，例如 rememberListDetailPaneScaffoldNavigator。
  开发者可以根据实际需求选择合适的依赖层次。如果使用的是自定义导航解决方案，可以跳过 adaptive-navigation 依赖，直接使用 adaptive-layout 进行布局控制。

自适应布局libs依赖图
结论

Jetpack Compose Material 自适应布局 API 为开发者提供了强大的工具，帮助他们轻松构建适应不同屏幕尺寸和窗口状态的 UI。通过使用预定义的 Scaffold 组件，你可以快速实现多窗格布局，并根据需要自定义行为和布局方式。该库的多层抽象设计允许开发者根据需求自由选择使用的抽象级别，从而实现更加灵活的 UI 设计。

在构建复杂的多设备兼容应用时，Compose Material 自适应布局 API 是一个不可或缺的工具，值得每个 Android 开发者深入探索。

参考资料

• 官方文档: https://developer.android.com/develop/ui/compose/layouts/adaptive
• Compose 架构: https://developer.android.com/develop/ui/compose/layering
• compose-material3-adaptive Release 说明: https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive