3.9【HarmonyOS 鸿蒙开发】组件 Picker
作者:韩茹
公司:程序咖(北京)科技有限公司
鸿蒙巴士专栏作家
Picker 提供了滑动选择器,容许用户从预约义范畴中进行抉择。
一、反对的 XML 属性
Picker 的共有 XML 属性继承自:DirectionalLayout
Picker 的自有 XML 属性见下表:
属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 |
---|---|---|---|---|
element_padding | 文本和 Element 之间的间距 Element 必须通过 setElementFormatter 接口配置 | float 类型 | 示意间距尺寸的 float 类型。能够是浮点数值,其默认单位为 px;也能够是带 px/vp/fp 单位的浮点数值;也能够援用 float 资源。 | ohos:element_padding=”30″ ohos:element_padding=”16vp” ohos:element_padding=”$float:padding” |
max_value | 最大值 | integer 类型 | 能够间接设置整型数值,也能够援用 integer 资源。 | ohos:max_value=”10″ ohos:max_value=”$integer:value” |
min_value | 最小值 | integer 类型 | 能够间接设置整型数值,也能够援用 integer 资源。 | ohos:min_value=”1″ ohos:min_value=”$integer:value” |
value | 以后值 | integer 类型 | 能够间接设置整型数值,也能够援用 integer 资源。 | ohos:value=”5″ ohos:value=”$integer:value” |
normal_text_color | 未选中的文本色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:normal_text_color=”#A8FFFFFF” ohos:normal_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_color | 选中的文本色彩 | color 类型 | 能够间接设置色值,也能够援用 color 资源。 | ohos:selected_text_color=”#A8FFFFFF” ohos:selected_text_color=”$color:black” |
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” |
selector_item_num | 显示的我的项目数量 | integer 类型 | 能够间接设置整型数值,也能够援用 integer 资源。 | ohos:selector_item_num=”10″ ohos:selector_item_num=”$integer:num” |
selected_normal_text_margin_ratio | 已选文本边距与失常文本边距的比例 | float 类型 | 能够间接设置浮点数值,也能够援用 float 浮点数资源。取值范畴为 >0。 | ohos:selected_normal_text_margin_ratio=”0.5″ ohos:selected_normal_text_margin_ratio=”$float:ratio” |
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”<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=”true” ohos:wheel_mode_enabled=”$boolean:true” |
二、应用 Picker
1、在 XML 中创立 Picker:
<Picker
ohos:id="$+id:test_picker"
ohos:height="match_content"
ohos:width="300vp"
ohos:background_element="#E1FFFF"
ohos:layout_alignment="horizontal_center"
ohos:normal_text_size="18fp"
ohos:selected_text_size="20fp"/>
创立的选择器:
<img src=”https://img.chengxuka.com/WX20210616-161948@2x.png/mark” alt=”WX20210616-161948@2x” style=”zoom:50%;” />
2、在 MainAbilitySlice.java 中,设置 Picker 的取值范畴
Picker picker = (Picker) findComponentById(ResourceTable.Id_test_picker);
picker.setMinValue(0); // 设置选择器中的最小值
picker.setMaxValue(6); // 设置选择器中的最大值
运行成果:
<img src=”https://img.chengxuka.com/pickeryunxing1.gif” alt=”pickeryunxing1″ style=”zoom:50%;” />
3、响应选择器变动
picker.setValueChangedListener((picker1, oldVal, newVal) -> {
// oldVal: 上一次抉择的值;newVal:最新抉择的值
new ToastDialog(getContext())
.setText("oldVal:"+oldVal+",newVal:"+newVal)
.show();});
这里咱们弹出 ToastDialog:
<img src=”https://img.chengxuka.com/WX20210616-162837@2x.png/mark” alt=”WX20210616-162837@2x” style=”zoom:50%;” />
4、格式化 Picker 的显示
通过 Picker 的 setFormatter(Formatter formatter) 办法,用户能够将 Picker 选项中显示的字符串批改为特定的格局。
picker.setFormatter(i -> {
String value;
switch (i) {
case 0:
value = "Mon";
break;
case 1:
value = "Tue";
break;
case 2:
value = "Wed";
break;
case 3:
value = "Thu";
break;
case 4:
value = "Fri";
break;
case 5:
value = "Sat";
break;
case 6:
value = "Sun";
break;
default:
value = "" + i;
}
return value;
});
批改格局后的选择器:
<img src=”https://img.chengxuka.com/WX20210616-163113@2x.png/mark” alt=”WX20210616-163113@2x” style=”zoom:50%;” />
5、设置要显示的字符串数组
对于不间接显示数字的组件,该办法能够设置字符串与数字一一对应。字符串数组长度必须等于取值范畴内的值总数。在应用时须要留神,该办法会笼罩 picker.setFormatter(Formatter formatter) 办法。
Java 代码中:
// 设置要显示的字符串数组 , 该办法会笼罩 picker.setFormatter(Formatter formatter) 办法。picker.setDisplayedData(new String[]{"星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"});
运行成果:
<img src=”https://img.chengxuka.com/WX20210616-163500@2x.png/mark” alt=”WX20210616-163500@2x” style=”zoom:50%;” />
三、款式设置
1、文本相干属性
在 XML 文件中设置文本款式:
<Picker
...
ohos:normal_text_color="#FFA500"
ohos:selected_text_color="#00FFFF"/>
在 Java 代码中设置文本款式:
picker.setNormalTextFont(Font.DEFAULT_BOLD);
picker.setNormalTextSize(40);
picker.setNormalTextColor(new Color(Color.getIntColor("#FFA500")));
picker.setSelectedTextFont(Font.DEFAULT_BOLD);
picker.setSelectedTextSize(40);
picker.setSelectedTextColor(new Color(Color.getIntColor("#00FFFF")));
设置后的款式:
<img src=”https://img.chengxuka.com/WX20210616-163742@2x.png/mark” alt=”WX20210616-163742@2x” style=”zoom:50%;” />
2、设置所选文本的高低边框
在 XML 中设置:
<Picker
...
ohos:bottom_line_element="#40E0D0"
ohos:top_line_element="#40E0D0"/>
在 Java 代码中设置:
ShapeElement shape = new ShapeElement();
shape.setShape(ShapeElement.RECTANGLE);
shape.setRgbColor(RgbColor.fromArgbInt(0xFF40E0D0));
// 独自设置上边框
// picker.setDisplayedLinesTopElement(shape);
// 独自设置下边框
// picker.setDisplayedLinesBottomElement(shape);
// 同时设置高低边框
picker.setDisplayedLinesElements(shape, shape);
设置后的高低边框款式:
<img src=”https://img.chengxuka.com/WX20210616-163949@2x.png/mark” alt=”WX20210616-163949@2x” style=”zoom:50%;” />
3、设置 Picker 中所选文本边距与一般文本边距的比例
在 XML 文件中设置:
<Picker
...
ohos:selected_normal_text_margin_ratio="5.0">
</Picker>
在 Java 代码中设置:
picker.setSelectedNormalTextMarginRatio(5.0f);
设置边距后的成果:
<img src=”https://img.chengxuka.com/WX20210616-164206@2x.png/mark” alt=”WX20210616-164206@2x” style=”zoom:50%;” />
4、设置抉择轮模式
该模式是来决定 Picker 是否是循环显示数据的。
在 XML 文件中设置:
<Picker
...
ohos:wheel_mode_enabled="true"/>
在 Java 代码中设置:
picker.setWheelModeEnabled(true);
更改抉择轮模式后的显示成果:
<img src=”https://img.chengxuka.com/WX20210616-164419@2x.png/mark” alt=”WX20210616-164419@2x” style=”zoom:50%;” />
5、设置 Picker 的着色器色彩
在 XML 文件中设置:
<Picker
...
ohos:shader_color="#1E90FF"/>
在 Java 代码中设置:
picker.setShaderColor(new Color(Color.getIntColor("#1E90FF")));
设置着色器色彩后的款式:
<img src=”https://img.chengxuka.com/WX20210616-164523@2x.png/mark” alt=”WX20210616-164523@2x” style=”zoom:50%;” />
更多内容:
1、社区:鸿蒙巴士 https://www.harmonybus.net/
2、公众号:HarmonyBus
3、技术交换 QQ 群:714518656
4、视频课:https://www.chengxuka.com