选择器

选择器可帮助用户选择和设置特定数据。

选择器

应使用选择器让用户从有限数量的项中进行选择。

默认情况下,项会在两个方向上无限循环。如果列表中的顺序很重要,请考虑停用此行为,或允许用户通过快速滑动访问第一个和最后一个元素。

解剖学

剖析

A. 非活动列
B. 冒号分隔符
C. 选择器列
D. 热门内容
E. 中间内容
F. 底部内容

宽度和高度

选择器组会填充可用的高度和宽度。选择器列有四个布局选项。每个布局均居中放置,并填充可用的高度。列宽由所需的宽度定义,以适应字体所需的位数,但日期选择器除外,它在水平方向上填满屏幕并从边缘溢出。

例如,数字将计算出宽度为“00”,然后设置宽度。例如,对于文本字段,系统会按照“MMM”的宽度(即拉丁字母中最宽的字母)计算月字段的月份字段。因此,宽度和高度(即所用字体样式的行高)会受到所用字体的影响。

在各个断点中,选择器项的大小有所不同。

使用方法

请参阅下列日期和时间选择器示例

如需了解预构建的日期和时间选择器实现,请查看 GitHub 上的 Horologist 库

如果您想打造类似的体验,让用户在多个选择器中选择多个部分的值,请使用内置的 PickerGroup 组件。此对象使用焦点协调器对象将焦点分配给正确的 Picker 元素。

自适应布局

TimePicker 24 小时

时间选择器 12 小时

日期选择器

自适应行为

增大文字大小

超过 225 个以上的断点之后,Picker 元素的字体大小会发生变化。延迟滚动列中的顶部和底部文案会调整 (A),中间文案也是如此。以下是一些示例:

双列布局

低于 225 dp 的断点

字体:Display 2

超过 225 dp 的断点

字体:Display 1

三列布局

低于 225 dp 的断点

字体:Display 3

超过 225 dp 的断点

字体:Display 2

渐变大小增加

“选择器”列上的渐变高度由可用空间定义。顶部和底部渐变均设置为可用高度的三分之一 (33%)。这意味着,对于每个可用的屏幕尺寸,渐变都会按比例进行缩放。独立于列布局放置。

低于 225 dp 的断点

大小:列高的 33%

超过 225 dp 的断点

大小:列高的 33%

列间距增大

列间距超出 225+ 断点的范围,即从 2 dp 或 4 dp 开始,然后增加到 6 dp。这取决于您选择的布局:2 列或 3 列布局

双列布局

低于 225 dp 的断点

列间距为 4 dp

超过 225 dp 的断点

列间距为 6 dp

三列布局

低于 225 dp 的断点

列间距为 2 dp

超过 225 dp 的断点

列间距为 6 dp