Compose 中的高级布局
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
了解如何为 Compose 布局构建复杂的设计,重点关注布局阶段和约束条件、子组合项布局和固有测量。
要点
- 布局阶段是 Compose 的阶段,用于定义元素的大小和位置。
- 在布局阶段,界面树中的每个元素都会测量其子元素,以便父元素确定自己的大小并将子元素放置在可用的 2D 空间中。
- 如需构建自定义布局,请调用
Layout
可组合项,该可组合项会接受可组合项内容作为其子项。
- 子组合使延迟加载的组件能够在滚动时按需添加内容。
- 子组合布局可能会影响性能。当至少一个子项的组合取决于另一个子项的测量结果时,请使用此方法。
- 借助固有测量,您可以先查询子项,然后再进行实际测量。
包含本指南的集合
本指南属于以下精选快速入门集合,这些集合涵盖了更广泛的 Android 开发目标:
显示列表或网格
借助列表和网格,您的应用可以以视觉上令人愉悦且易于用户使用的形式显示集合。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-02-06。
[null,null,["最后更新时间 (UTC):2025-02-06。"],[],[],null,["# Advanced layouts in Compose\n\n\u003cbr /\u003e\n\nSee how to build complex designs for your Compose layouts, focusing on layout\nphase and constraints, subcompose layouts, and intrinsic measurements. \n\nKey points\n----------\n\n- The *layout phase* is the phase of Compose where element sizing and positioning is defined.\n- During the layout phase, each element in the UI tree measures its children, enabling the parent to decide its own size and placing the children in the available 2D space.\n- To build a custom layout, call the [`Layout`](/reference/kotlin/androidx/compose/ui/layout/package-summary#Layout(kotlin.collections.List,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MultiContentMeasurePolicy)) composable, which accepts the composable content as its children.\n- Subcomposition enables lazy components to add content on demand while scrolling.\n- Subcomposed layouts can have an impact on performance. Use this approach when at least one child's composition depends on the result of another child's measurement.\n- Intrinsic measurements let you query children before they're measured.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display a list or grid\n\nLists and grids allow your app to display collections in a visually pleasing form that's easy for users to consume. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-a-list-or-grid) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]