v1.1.0 · 单列 / 双列 / 三列 · 平铺滚轮 · 按钮模式 · 7 行 56px
| Picker 选择器 Token 规范 | ||
|---|---|---|
| 整体尺寸 | ||
| 画板宽度 | 414px | canvas |
| 可见行数 | 7 行 | visible_rows |
| 行高 | 56px | row_height |
| 滚轮区域高度 | 392px (7×56) | wheel_height |
| 工具栏高度 | 56px | toolbar_height |
| 选中行位置 | 第 4 行（居中） | selected_index |
| 选择指示带 | 1px solid G20 上下边框 | selection_band |
| 渐变遮罩 | 上/下各 168px (3 行)，轻柔淡出 0.55→0 | gradient_mask |
| 列间分隔线 | 1px solid G20（仅选择带范围内） | column_divider |
| 底部安全区 | 34px | safe_area |
| 圆角（顶部） | 12px | sheet_radius |
| 行位置字号 / 颜色 | ||
| 第 1 行（最远·上） | 16px / 400 / G30 #CED4E0 | pos-1 |
| 第 2 行（近·上） | 16px / 400 / G40 #A8B4C8 | pos-2 |
| 第 3 行（相邻·上） | 16px / 400 / G50 #6B7A99 | pos-3 |
| 第 4 行（选中·居中） | 18px / 500 / G60 #223355 | pos-4 |
| 第 5 行（相邻·下） | 16px / 400 / G50 #6B7A99 | pos-5 |
| 第 6 行（近·下） | 16px / 400 / G40 #A8B4C8 | pos-6 |
| 第 7 行（最远·下） | 16px / 400 / G30 #CED4E0 | pos-7 |
| 工具栏（Toolbar） | ||
| 取消按钮（左） | 16px / 400 / G50 #6B7A99 | btn_cancel |
| 标题（居中） | 16px / 500 / G60 #223355 | toolbar_title |
| 确定按钮（右） | 16px / 500 / DB60 #3388FF | btn_confirm |
| 底部分割线 | 1px solid G10 #E9ECF2 | toolbar_border |
| 列头（多列时） | 14px / 400 / G40 #A8B4C8 | col_header |
| 列头区域高度 | 36px | col_header_height |
| 平铺滚轮参数 | ||
| 行排列方式 | 平铺垂直排列，无 3D 旋转 | flat_wheel |
| 行间距（translateY） | 56px（等于行高） | row_offset |
| 偏移范围 | -168px ~ +168px（以第 4 行为中心） | offset_range |
| 选中行定位 | translateY(0)（居中） | selected_offset |
| 按钮模式（单列 Picker 触发按钮） | ||
| 按钮宽度 | 382px | --picker-btn-width |
| 按钮高度 | 36px | --picker-btn-height |
| 按钮圆角 | 8px | --picker-btn-radius |
| 按钮背景 | G0 #FFFFFF | --picker-btn-bg → --G0 |
| 按钮描边 | 1px solid G20 #DDE1EB | --picker-btn-border → --G20 |
| 未选择文字字号/字重 | 16px / 400 | --picker-btn-font-size / --picker-btn-font-weight |
| 未选择文字颜色 | G40 #A8B4C8 | --picker-btn-placeholder-color → --G40 |
| 已选择文字字号/字重 | 16px / 500 | — |
| 已选择文字颜色 | G60 #223355 | --picker-btn-selected-color → --G60 |
| 右侧箭头图标 | 16×16px G40 #A8B4C8 | --picker-btn-arrow-color → --G40 |
| 禁用态 | opacity 0.4，pointer-events: none | — |
| 适用场景 | 仅单列选择器使用按钮模式 | — |