Skip to main content
版本：v3

PICKER

API_LEVEL 3.0 开始支持，API 兼容性请参考 API_LEVEL。

通用的选择器，支持文字和数字列表选择

创建 UI 控件​

import { createWidget, widget, prop } from '@zos/ui'

const keyboard = createWidget(widget.WIDGET_PICKER, Param)

Param: object​

属性说明是否必须类型
nb_of_columns选择器最大列数（最多支持 5 列）是number
data_config列配置信息数组，参考 DataConfig是Array<DataConfig>
title选择器的标题否string
subtitle选择器的副标题否string
done_icon完成图标的资源路径否number
picker_cb选择器的回调函数否CallBack
init_col_index初始化 focus 的所在列的 index 索引否number
normal_color未选中的数据的颜色值否number
select_color选中的数据的颜色值否number

DataConfig: object​

属性说明是否必须类型
data_array待选择的列数据是Array<number|string>
support_loop是否支持循环拖拽是boolean
unit单位否string
connector列与列的连接器否string
font_name字体文件路径，参考 TEXT 控件字体设置否string
font_size字体大小否number
select_font_size选中字体大小否number
connector_font_size连接器的大小否number
unit_font_size单位的字体大小否number
init_val_index所在列默认的选中索引否number
col_width所在列宽度，需要所有列都配置才生效否number

CallBack: function​

选择器回调函数

picker_cb(picker: WIDGET, event_type: number, column_index: number, select_index: index): void
参数说明
picker选择器控件实例
event_type选择器回调事件类型，见 EVENT_TYPE
column_index触发选择器事件的列索引
select_index当前列的选中项索引
EVENT_TYPE 值说明
0当前列失去焦点
1当前列获得焦点
2当前列有值选中
function picker_cb(picker, event_type, column_index, select_index) {
  if (event_type == 2) {
    picker.setProperty(prop.TITLE, 'End Date')
    picker.setProperty(prop.SUBTITLE, '3 days in totals')

    picker.setProperty(prop.UPDATE_DATA, {
      col_index: 0,
      val_index: 5,
      data_array: new Array(10).fill(0).map((d, index) => index + 1)
    })

    picker.setProperty(prop.CUR_COLUMN, 1)
  }
}

属性操作​

此处的 SET 和 GET 代表是否支持 widget.setProperty 和 widget.getProperty

属性名SET/GET说明
prop.TITLESET更新标题 title
prop.SUBTITLESET更新副标题 subtitle
prop.UPDATE_DATASET更新某一列数据
prop.CUR_COLUMNSET/GET更新获取当前列

代码示例​

import { Time } from '@zos/sensor'
import { widget, createWidget } from '@zos/ui'

const time = new Time()

const picker_widget = createWidget(widget.WIDGET_PICKER, {
  title: 'Start Date',
  subtitle: '',
  nb_of_columns: 3,
  single_wide: true,
  init_col_index: 1,
  data_config: [
    {
      data_array: new Array(12).fill(0).map((d, index) => index + 1),
      init_val_index: time.getMonth() - 1,
      unit: 'Month',
      support_loop: true,
      font_name: 'fonts/x.ttf',
      font_size: 24,
      select_font_size: 48,
      connector_font_size: 18,
      unit_font_size: 18,
      col_width: 80
    },
    {
      data_array: new Array(31).fill(0).map((d, index) => index + 1),
      init_val_index: time.getDate() - 1,
      unit: 'Day',
      support_loop: true,
      font_name: 'fonts/x.ttf',
      font_size: 24,
      select_font_size: 48,
      connector_font_size: 36,
      unit_font_size: 36,
      col_width: 80
    },
    {
      data_array: new Array(100).fill(0).map((d, index) => index + 1970),
      init_val_index: time.getFullYear() - 1970,
      unit: 'Year',
      support_loop: true,
      font_name: 'fonts/x.ttf',
      font_size: 24,
      select_font_size: 48,
      connector_font_size: 36,
      unit_font_size: 36,
      col_width: 80
    }
  ],
  picker_cb
})

function picker_cb(picker, event_type, column_index, select_index) {
  console.log(
    'timePickerCb: ' + event_type,
    'column_index: ' + column_index,
    'select_index: ' + select_index
  )
}