技術標籤：HarmonyOS鴻蒙

一 概述

• TimePicker的基本使用
• TimePicker樣式配置
• 範圍選擇設定

二 TimePicker的基本使用

2.1 建立TimePicker

XML中配置

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

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

</DirectionalLayout>
 

預設的TimePicker的效果

2.2 設定12小時制（非24小時制）

XML中配置

<TimePicker
    ...
    ohos:24_hour_mode="false"
/>

12小時制效果

2.3 獲取時間

TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);
int hour = timePicker.getHour();
int minute = timePicker.getMinute();
int second = timePicker.getSecond();
 

2.4 設定時間

timePicker.setHour(19);
timePicker.setMinute(18);
timePicker.setSecond(12);

2.5 響應時間改變事件

timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {
    @Override
    public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {
        ...
    }
});

三 顯示樣式配置

3.1 設定字型屬性

3.1.1 設定未選中字型的顏色和大小

XML中配置

<TimePicker
    ...
    ohos:normal_text_color="#007DFF"
    ohos:normal_text_size="20fp"/>

效果圖

3.1.2 設定選中字型的顏色和大小

XML中配置

<TimePicker
    ...
    ohos:selected_text_color="#007DFF"
    ohos:selected_text_size="20fp"/>

設定選中字型的顏色和大小效果

3.1.3 設定操作項文字顏色

XML中配置

<TimePicker
    ...
    ohos:operated_text_color="#FF9912"/>

操作項文字顏色設定效果

3.2 設定TimePicker中所選文字邊距與普通文字邊距的比例

XML中配置

<TimePicker
    ...
    ohos:selected_normal_text_margin_ratio="10"/>

效果圖

3.3 設定著色器顏色

XML中配置

<TimePicker
    ...
    ohos:shader_color="#00BFFF"/>

效果圖

3.4 設定選中時間的上下邊框

XML中配置

<TimePicker
    ...
    ohos:bottom_line_element="#00BFFF"/>

效果圖

3.5 設定12小時制下顯示樣式

XML中配置

<TimePicker
    ...
    ohos:am_pm_order="1"/>

效果圖

四 範圍選擇設定

4.1 設定隱藏或顯示時分秒

4.1.1 隱藏小時的顯示

程式碼中設定

timePicker.showHour(false);

小時不顯示效果

4.1.2 隱藏分鐘

程式碼中設定

timePicker.showMinute(false);

隱藏分鐘效果

4.1.3 隱藏秒

程式碼中設定

timePicker.showSecond(false);

隱藏秒效果

4.2 設定TimePicker的selector是否可以滑動

4.2.1 設定小時selector無法滾動選擇

程式碼中設定

timePicker.enableHour(false);

小時selector無法滾動選擇效果

4.2.2 設定分鐘selector無法滾動

程式碼中設定

timePicker.enableMinute(false);

分鐘selector固定無法選擇效果

4.2.3 設定秒selector無法滾動

程式碼中設定

timePicker.enableSecond(false);

秒selector無法滾動選擇效果