共计 4721 个字符,预计需要花费 12 分钟才能阅读完成。
3.11【HarmonyOS 鸿蒙开发】组件 TimePicker
作者:韩茹
公司:程序咖(北京)科技有限公司
鸿蒙巴士专栏作家
TimePicker 次要供用户抉择工夫。
一、反对的 XML 属性
TimePicker 的共有 XML 属性继承自:StackLayout
TimePicker 的自有 XML 属性见下表:
属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 |
---|---|---|---|---|
am_pm_order | 上午下午排列程序 | 0 | 示意 am/pm 列靠工夫选择器起始端显示。 | ohos:am_pm_order=”0″ |
1 | 示意 am/pm 列靠工夫选择器完结端显示。 | ohos:am_pm_order=”1″ | ||
2 | 示意 am/pm 列靠工夫选择器左侧显示。 | ohos:am_pm_order=”2″ | ||
3 | 示意 am/pm 列靠工夫选择器右侧显示。 | ohos:am_pm_order=”3″ | ||
mode_24_hour | 是否 24 小时制显示 | boolean 类型 | 能够间接设置 true/false,也能够援用 boolean 资源。 | ohos:mode_24_hour=”true” ohos:mode_24_hour=”$boolean:true” |
hour | 显示小时 | integer 类型 | 能够间接设置整型数值,也能够援用 integer 资源。小时取值范畴必须在 0~23。 | ohos:hour=”23″ ohos:hour=”$integer:hour” |
minute | 显示分钟 | integer 类型 | 能够间接设置整型数值,也能够援用 integer 资源。分钟取值范畴必须在 0~59。 | ohos:minute=”59″ ohos:minute=”$integer:minute” |
second | 显示秒 | integer 类型 | 能够间接设置整型数值,也能够援用 integer 资源。秒钟取值范畴必须在 0~59。 | ohos:second=”59″ ohos:second=”$integer:second” |
normal_text_color | 勾销选中文本的色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:normal_text_color=”#FFFFFFFF” ohos:normal_text_color=”$color:black” |
selected_text_color | 选中文本的色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:selected_text_color=”#FF45A5FF” ohos:selected_text_color=”$color:black” |
operated_text_color | 操作项的文本色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:operated_text_color=”#A8FFFFFF” ohos:operated_text_color=”$color:black” |
normal_text_size | 勾销选中文本的大小 | float 类型 | 示意尺寸的 float 类型。能够是浮点数值,其默认单位为 px;也能够是带 px/vp/fp 单位的浮点数值;也能够援用 float 资源。 | ohos:normal_text_size=”30″ ohos:normal_text_size=”16fp” ohos:normal_text_size=”$float:size_value” |
selected_text_size | 选中文本的大小 | float 类型 | 示意尺寸的 float 类型。能够是浮点数值,其默认单位为 px;也能够是带 px/vp/fp 单位的浮点数值;也能够援用 float 资源。 | ohos:selected_text_size=”30″ ohos:selected_text_size=”16fp” ohos:selected_text_size=”$float:size_value” |
selected_normal_text_margin_ratio | 已选文本边距与失常文本边距的比例 | float 类型 | 能够间接设置浮点数值,也能够援用 float 浮点数资源。取值需 >0.0f,默认值为 1.0f。 | ohos:selected_normal_text_margin_ratio=”0.5″ ohos:selected_normal_text_margin_ratio=”$float:ratio” |
selector_item_num | 显示的项数 | integer 类型 | 能够间接设置整型数值,也能够援用 integer 资源。 | ohos:selector_item_num=”3″ ohos:selector_item_num=”$integer:num” |
shader_color | 着色器色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:shader_color=”#A8FFFFFF”ohos:shader_color=”$color:black” |
text_am | 上午文本 | string 类型 | 能够间接设置文本字串,也能够援用 string 资源。 | ohos:text_am=”8:00:00″ohos:text_am=”$string:am” |
text_pm | 下午文本 | string 类型 | 能够间接设置文本字串,也能够援用 string 资源。 | ohos:text_pm=”22:00:00″ohos:text_pm=”$string:pm” |
top_line_element | 选中项的顶行 | Element 类型 | 可间接配置色值,也可援用 color 资源或援用 media/graphic 下的图片资源。 | ohos:top_line_element=”#FFFFFFFF” ohos:top_line_element=”$color:black”<br />ohos:top_line_element=”$media:media_src” ohos:top_line_element=”$graphic:graphic_src” |
bottom_line_element | 选中项的底线 | Element 类型 | 可间接配置色值,也可援用 color 资源或援用 media/graphic 下的图片资源。 | ohos:bottom_line_element=”#FFFFFFFF” ohos:bottom_line_element=”$color:black”<br />ohos:bottom_line_element=”$media:media_src” ohos:bottom_line_element=”$graphic:graphic_src” |
wheel_mode_enabled | 抉择轮是否绕行 | boolean 类型 | 能够间接设置 true/false,也能够援用 boolean 资源。 | ohos:wheel_mode_enabled=”false” ohos:wheel_mode_enabled=”$boolean:false” |
二、应用 TimePicker
1、创立 TimePicker
<TimePicker
ohos:id="$+id:time_picker"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="#22ff0000"
/>
创立一个默认的 TimePicker 的成果
2、获取工夫
TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);
int hour = timePicker.getHour();
int minute = timePicker.getMinute();
int second = timePicker.getSecond();
System.out.println("hour:"+hour+",minute:"+minute+",second:"+second);
运行后果:
3、设置工夫
timePicker.setHour(19);
timePicker.setMinute(18);
timePicker.setSecond(12);
设置工夫成果:
4、响应工夫扭转事件
timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {
@Override
public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {new ToastDialog(getContext())
.setText("工夫:"+hour+":"+minute+":"+second)
.show();}
});
运行成果:
<img src=”https://img.chengxuka.com/WX20210617-110942@2x.png/mark” alt=”WX20210617-110942@2x” style=”zoom:50%;” />
三、显示款式配置
1、设置字体属性
设置未选中字体的色彩和大小:
<TimePicker
...
ohos:normal_text_color="#007DFF"
ohos:normal_text_size="20fp"
/>
设置未选中字体的色彩和大小的成果:
设置选中字体的色彩和大小
<TimePicker
...
ohos:selected_text_color="#007DFF"
ohos:selected_text_size="20fp"
/>
设置选中字体的色彩和大小成果:
设置操作项文本色彩
<TimePicker
...
ohos:operated_text_color="#FF00FF"
/>
操作项文本色彩设置成果
2、设置 TimePicker 中所选文本边距与一般文本边距的比例
<TimePicker
...
ohos:selected_normal_text_margin_ratio="10"
/>
选中与未选中文本距离成果
3、设置选中工夫的高低边框
<TimePicker
...
ohos:bottom_line_element="#00BFFF"
/>
设置高低区域分割线色彩成果
4、设置着色器色彩
<TimePicker
...
ohos:shader_color="#00BFFF"
/>
5、设置 12 小时制下显示款式
AM/PM 默认置于左侧,如需位于左边:
<TimePicker
...
ohos:am_pm_order="1"
/>
设置 AM/PM 位于左边显示的成果
四、范畴抉择设置
1、设置暗藏或显示时分秒
暗藏小时的显示
timePicker.showHour(false);
小时不显示成果:
暗藏分钟
timePicker.showMinute(false);
暗藏分钟成果
暗藏秒
timePicker.showSecond(false);
暗藏秒成果
2、设置 TimePicker 的 selector 是否能够滑动
设置小时 selector 无奈滚动抉择
timePicker.enableHour(false);
小时 selector 无奈滚动抉择成果
设置分钟 selector 无奈滚动
timePicker.enableMinute(false);
分钟 selector 固定无奈抉择成果
设置秒 selector 无奈滚动
timePicker.enableSecond(false);
秒 selector 无奈滚动抉择成果
更多内容:
1、社区:鸿蒙巴士 https://www.harmonybus.net/
2、公众号:HarmonyBus
3、技术交换 QQ 群:714518656
4、视频课:https://www.chengxuka.com