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

选择器
选择器应用于让用户从有限数量的项目中进行选择。
默认情况下,项目将在两个方向上无限循环。如果列表中的顺序很重要,或者要允许用户通过快速滑动到达第一个和最后一个元素,请考虑禁用此行为。
结构

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

宽度和高度
选择器组填充可用高度和宽度。选择器列有四种布局选项。每种布局都居中并填充可用高度。列宽由字体中所需数字位数所需的宽度定义,日期选择器是例外,它在水平方向上填充屏幕并超出边缘。
例如,数字将计算出“00”的宽度,然后设置宽度。对于文本字段,例如月份字段,将计算为“MMM”(这是拉丁字母表中最宽的字母)的宽度。因此,宽度和高度(即所用该类型样式的基线高度)将受所用字体的影响。
选择器项目在断点之间的尺寸各不相同。
用法
请参阅以下日期和时间选择器的示例
对于预构建的日期和时间选择器实现,请查看 Github 上的Horologist 库。
如果您想创建类似的体验,即用户在多个选择器中选择多部分值,请使用内置的PickerGroup 组件。此对象使用焦点协调器对象将焦点分配给正确的 Picker 元素。
自适应布局
24 小时制时间选择器
12 小时制时间选择器
日期选择器
响应式行为
文本尺寸增加
超过 225+ 断点后,选择器元素的字体大小会发生变化。懒惰滚动列中的顶部和底部副本会调整 (A),中间副本也会调整。以下是此方面的一些示例
两列布局


低于 225 dp 断点
字体:显示 2
高于 225 dp 断点
字体:显示 1
三列布局


低于 225 dp 断点
字体:显示 3
高于 225 dp 断点
字体:显示 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 列间隙