[[["易于理解","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"]],["最后更新时间 (UTC):2025-08-28。"],[],[],null,["Utilize canonical layouts as a starting point, ready-to-use compositions that\nhelp layouts adapt for common use cases and screen sizes. These layouts are\naesthetic and functional, and derived from [Material 3\nguidance](https://m3.material.io/foundations/layout/canonical-layouts/feed).\n**Figure 21:** Canonical layouts\n\nThe Android framework includes specialized components that make implementation\nof the layouts straightforward and reliable using either [Jetpack Compose](/develop/ui/compose/layouts/adaptive/support-different-display-sizes)\nor [views](/develop/ui/views/layout/declaring-layout) APIs.\n\nList-detail layout\n\nA list-detail layout enables users to explore lists of items that have\ndescriptive, explanatory, or other supplementary information---the item detail.\nFor compact screen sizes, only the list or detail view are visible. Displaying a\ncollection of content in a row-based layout, lists make up the most common form\nof layouts for apps. List-detail is ideal for messaging apps, contact managers,\nfile browsers, or any app where the content can be organized as a list of items\nthat reveal additional information.\n\nContent can be static or dynamic.\n\n- **Dynamic content** is content that your app serves on-the-fly, and is ideal for showing user-generated content or reflect the user's preference or actions. For example, imagine a photo app with a scrollable list of user-generated photos, which is unique for each user and changes as the user uploads more images. These images are dynamic content.\n- **Static content** represents hard-coded content, which is modifiable only by making changes directly to your app's code. Examples of static content are images and text that every user might see.\n\nThe [Now in Android](https://www.figma.com/community/file/1164313362327941158) Figma file provides multiple layout\nexamples. The following example shows a one-dimensional collection of content.\n**Figure 22:** One dimensional collection of content\n\nExplore [Material 3 Lists](https://m3.material.io/components/lists/overview) for more design guidance on list\ncomponents and specs.\n\nFeed layout\n\nA feed layout arranges equivalent content elements in a configurable grid for\nquick, convenient viewing of a large amount of content. Learn more on\n[Material 3 guidelines for using cards in a collection](https://m3.material.io/components/cards/guidelines#580b3156-4928-45cc-953e-dec3b65a6323).\nFeeds can be list- or grid- based configuration on compact displays, typically in cards or\ntiles. Content can be dynamic, meaning it is \"fed in\" from a dynamic external\nsource such as an API.\n\n\u003cbr /\u003e\n\nA grid layout is composed of both rows and columns made up by implied or\nexplicit containment principles. A grid layout can be more rigidly applied or\nstaggered to vary the rows and columns. Both should have consistent application\nof spacing and logic to avoid confusing users. Explore [Material 3 guidelines\nabout designing feeds](https://m3.material.io/foundations/layout/canonical-layouts/feed).\n\nYou can implement a feed layout in Compose with [Lazy lists or lazy grids](/jetpack/compose/lists#lazy),\nor in Views with [`RecyclerView`](/develop/ui/views/layout/recyclerview) or [`CardView`](/develop/ui/views/layout/cardview).\n\n\nFor example, here a photo gallery and podcasts in a grid layout are common feed formats.\n\nSupport pane layout\n\nA mobile view may require supporting content or controls. Typically in the form\nof sheets or dialogs, they can help the primary view stay focused and\nuncluttered. Check out [M3 guidance for using the supporting pane canonical\nlayout](https://m3.material.io/foundations/layout/canonical-layouts/supporting-pane#b5f0bc74-9bb4-426b-b846-4b182cde1c76).\n**Figure 24:** Bottom sheets can act as supporting content to the primary view\n\nLearn about [M3 guidance for bottom sheets](https://m3.material.io/components/bottom-sheets/overview)."]]