[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],null,["# Canonical layouts are proven, versatile layouts that provide an optimal user\nexperience on a variety of form factors.\n\nThe canonical layouts support small screen phones as well as tablets, foldables,\nand ChromeOS devices. Derived from [Material Design guidance](https://m3.material.io/foundations/layout/canonical-layouts/overview), the layouts are\naesthetic as well as functional.\n\nThe Android framework includes specialized components that make implementation\nof the layouts straightforward and reliable.\n\nThe canonical layouts create engaging, productivity‑enhancing UIs that\nform the foundation of great apps.\n\nList-detail\n-----------\n\nThe list-detail layout enables users to explore lists of items that have\ndescriptive, explanatory, or other supplementary information---the item\ndetail.\n\nThe layout divides the app window into two side-by-side panes: one for the list,\none for the detail. Users select items from the list to display the item detail.\nDeep links in the detail reveal additional content in the detail pane.\n\nExpanded-width displays (see [Use window size classes](/develop/ui/compose/layouts/adaptive/use-window-size-classes)) accommodate both the\nlist and detail at the same time. Selection of a list item updates the detail\npane to show the related content for the selected item.\n\nMedium- and compact-width displays show either the list or the detail, depending\non user interaction with the app. When just the list is visible, selection of a\nlist item displays the detail in place of the list. When just the detail is\nvisible, pressing the back button redisplays the list.\n\nConfiguration changes such as device orientation changes or app window size\nchanges can change the display's window size class. A list‑detail layout\nresponds accordingly, preserving app state:\n\n- If an expanded-width display showing both the list and detail panes narrows to medium or compact, the detail pane remains visible and the list pane is hidden\n- If a medium- or compact-width display has just the detail pane visible and the window size class widens to expanded, the list and detail are shown together, and the list indicates that the item corresponding to the content in the detail pane is selected\n- If a medium- or compact-width display has just the list pane visible and widens to expanded, the list and a placeholder detail pane are shown together\n\nList-detail is ideal for messaging apps, contact managers, file browsers, or any\napp where the content can be organized as a list of items that reveal additional\ninformation.\nYour browser doesn't support the video tag. **Figure 1.** Messaging app showing a list of conversations and the details of a selected conversation.\n\n### Implementation\n\nThe declarative paradigm of Compose supports window size class logic that\ndetermines whether to show the list and detail panes at the same time (when the\nwidth window size class is expanded) or just the list or detail pane (when the\nwidth window size class is medium or compact).\n\nTo ensure unidirectional data flow, [hoist all state](/jetpack/compose/state#state-hoisting), including current\nwindow size class and detail of the selected list item (if any), so all\ncomposables have access to the data and can render correctly.\n\nWhen showing just the detail pane on small window sizes, add a [`BackHandler`](/reference/kotlin/androidx/activity/compose/package-summary#BackHandler(kotlin.Boolean,kotlin.Function0))\nto remove the detail pane and display just the list pane. The `BackHandler` is\nnot part of the overall app navigation since the handler is dependent on the\nwindow size class and selected detail state.\n\nFor an example implementation, see the [List-detail with Compose](https://github.com/android/user-interface-samples/tree/main/CanonicalLayouts/list-detail-compose)\nsample.\n\nFeed\n----\n\nA feed layout arranges equivalent content elements in a configurable grid for\nquick, convenient viewing of a large amount of content.\n\nSize and position establish relationships among the content elements.\n\nContent groups are created by making elements the same size and positioning them\ntogether. Attention is drawn to elements by making them larger than nearby\nelements.\n\nCards and lists are common components of feed layouts.\n\nA feed layout supports displays of almost any size because the grid can adapt\nfrom a single, scrolling column to a multi‑column scrolling feed of\ncontent.\n\nFeeds are especially well suited for news and social media apps.\nYour browser doesn't support the video tag. **Figure 2.** Social media app showing posts in cards of varying sizes.\n\n### Implementation\n\nA feed consists of a large number of content elements in a vertical scrolling\ncontainer laid out in a grid. [Lazy lists](/jetpack/compose/lists#lazy) efficiently render a large number\nof items in columns or rows. [Lazy grids](/jetpack/compose/lists#lazy-grids) render items in grids, supporting\nconfiguration of the item sizes and spans.\n\nConfigure the columns of the grid layout based on the available display area to\nset the minimum allowable width for grid items. When defining grid items, adjust\ncolumn spans to emphasize some items over others.\n\nFor section headers, dividers, or other items designed to occupy the full width\nof the feed, use [`maxLineSpan`](/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridItemSpanScope#maxLineSpan()) to take up the full width of the layout.\n\nOn compact-width displays that don't have enough space to show more than one\ncolumn, [`LazyVerticalGrid`](/reference/kotlin/androidx/compose/foundation/lazy/grid/package-summary#LazyVerticalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)) behaves just like a [`LazyColumn`](/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)).\n\nFor an example implementation, see the [Feed with Compose](https://github.com/android/user-interface-samples/tree/main/CanonicalLayouts/feed-compose)\nsample.\n\n\u003cbr /\u003e\n\nSupporting pane\n---------------\n\nSupporting pane layout organizes app content into primary and secondary display\nareas.\n\nThe primary display area occupies the majority of the app window (typically\nabout two thirds) and contains the main content. The secondary display area is a\npane that takes up the remainder of the app window and presents content that\nsupports the main content.\n\nSupporting pane layouts work well on expanded-width displays (see [Use window\nsize classes](/develop/ui/compose/layouts/adaptive/use-window-size-classes)) in landscape orientation. Medium- or compact‑width\ndisplays support showing both the primary and secondary display areas if the\ncontent is adaptable to narrower display spaces, or if the additional content\ncan be initially hidden in a bottom or side sheet accessible by means of a\ncontrol such as a menu or button.\n\nA supporting pane layout differs from a list‑detail layout in the\nrelationship of the primary and secondary content. Secondary pane content is\nmeaningful only in relation to the primary content; for example, a supporting\npane tool window is irrelevant by itself. The supplementary content in the\ndetail pane of a list‑detail layout, however, is meaningful even without\nthe primary content, for example, the description of a product from a product\nlisting.\n\nUse cases for supporting pane include:\n\n- **Productivity apps:** A document or spreadsheet accompanied by reviewer comments in a supporting pane\n- **Media apps:** A streaming video complemented by a list of related videos in a supporting pane, or the depiction of an album of music supplemented with a playlist\n- **Search and reference apps:** A query input form with results in a supporting pane\n\nYour browser doesn't support the video tag. **Figure 3.** Shopping app with product descriptions in a supporting pane.\n\n### Implementation\n\nCompose supports window size class logic, which enables you to determine whether\nto show both the main content and the supporting content at the same time or\nplace the supporting content in an alternative location.\n\nHoist all state, including current window size class and information related to\nthe data in the main content and supporting content.\n\nFor compact-width displays, place the supporting content below the main content\nor inside a bottom sheet. For medium and expanded widths, place the supporting\ncontent next to the main content, sized appropriately based on the content and\nspace available. For medium width, split the display space equally between the\nmain and supporting content. For expanded width, give 70% of the space to the\nmain content, 30% to the supporting content.\n\nFor an example implementation, see the [Supporting pane with\nCompose](https://github.com/android/user-interface-samples/tree/main/CanonicalLayouts/supporting-pane-compose) sample.\n\nAdditional resources\n--------------------\n\n- Material Design --- [Canonical layouts](https://m3.material.io/foundations/layout/canonical-layouts/overview)"]]