鸿蒙应用开发 | 时间选择器(TimePicker)的功能和用法_鸿蒙开发如何设置时间选择器最大可选时间-优快云博客

简介

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

用到的属性

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

实战

1，创建一个项目添加 TimePicker

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

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

2，TimePicker 设置样式。

<TimePicker
  ohos: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"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:padding="20vp"
    ohos:orientation="vertical">
 
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="16vp"
        ohos:bottom_margin="10vp"
        ohos:text="默认事件选择器"/>
 
    <TimePicker
        ohos:id="$+id:time_picker"
        ohos:height="match_content"
        ohos:width="match_parent"
        />
 
    <Text
        ohos: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="选择时间:"/>
 
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="16vp"
        ohos:bottom_margin="10vp"
        ohos:text="时间选择器 设置样式"/>
 
    <TimePicker
        ohos: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"
        />
 
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="16vp"
        ohos:top_margin="10vp"
        ohos:bottom_margin="10vp"
        ohos:text="时间选择器 设置样式"/>
 
    <TimePicker
        ohos: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 {
    @Override
    public 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() {
            @Override
            public 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);
    }
 
    @Override
    public void onActive() {
        super.onActive();
    }
 
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.youkuaiyun.com/jianpengxuexikaifa/article/details/118631934