鸿蒙应用开发 | 时间选择器(TimePicker)的功能和用法

导语：大家好，我是你们的朋友朋哥。

上一篇原创文章日期选择器，设置了日期选择控件。

今天来说说时间选择器，时间选择器很简答，因为他和上一篇的日期选择器很多属性是一样的，可以通过组件选择时间，时间格式未时分秒，可以分为上午和下午。

好了，下面开始我们今天的内容 TimePicker......

下面我们开始今天的文章，还是老规矩，通过如下几点来说：

1，简介
2，用到的属性
3，实战

简介

TimePicker主要供用户选择时间。可以动态控制时分秒的样式。

用到的属性

TimePicker的共有XML属性继承自：StackLayout。

实战

1，创建一个项目添加 TimePicker

<TimePickerohos:id="$+id:time_picker"ohos:height="match_content"ohos:width="match_parent"/>

1，默认添加控件后显示效果如下：

2，TimePicker 设置样式。

<TimePickerohos:id="$+id:time_picker1"ohos:height="match_content"ohos:width="match_parent"ohos:selected_text_color="#007DFF"ohos:selected_text_size="20fp"ohos:operated_text_color="#FF9912"ohos:selected_normal_text_margin_ratio="10"ohos:shader_color="#00BFFF"ohos:bottom_line_element="#00BFFF"ohos:top_line_element="#000000"/>

1,在时间选择器设置样式的时候会发现很多和 DatePicker一样的属性，所以你会发现鸿蒙真正强大的地方就是简单，复杂的东西已经封装好了。

ohos:selected_text_color="#007DFF" // 设置选中颜色

ohos:selected_text_size="20fp" //设置选中文字大小

ohos:operated_text_color="#FF9912" // 操作项的文本颜色

ohos:selected_normal_text_margin_ratio="10" // 设置TimePicker中所选文本边距与普通文本边距的比例

ohos:shader_color="#00BFFF" // 选择器背景颜色

ohos:bottom_line_element="#00BFFF" // 选中底部线颜色

ohos:top_line_element="#000000" // 选中头部线颜色

完整效果：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:padding="20vp"ohos:orientation="vertical"><Textohos:height="match_content"ohos:width="match_content"ohos:text_size="16vp"ohos:bottom_margin="10vp"ohos:text="默认事件选择器"/><TimePickerohos:id="$+id:time_picker"ohos:height="match_content"ohos:width="match_parent"/><Textohos:id="$+id:text_time"ohos:height="match_content"ohos:width="match_content"ohos:top_margin="10vp"ohos:bottom_margin="10vp"ohos:text_size="16vp"ohos:text="选择时间:"/><Textohos:height="match_content"ohos:width="match_content"ohos:text_size="16vp"ohos:bottom_margin="10vp"ohos:text="时间选择器 设置样式"/><TimePickerohos:id="$+id:time_picker1"ohos:height="match_content"ohos:width="match_parent"ohos:selected_text_color="#007DFF"ohos:selected_text_size="20fp"ohos:operated_text_color="#FF9912"ohos:selected_normal_text_margin_ratio="10"ohos:shader_color="#00BFFF"ohos:bottom_line_element="#00BFFF"ohos:top_line_element="#000000"/><Textohos:height="match_content"ohos:width="match_content"ohos:text_size="16vp"ohos:top_margin="10vp"ohos:bottom_margin="10vp"ohos:text="时间选择器 设置样式"/><TimePickerohos:id="$+id:time_picker2"ohos:height="match_content"ohos:width="match_parent"ohos:text_am="8:00:00"ohos:text_pm="22:00:00"/></DirectionalLayout>

package com.example.timepicker.slice;import com.example.timepicker.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Text;
import ohos.agp.components.TimePicker;public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);Text text_time = (Text) findComponentById(ResourceTable.Id_text_time);TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);// 获取时间int hour = timePicker.getHour();int minute = timePicker.getMinute();int second = timePicker.getSecond();//设置时间timePicker.setHour(19);timePicker.setMinute(18);timePicker.setSecond(12);timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {@Overridepublic void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {text_time.setText("选择时间:"+hour+"/"+minute+"/"+second);}});//        // 隐藏小时的显示
//        timePicker.showHour(false);
//        // 隐藏分钟
//        timePicker.showMinute(false);
//        // 隐藏秒
//        timePicker.showSecond(false);//        // 设置小时selector无法滚动选择
//        timePicker.enableHour(false);
//        // 设置分钟selector无法滚动
//        timePicker.enableMinute(false);
//        // 设置秒selector无法滚动
//        timePicker.enableSecond(false);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

老规矩代码不能少，下载代码运行效果看看，记得点个赞。
源码：
https://gitee.com/codegrowth/haomony-develop/tree/master/TimePicker

关注公众号【程序员漫话编程】，后台回复 ”鸿蒙“ ，即可获得上千鸿蒙开源组件。

原创不易，有用就关注一下。要是帮到了你就给个三连吧，多谢支持。

觉得不错的小伙伴，记得帮我 点个赞和关注哟，笔芯笔芯~**

作者：码工

有问题请留言或者私信，可以微信搜索：程序员漫话编程，关注公众号获得更多免费学习资料。

鸿蒙应用开发 | 时间选择器(TimePicker)的功能和用法相关推荐

android 开发时间选择器TimePicker的使用
android 开发时间选择器TimePicker的使用 android系统自带时间控件: DatePicker 日期显示控件 DatePickerDialog 日期对话框控件 TimePicke ...
鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法
导语:大家好,我是你们的朋友朋哥,十年码农经验,对技术情有独钟. 今天来一个大招,鸿蒙中的顶部切换选项卡 TabList,开发应用的时候会经常用到,一般作为二级内容分类来用的 . 不多说,今天的 ...
时间选择器timePicker实现根据当前选择日期(当天/非当天)禁用时间段
文章目录需求描述解决日期选择器datePicker实现只能选择当天及之后的日期时间选择器timePicker实现根据datePicker选择的日期动态变化开始时间小结需求描述最近在做 ...
时间选择器(timepicker)
可以使用Slider拖动选择,也可以使用timespinner改变时间,或者手工填写. 自动判断位置效果: 源码: <!DOCTYPE html> <html xmlns=&quo ...
鸿蒙系统休眠时间,关闭系统休眠功能利弊
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 关闭系统休眠功能利弊如下: 1.利可以减少硬盘垃圾的产生和积累,能够一定程度上节省功耗,使得电脑的运行速度更快. 2.弊关闭休 ...
android timepicker 不可编辑,iView -- TimePicker 自定义修改时间选择器选择时间面板样式...
期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改样式. 原生js 代码,如下: ...
Android中TimePicker时间选择器的使用和获取选择的时和分
场景实现效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现将布局改 ...
移动端material风格日期时间选择器
好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等);所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动图看看 ...
android简单时间选择器TiemPicker
1.在布局文件中添加TimePicker: <TimePickerandroid:layout_width="wrap_content"android:layout_heig ...
Android中实现日期时间选择器(DatePicker和TimePicker)
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...

鸿蒙应用开发 | 时间选择器(TimePicker)的功能和用法

简介

用到的属性

实战

鸿蒙应用开发 | 时间选择器(TimePicker)的功能和用法相关推荐

最新文章

热门文章