3.10【HarmonyOS 鸿蒙开发】组件 DatePicker
作者:韩茹
公司:程序咖(北京)科技有限公司
鸿蒙巴士专栏作家
DatePicker 次要供用户抉择日期。
一、反对的 XML 属性
DatePicker 的共有 XML 属性继承自:StackLayout
DatePicker 的自有 XML 属性见下表:
属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 |
---|---|---|---|---|
date_order | 显示格局,年月日 | 0 | 示意日期以日 - 月 - 年的格局显示。 | ohos:date_order=”0″ |
1 | 示意日期以月 - 日 - 年的格局显示。 | |||
2 | 示意日期以年 - 月 - 日的格局显示。 | |||
3 | 示意日期以年 - 日 - 月的格局显示。 | |||
4 | 示意日期以日 - 月的格局显示。 | |||
5 | 示意日期以月 - 日的格局显示。 | |||
6 | 示意日期以年 - 月的格局显示。 | |||
7 | 示意日期以月 - 年的格局显示。 | |||
8 | 示意只显示年份。 | |||
9 | 示意只显示月份。 | |||
10 | 示意只显示日期。 | |||
day_fixed | 日期是否固定 | boolean 类型 | 能够间接设置 true/false,也能够援用 boolean 资源。 | ohos:day_fixed=”true”ohos:day_fixed=”$boolean:true” |
month_fixed | 月份是否固定 | boolean 类型 | 能够间接设置 true/false,也能够援用 boolean 资源。 | ohos:month_fixed=”true”ohos:month_fixed=”$boolean:true” |
year_fixed | 年份是否固定 | boolean 类型 | 能够间接设置 true/false,也能够援用 boolean 资源。 | ohos:year_fixed=”true”ohos:year_fixed=”$boolean:true” |
max_date | 最大日期 | long 类型 | 能够间接设置长整型值,也能够援用 string 资源。 | ohos:time=”1234567″ohos:time=”$string:date” |
min_date | 最小日期 | long 类型 | 能够间接设置长整型值,也能够援用 string 资源。 | ohos:time=”1234567″ohos:time=”$string:date” |
text_size | 文本大小 | float 类型 | 示意尺寸的 float 类型。能够是浮点数值,其默认单位为 px;也能够是带 px/vp/fp 单位的浮点数值;也能够援用 float 资源。 | ohos:text_size=”30″ohos:text_size=”16fp”ohos:text_size=”$float:size_value” |
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” |
normal_text_color | 勾销选中文本的色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:normal_text_color=”#A8FFFFFF”ohos:normal_text_color=”$color:black” |
selected_text_color | 选中文本的色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:selected_text_color=”#A8FFFFFF”ohos:selected_text_color=”$color:black” |
operated_text_color | 操作项的文本色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:operated_text_color=”#A8FFFFFF”ohos:operated_text_color=”$color:black” |
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=”10″ohos:selector_item_num=”$integer:num” |
shader_color | 着色器色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:shader_color=”#A8FFFFFF”ohos:shader_color=”$color:black” |
top_line_element | 选中项的顶行 | Element 类型 | 可间接配置色值,也可援用 color 资源或援用 media/graphic 下的图片资源。 | ohos:top_line_element=”#FFFFFFFF”ohos:top_line_element=”$color:black”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”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=”true”ohos:wheel_mode_enabled=”$boolean:true” |
二、应用 DatePicker
1、在 XML 中创立 DatePicker
<DatePicker
ohos:id="$+id:date_pick"
ohos:height="match_content"
ohos:width="300vp"
ohos:background_element="#22AA0000"
>
创立默认的 DatePicker:
2、获取以后抉择日期,日 / 月 / 年,DatePicker 默认抉择以后日期。
// 获取 DatePicker 实例
DatePicker datePicker = (DatePicker) findComponentById(ResourceTable.Id_date_pick);
int day = datePicker.getDayOfMonth();
int month = datePicker.getMonth();
int year = datePicker.getYear();
System.out.println("day:"+day+",month:"+month+",year:"+year);
咱们是能够获取到年月日信息的:
3、响应日期扭转事件:
在 XML 中增加 Text 显示抉择日期:
<Text
ohos:id="$+id:text_date"
ohos:height="match_content"
ohos:width="match_parent"
ohos:hint="date"
ohos:text_alignment="center"
ohos:margin="10vp"
ohos:padding="4vp"
ohos:text_color="#AA0000"
ohos:text_size="20fp">
在 Java 代码中响应日期扭转事件:
Text selectedDate = (Text) findComponentById(ResourceTable.Id_text_date);
datePicker.setValueChangedListener(new DatePicker.ValueChangedListener() {
@Override
public void onValueChanged(DatePicker datePicker, int year, int monthOfYear, int dayOfMonth) {
// 格式化显示字符串
selectedDate.setText(String.format("%02d/%02d/%4d", dayOfMonth, monthOfYear, year));
}
}
);
日期扭转响应成果:
4、设置以后日期
datePicker.updateDate(2021, 8, 8);
设置以后日期成果:
5、设置日期的范畴
如需对 DatePicker 的日期抉择范畴有要求,能够设置属性 min_date 和 max_date。设置的值为日期对应的 Unix 工夫戳 。
设置最小日期:
<DatePicker
...
ohos:min_date="1623895868">
</DatePicker>
或者在代码中设置:
datePicker.setMinDate(1623895868);
设置最小日期为 2021/06/17:
设置最大日期:
在 XML 中设置:
<DatePicker
...
ohos:max_date="1630339200">
</DatePicker>
在代码中设置:
datePicker.setMaxDate(1630339200);
设置最大日期为 2021/08/31:
固定年 / 月 / 日
在 XML 中设置:
<DatePicker
...
ohos:year_fixed="true">
</DatePicker>
在代码中设置:
datePicker.setYearFixed(true);
三、款式设置
1、文本相干属性
设置待选项的字体大小和色彩
<DatePicker
...
ohos:normal_text_color="#00FFFF"
ohos:normal_text_size="20fp">
</DatePicker>
设置待选项的字体大小和色彩成果:
设置已选项的字体大小和色彩
在 XML 中设置:
<DatePicker
...
ohos:selected_text_color="#FF00FF"
ohos:selected_text_size="20fp">
</DatePicker>
在代码中设置:
datePicker.setSelectedTextSize(40);
datePicker.setSelectedTextColor(new Color(Color.getIntColor("#FF00FF")));
设置已选项的字体大小和色彩成果:
设置操作项的字体色彩
在 XML 中设置:
<DatePicker
...
ohos:operated_text_color="#FFA500">
</DatePicker>
在代码中设置:
datePicker.setOperatedTextColor(new Color(Color.getIntColor("#FFA500")));
设置操作项的字体色彩成果
2、设置 DatePicker 中所选文本边距与一般文本边距的比例
在 XML 中设置:
<DatePicker
...
ohos:selected_normal_text_margin_ratio="10">
</DatePicker>
在代码中设置:
datePicker.setSelectedNormalTextMarginRatio(10.0f)
已选文本边距与失常文本边距比例设置为 10 的效果图:
3、设置滚轮绕行
在 XML 中设置:
<DatePicker
...
ohos:wheel_mode_enabled="true">
</DatePicker>
在代码中设置:
datePicker.setWheelModeEnabled(true);
滚轮绕行成果:
4、设置选中日期的高低边框
在 XML 中设置:
<DatePicker
...
ohos:top_line_element="#9370DB"
ohos:bottom_line_element="#9370DB">
</DatePicker>
在代码中设置:
ShapeElement shape = new ShapeElement();
shape.setShape(ShapeElement.RECTANGLE);
shape.setRgbColor(RgbColor.fromArgbInt(0xFF9370DB));
datePicker.setDisplayedLinesElements(shape,shape);
增加选中项高低边框成果:
5、设置着色器色彩
在 XML 中设置:
<DatePicker
...
ohos:shader_color="gray">
</DatePicker>
在代码中设置:
datePicker.setShaderColor(new Color(Color.getIntColor("#00CED1")));
设置着色器色彩成果:
更多内容:
1、社区:鸿蒙巴士 https://www.harmonybus.net/
2、公众号:HarmonyBus
3、技术交换 QQ 群:714518656
4、视频课:https://www.chengxuka.com