非滚动视图侧重于一目了然的信息,并能让用户在几乎无需互动的情况下获得价值。因此,在这些布局中构建响应式行为可能比较困难。
预设非滚动布局组件
对话框
对话框是占据整个屏幕的临时叠加层。它可让用户执行单项操作。

- 对话框会吸引您的注意力,以便您验证其内容是否已得到处理。
- 对话框应直接传达信息,并专注于完成任务。
- 对话框应通过响应提供相关信息或上下文信息来响应用户任务或操作。

确认叠加层
确认叠加层会在短时间内向用户显示确认消息。该组件用于在执行操作后吸引用户的注意力。

在手机上打开
当用户选择在手机上继续其旅程时,系统会触发“在手机上打开”叠加层。叠加层包含一个进度指示器,并告知用户何时查看手机。

Stepper
步进控件提供全屏控制体验,让用户从一系列值中进行选择。用户可以使用按钮或表冠控制互动,弯曲的电平指示器会显示具体电平。
时间选择器
选择器可让用户在可滚动的部分中从有限数量的项中进行选择。 时间选择器最多有三列,具体取决于是否有秒数以及时钟是 12 小时制还是 24 小时制。用户一次与一列互动,通过将数字保持在焦点中来做出选择,然后继续。
日期选择器
选择器可让用户在可滚动的部分中从有限数量的项中进行选择。 日期选择器最多有三列,日期、时间和年份的顺序可以互换,具体取决于使用情形。 日期选择器需要较长的内容字符串,因此一次只能显示一列,并提示左侧或右侧的内容。用户一次与一列互动,通过将数字保留在焦点中来做出选择,然后继续。
自定义非滚动布局示例
非滚动应用屏幕不限于设置的组件。您可以组合使用各种元素来创建所需的布局。
您应注意非滚动屏幕上的空间有限,并使用自适应(百分比)边距和内边距来利用可用的屏幕空间。您还可以考虑在 225dp 处应用断点,以便在更大的屏幕尺寸上引入更多内容或使现有内容更易于浏览。
Google 地图
紧急叠加层
紧急警报
响应式和自适应行为
Compose 库中的所有组件都会自动适应更宽的屏幕尺寸,并增加宽度和高度。对于这些视图,利用断点可以为所有用户提供特别丰富且有价值的体验。
对于界面中的许多按钮、卡片和边距,请拉伸并填充不同屏幕尺寸的空间,以充分利用界面上的可用空间,同时实现布局的良好平衡。
使用以下核对清单验证自适应参数是否已正确定义:
- 创建在所有屏幕尺寸上看起来都合理的灵活布局。
- 应用建议的顶部、底部和侧边距。
- 在内容可能会被剪裁的位置,以百分比值定义边距。
- 利用布局限制,使元素尽可能充分地利用屏幕内的空间,并在不同设备尺寸之间保持平衡。
- 如果使用时间文本,则要为其预留空间,但不要与网页的顶部部分重叠。
- 考虑使用紧贴边缘的按钮,以充分利用有限的空间。
- 考虑在 225dp 处应用断点,以便在大屏幕尺寸下引入更多内容或使现有内容更易于浏览。
使用分页的多个非滚动网页历程
如果某个体验需要更多内容,但又想保留非滚动布局,请考虑采用垂直或水平分页的多页布局。