选择器

The Picker helps users select and set specific data.

选择器

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

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

解剖

解剖

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

宽度和高度

选择器组填充可用高度和宽度。选择器列有四种布局选项。每个布局都居中并填充可用高度。列宽由容纳字体中所需的数字位数所需的宽度定义,日期选择器除外,水平方向上它填充屏幕并溢出边缘。

例如,数字将计算出“00”的宽度,然后设置宽度。对于文本字段,例如月份字段,将计算为“MMM”的宽度(这是拉丁字母表中最宽的字母)。因此,宽度和高度(即所用类型样式的线高)将受所用字体的影響。

选择器项目的尺寸在断点之间会有所不同。

用法

查看以下日期和时间选择器的示例

对于预先构建的日期和时间选择器实现,请查看 Github 上的 Horologist 库

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

自适应布局

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 列间距