Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

標準版面配置

规范化布局是经过验证的通用型布局，可在各种规格的设备上提供最佳用户体验。

描绘了显示规范化布局的各种大屏设备。

规范化布局既支持小屏幕的手机，也支持平板电脑、可折叠设备和 ChromeOS 设备。此类布局遵循 Material Design 指南，不仅十分美观，而且功能强大。

Android 框架包含专门的组件，让您可以使用 View 和 Jetpack Compose 方便而可靠地实现此类布局。

借助规范化布局，您可以构建出引人注目且能提高效率的界面，为打造优秀的应用奠定基础。

列表详情

列表-详情布局的线框图。

借助列表详情布局，用户可以浏览包含描述性、解释性或其他补充信息（即“项详情”）的项列表。

该布局可将应用窗口分为两个并排显示的窗格：一个用于显示列表，另一个用于显示详情。用户从列表中选择要查看的项，即可显示对应的项详情。详情中的深层链接可以在详情窗格中显示更多内容。

较大宽度的显示屏（请参阅使用窗口大小类别）可同时容纳列表和详情。选择列表项后，详情窗格会更新，以显示所选项的相关内容。

中等宽度和紧凑宽度的显示屏可以显示列表或详情，具体取决于用户与应用的互动。如果只显示列表，当用户选择某个列表项时，对应的详情便会取代列表进行显示。如果只显示详情，当用户按返回按钮时，系统会重新显示列表。

配置更改（例如设备屏幕方向更改或应用窗口大小更改）可能会更改显示屏的窗口大小类别。列表详情布局会相应地做出响应，同时保留应用状态：

如果展开宽度的显示屏同时显示列表窗格和详情窗格，然后收窄为中等宽度或紧凑宽度，则详情窗格仍会显示，而列表窗格会变为隐藏状态
如果中等宽度或紧凑宽度的显示屏先只显示“详细信息”窗格，然后窗口大小类别展开为较大宽度，则列表和详情会一起显示，并且列表会指明与“详细信息”窗格中的内容对应的项已被选中
如果中等宽度或较小宽度的屏幕先只显示列表窗格，然后展开为较大宽度，则列表和占位符详情窗格会一起显示

列表详情布局非常适合即时通讯应用、通讯录管理器、互动媒体浏览器或内容可整理为项列表（用于显示额外信息）的任何应用。

图 1. 显示对话列表和所选对话的详情的即时通讯应用。

实现

Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和详情窗格（当宽度窗口大小类别为展开时），还是只显示列表窗格或详情窗格（当宽度窗口大小类别为中等或紧凑时）。

为确保单向数据传输，请提升所有状态，包括当前窗口大小类别和所选列表项（如有）的详情，以便所有可组合项都可以访问相应数据并进行正确的呈现。

当小窗口中只显示详情窗格时，添加 BackHandler 即可移除详情窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序依赖于窗口大小类别和所选详情的状态。

ListDetailPaneScaffold 是一种高级可组合项，可简化列表-详情布局的实现。它会根据窗口大小类别自动处理窗格逻辑，并支持在窗格之间导航。

以下是使用 ListDetailPaneScaffold 的最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}CanonicalLayoutSamples.kt

以下是此示例中的关键组件：

rememberListDetailPaneScaffoldNavigator：创建一个导航器，用于管理列表窗格和详情窗格之间的导航。
listPane：显示项列表。
detailPane：显示所选项的内容。

如需查看详细的实现示例，请参阅：

构建列表-详情布局开发者指南
list-detail-compose 列表-详情示例

信息流

Feed 布局的线框图。

Feed 布局能够以可配置网格的形式排列等效的内容元素，以便用户快速、方便地查看大量内容。

内容元素之间的关系由大小和位置确定。

如要创建内容组，可以将相关元素设置为相同的大小，并将这些元素放置到一起。如要吸引用户注意某个元素，可以将其设置为比附近的元素大。

卡片和列表是 Feed 布局的常见组件。

Feed 布局支持几乎任何尺寸的显示屏，因为网格可从滚动的单列调整为滚动的多列内容 Feed。

Feed 尤其适用于新闻和社交媒体应用。

图 2. 以各种大小的卡片显示帖子的社交媒体应用。

实现

動態消息是由垂直捲動容器中的大量內容元素組成，以格線配置。Lazy 清單能夠有效率地在多欄或多列中算繪大量項目。Lazy 格線能夠在格線中算繪項目，支援項目大小和跨距的設定。

請根據可用的螢幕區域調整格線版面配置欄，設定格線項目的最小寬度。定義格線項目時，調整欄的跨距以強調部分項目。

如果是區段標題、分隔線或其他占用動態消息最大寬度的項目，請使用 maxLineSpan 占用版面配置的最大寬度。

如果寬度較窄的螢幕沒有足夠空間顯示多欄，LazyVerticalGrid 的運作方式會與 LazyColumn 一樣。

以下是使用 LazyVerticalGrid 的最簡單實作方式：

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}CanonicalLayoutSamples.kt

自適應動態饋給的關鍵在於 columns 設定。 GridCells.Adaptive(minSize = 180.dp) 會建立格線，每欄至少為 180.dp 寬。然後格線會盡可能在可用空間中顯示更多欄。

如需實作範例，請參閱「使用 Compose 建立動態消息」範例。

辅助窗格

辅助窗格布局的线框图。

辅助窗格布局会按主要显示区域和辅助显示区域来整理应用内容。

主要显示区域占据应用窗口的大部分区域（通常占据三分之二左右），并且包含主要内容。辅助显示区域是一个窗格，它占据应用窗口的其余区域，并会展示主要内容的辅助性内容。

辅助窗格布局在采用横屏模式的较大宽度显示屏（请参阅使用窗口大小类别）上效果出众。在以下情况下，中等宽度或紧凑宽度的显示屏支持同时显示主要显示区域和辅助显示区域：内容可适应狭窄的显示空间，或者附加内容最初可隐藏在底部或侧边动作条（可通过菜单或按钮等控件访问）中。

主要内容和辅助内容之间的关系是辅助窗格布局与列表详情布局的区别所在。辅助窗格内容只在与主要内容相关时才有用；例如，如果单独使用，辅助窗格工具窗口则没有意义。但是，即使没有主要内容，列表详情布局的详情窗格中的补充内容仍然有意义；例如，商品详情中的商品说明。

辅助窗格的用例包括：

效率应用：在辅助窗格中附有评价者所发表评论的文档或电子表格

媒体应用：在辅助窗格中显示流式视频和相关视频列表，或附有播放列表的音乐专辑说明
工具和设置：在辅助窗格中显示调色板、效果和其他设置的媒体编辑工具

图 3. 在辅助窗格中显示商品说明的购物应用。

实现

Compose 支援視窗大小類別邏輯，可讓您判斷要同時顯示主要內容和輔助內容，或將輔助內容放在替代位置。

提升所有狀態，包括目前視窗大小類別，以及與主要內容和輔助內容資料相關的資訊。

如果是寬度較窄的螢幕，請將輔助內容放在主要內容下方或底部功能表中。如果是中等和展開寬度，請將輔助內容放在主要內容旁，並根據可用的內容和空間適當調整大小。如果是中等寬度，請將顯示空間平分給主要內容和輔助內容。如果是展開寬度，請將 70% 的空間留給主要內容，30% 分給輔助內容。

SupportingPaneScaffold 是高階可組合函式，可簡化輔助窗格版面配置的實作程序。這個可組合函式會根據視窗大小類別自動處理窗格邏輯，在大螢幕上並排顯示窗格，或在小螢幕上隱藏輔助窗格。SupportingPaneScaffold 也支援窗格之間的導覽。

以下是最低限度的實作方式：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}CanonicalLayoutSamples.kt