乐趣区

关于harmonyos:311HarmonyOS鸿蒙开发组件TimePicker

jiezi

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

退出移动版