内容构成和结构

通过为内容设置结构和划归方法，打造灵活的流程和节奏。首先设计布局容器，然后添加内容。

1. 基本结构：布局网格，用于引导内容

首先，为布局添加外边距和列，以创建具有一致防护栏的稳固结构。

外边距用于在屏幕和内容的左边缘和右边缘提供间距。紧凑型尺寸的标准外边距值为 16 dp，但外边距应进行调整以适应更大的屏幕。应用的正文内容和操作必须保留在这些外边距内并与这些外边距对齐。

您还可以在此步骤中确保内嵌安全区或边衬区。系统栏内嵌可防止关键操作落入系统栏下方。您应 在系统栏后面绘制内容。

使用列来构建灵活的网格结构，以实现一致的对齐方式，并通过划分正文区域内的内容来为布局提供垂直定义。内容会显示在包含列的屏幕区域中。这些列为布局提供了结构，从而为排列元素提供了便捷的结构。

内容重要性或层次结构有助于确定布局网格的类型，从而带来更多结构。如果内容具有清晰的层次结构，则适合使用分层布局网格；例如，具有大型标题和主视觉元素的编辑布局或详情屏幕。

模块化网格非常适合同样重要但结构非常清晰的内容和布局，例如图库。

选择列网格，以实现一致的响应式单向布局，或者在需要更大灵活性时选择列网格。

无论选择哪种类型，布局网格都应适应各种尺寸和外形规格。

此示例使用列网格将内容与底层网格对齐，同时保留灵活的尺寸。为了适应不同的外形规格，列网格会根据屏幕尺寸更改列大小和列数，这也会让内容进行缩放。避免布局网格过于精细。请改用基线网格来提供一致的间距单位。

或者，使用分层布局网格来保持详情屏幕的顺序。

首先使用一致的布局网格。如果内容需要，请打破网格。即使这样，您也可能会发现另一个网格仍然符合您的内容需求。

详细了解布局容器，例如分页器和流式布局。

手稿和砌体是其他类型的布局网格。

无论您选择哪种布局网格，都可以使用窗格的划归概念来对内容进行分组，以实现自适应布局。例如，所使用的示例是详情屏幕，该屏幕是一个窗格，可以在列表详情布局中显示。

2. 应用划归

使用划归在视觉上对元素进行分组。

划归是指将空白空间和可见元素一起使用来创建视觉分组。容器是表示封闭区域的形状。在单个布局中，您可以将共享类似内容或功能的元素分组在一起，并使用开放空间、排版和分隔线将它们与其他元素分开。

Android 使用行、列和框作为构建块，因此您可以采用类似的方式设计划归。将类似的内容用空白空间或可见的分隔线分组在一起，从而引导您浏览内容。

隐式划归使用空白空间对内容进行分组，以形成容器边界，而显式划归使用分隔线和卡片等对象对内容进行分组。

下图展示了使用隐式划归来划归标题和主要副本的示例。列网格用于对齐和创建分组。突出显示的内容明确包含在卡片中。使用图标和类型层次结构来实现更大的视觉分离。

3. 放置内容

选择布局网格并将内容放入容器后，Android 可以通过各种方式处理内容元素并放置它们，包括使用基本构建块和修饰符或布局容器（例如网格和 Flexbox）。

考虑内容是一维还是二维的。例如，内容可以水平、垂直或双向流动。

如下图所示，身份验证布局可以使用二维网格布局。

界面元素也可以在一维中灵活流动，例如过滤条件或内容标记。详细了解 Flexbox。

布局还可以组合使用多种布局类型。例如，您可以将轮播界面或水平滚动界面与垂直卡片配对。或者，您可以呈现带有垂直列表数据的自定义图表。

您可以使用延迟加载的行和延迟加载的列，在滚动行或列中呈现内容。

对齐

与自动布局流动和对齐类似，您可以指定界面元素 排列和对齐方式。

使用 AlignmentLine 创建自定义对齐线，父布局 可以使用这些对齐线来对齐和放置其子项。

4. 缩放和裁剪内容

缩放对于适应动态内容、设备屏幕方向和屏幕尺寸至关重要。元素可以保持固定或进行缩放。

指定图片在其容器内的缩放和放置方式，以确保它们在任何设备上都能正确显示。否则，图片的主要焦点可能会被截断，或者图片对于布局来说可能太小或太大。

通过适当的缩放和裁剪来适应不同的设备宽高比和屏幕方向。由于宽高比可能会有很大差异，因此请指定内容如何处理这些情况。

例如，全宽主视觉元素图片在横向模式的手机上会占据整个屏幕。

如果内容必须保留宽高比（例如仅限竖屏视频），请限制宽高比并平衡空白空间。

固定内容

许多组件都具有内置的互动、滚动和放置功能，并带有槽或脚手架，例如应用栏。某些元素可以修改为保持固定，而不是对滚动做出反应，例如包含关键操作的悬浮操作按钮 (FAB)。固定元素可在某些用例中更好地聚焦，例如将文本输入固定到键盘，以防止输入被隐藏。

对于文本输入（例如消息传递和身份验证），输入会附加到键盘，并仅提供焦点。

布局中的组件

Material 3 组件为 互动和内容提供了自己的配置和状态。

Compose 提供了便捷的布局，用于将 Material 组件组合成常见的屏幕图案。可组合项（例如 Scaffold）提供了适用于 各种组件和其他屏幕元素的槽。详细了解 Material 组件和布局。