列表

列表是元素的连续垂直索引。请使用 ScalingLazyColumn 在 Wear OS 上创建列表。

ScalingLazyColumnLazyColumn 的自定义版本,专为 Wear OS 构建。列表提供缩放和透明度效果,使内容在屏幕顶部和底部缩放并淡出,从而帮助用户关注重点区域。列表以屏幕中心为锚点,这能够进一步突出列表中间的项目。

列表可以包含高度固定或可变的项目。列表内容应留有足够的边距,以适应圆形屏幕。

内边距 (Padding)

根据元素的不同,创建列表时需使用标准化的内边距。如果复杂的列表需要额外的垂直内边距,为了保持一致性,间距应设置为 4 dp 的倍数。

各部分之间

顶部、中间和底部部分之间的内边距应设置为 16 dp。

标题与内容之间

顶部、中间和底部部分之间的内边距应设置为 12 dp。

插槽之间

中间部分中各插槽之间的内边距应设置为 16 dp。

分组之间

插槽内各分组之间的内边距应设置为 8 dp。

元素之间

分组内各元素之间的内边距应设置为 4 dp。

吸附 (Snapping) 行为

为在滚动时突出显示某个列表项,请使用吸附效果。当项目高度较高(但不超过屏幕高度)时,请使用此功能。

吸附行为有两种形式。ItemCenter 使用项目中心作为参考点。ItemStart 使用项目边缘作为参考点。前者用于将单个项目置于屏幕中央,后者用于将两个项目置于屏幕中央。使用 anchorType 参数设置此行为。

如需进一步控制列表中的吸附行为,请将 flingBehavior 设置为 ScalingLazyColumnDefaults.snapFlingBehavior,并将 rotaryScrollableBehavior 设置为 RotaryScrollableDefaults.snapBehavior

用法

请参阅以下关于如何在手表上使用列表的示例。

自适应布局

下方的图片展示了几个自适应布局的示例。有关实现指南,请访问针对不同屏幕尺寸进行开发页面。

响应式行为

列表组件会拉伸以填充较大显示屏上的可用宽度。

顶部边距

顶部边距因顶部区域包含的元素而异。

列表以标题开头

列表以 1 个或 2 个以上按钮开头

列表以其他元素开头

底部边距

底部边距因底部区域包含的元素而异。

列表以按钮结尾

列表以其他元素结尾

侧边边距

所有类型的列表均采用 5.2% 的标准侧边边距比例,以确保在大尺寸显示屏上的可扩展性。

内部边距

标题

额外增加了 7.3% 的内部边距,以确保标题不会被裁剪。

底部按钮

底部按钮在超过 225 断点后会填满可用宽度。为了保持视觉层级,在大屏幕上额外增加了 14.56% 的内部内边距。