Compose Material 3 Adaptive 库正式发布

Compose Material 3 Adaptive 是一个旨在创建自适应用户界面（UI）的库，能够根据当前窗口大小或设备方向自动调整布局。该库已发布 1.0 版本，正式可用于生产环境中的应用。

主要功能与优势

Compose Material 3 Adaptive 库基于 Jetpack Compose 开发，帮助开发者更轻松地创建适用于多种设备形态的应用，包括折叠手机和壁挂式电视等。此外，它还支持在屏幕方向变化、分屏模式和自由窗口模式等配置变化时自动调整布局。

自适应 UI 的设计理念

自适应 UI 的核心思想是根据窗口大小使用不同的 UI 组件，以更好地利用可用空间。例如：

• 列表-详情布局：在较小的屏幕上，用户可以从列表导航到详情视图；而在较大的设备上，列表和详情视图可以同时显示。
• 支持面板布局：主内容区域占据大部分屏幕，支持面板可以显示或隐藏，用于展示次要内容区域。
• 导航栏与导航轨道：在紧凑的屏幕上使用底部导航栏，而在较大的窗口中使用垂直导航轨道。

提供的组件与 API

该库提供了多个组件和 API，帮助开发者创建自适应体验，并复用经过验证的解决方案，避免重复造轮子。主要组件包括：

• NavigationSuiteScaffold：根据应用窗口大小类在导航栏和导航轨道之间切换。
• ListDetailPaneScaffold：实现列表-详情布局，并根据应用窗口大小自动调整。
• SupportingPaneScaffold：实现支持面板的规范布局。

这些组件根据 Google 定义的规范布局（Canonical Layouts）透明地调整其显示的信息，从而将复杂行为封装在简单的声明中。例如，创建一个可导航的列表-详情布局只需几行代码：

val navigator = rememberListDetailPaneScaffoldNavigator<Any>()

NavigableListDetailPaneScaffold(
    navigator = navigator,
    listPane = {
        // List pane
    },
    detailPane = {
        // Detail pane
    },
)

自定义行为

如果需要自定义规范行为，开发者可以使用库提供的底层 API。例如，NavigableListDetailPaneScaffold 由 BackHandler 和 ListDetailPaneScaffold 组成，开发者可以直接调整后者，使其在较小的中等宽度窗口上也显示两个面板，或更改其适应不同窗口大小的策略。

支持替代输入设备

Compose Material 3 Adaptive 还帮助开发者添加对外部键盘、鼠标和触控笔等替代输入设备的支持。特别是，该库允许开发者无缝地在任何 TextField 组件中添加使用触控笔书写的功能。

总结

Compose Material 3 Adaptive 库的发布为开发者提供了强大的工具，帮助他们创建适应多种设备和屏幕尺寸的自适应 UI，同时简化了复杂布局的实现过程，并支持多种输入设备，提升了应用的灵活性和用户体验。