TimePicker组件
有DatePicker的日期选择组件，那么也肯定有类似的事件选择组件。鸿蒙给我们提供了TimePicker组件进行时间选择操作。
下面，我们将详细讲解TimePicker组件的使用规则。
创建TimePicker组件
首先，我们来创建一个TimePicker组件。这里，我们会用到一些前面没有使用过的属性，不过读者别急，后面有表格专门列出其意义。
示例如下：
<TimePicker ohos:id="$+id:test_timepicker" ohos:height="match_content" ohos:width="match_parent" ohos:normal_text_size="25fp" ohos:selected_text_size="30fp" ohos:mode_24_hour="true" ohos:selector_item_num="5" ohos:top_line_element="#FF0000" ohos:bottom_line_element="#FF0000" ohos:wheel_mode_enabled="true" ohos:shader_color="#00BFFF"/> <Text ohos:id="$+id:test_test" ohos:height="match_content" ohos:width="match_content" ohos:text_size="30fp" ohos:text_color="#FF0000" ohos:layout_alignment="center"/>
这里有很多的属性需要注意，下面博主专门列出了一张表格进行解析。
| 属性 | 含义 |
| mode_24_hour | 是否显示24小时制 |
| selector_item_num | 最大显示数据，表示最多显示5个数据在屏幕，只有滑动才能看到其他数据，但总数只有5个 |
| top_line_element | 选择元素的上划线颜色 |
| bottom_line_element | 选择元素的下划线颜色 |
| wheel_mode_enabled | 是否循环拨动选择时间（比如小时数据滑动到23后，又会从0开始，而不是终结） |
| shader_color | 着色器颜色 |
接着，我们需要在Java代码中，设置TimePicker组件的初识选中时间为当前时间，同时监听其选中的数据变更时间。
public class MainAbilitySlice extends AbilitySlice{ private TimePicker timePicker; private Text time_text; HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG"); @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); this.timePicker=(TimePicker)findComponentById(ResourceTable.Id_test_timepicker); this.time_text=(Text)findComponentById(ResourceTable.Id_test_test); Calendar now = Calendar.getInstance(); int hour=Integer.valueOf(now.get(Calendar.HOUR_OF_DAY)); int minute=Integer.valueOf(now.get(Calendar.MINUTE)); int second=Integer.valueOf(now.get(Calendar.SECOND)); this.timePicker.setHour(hour); this.timePicker.setMinute(minute); this.timePicker.setSecond(second); this.time_text.setText(String.valueOf(hour)+"："+String.valueOf(minute)+"："+String.valueOf(second)); this.timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() { @Override public void onTimeChanged(TimePicker timePicker, int i, int i1, int i2) { time_text.setText(String.format("%02d：%02d：%2d", i, i1, i2)); } }); } }
运行之后的效果如下首图所示。
其中属性
非24小时制
在前面的属性中，我们既然能设置24小时制，那么肯定也能选择非24小时制。比如我们在XML布局文件中，添加如下代码：
<TimePicker ohos:id="$+id:test_timepicker" ohos:height="match_content" ohos:width="match_parent" ohos:normal_text_size="25fp" ohos:selected_text_size="30fp" ohos:selector_item_num="5" ohos:mode_24_hour="false" ohos:top_line_element="#FF0000" ohos:bottom_line_element="#FF0000" ohos:wheel_mode_enabled="true" ohos:shader_color="#00BFFF" ohos:am_pm_order="3"/>
这里，我们把mode_24_hour属性设置为false，同时增加了一个am_pm_order属性。也就是上下午选择。
am_pm_order取值为0或2时，上下午选择在左边；该属性取值为1或者3时，上下午选择在右边。
因为更改为12小时制，所以Java代码也要做略微的更改以替换。示例如下：
public class MainAbilitySlice extends AbilitySlice{ private TimePicker timePicker; private Text time_text; HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG"); @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); this.timePicker=(TimePicker)findComponentById(ResourceTable.Id_test_timepicker); this.time_text=(Text)findComponentById(ResourceTable.Id_test_test); Calendar now = Calendar.getInstance(); int hour=Integer.valueOf(now.get(Calendar.HOUR_OF_DAY)); int minute=Integer.valueOf(now.get(Calendar.MINUTE)); int second=Integer.valueOf(now.get(Calendar.SECOND)); if(hour>12){ hour=hour-12; } this.timePicker.setHour(hour); this.timePicker.setMinute(minute); this.timePicker.setSecond(second); this.time_text.setText(String.valueOf(hour)+"："+String.valueOf(minute)+"："+String.valueOf(second)); this.timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() { @Override public void onTimeChanged(TimePicker timePicker, int i, int i1, int i2) { if(i>12){ i=i-12; } time_text.setText(String.format("%02d：%02d：%2d", i, i1, i2)); } }); } }
运行之后，效果如下：
滚动与隐藏
在有些情况下，比如我们设置一般闹钟的时候，应该没有设置秒吧？都是设置时分就行了。所以，有些情况下我们需要隐藏秒数据。
这个时候，我们可以用到showSecond()函数，示例如下：
this.timePicker.showSecond(false);
这样设置之后，我们就不会有选择秒的选项出现。同样的showHour()与showMinute()可以隐藏小时或者分的选择。
一般情况，Picker衍生的组件都可以通过滑动或者点击选择操作。但如果你觉得需要固定但不必给用户选择的权力，可以将其禁止。示例如下：
this.timePicker.enableHour(false);
比如上面的代码，让小时选择器无法滚动，只能通过点击进行切换。
以上两种代码实现的效果如下所示：
这里，无法选择小时数据，永远固定着。
