关于harmonyos:39HarmonyOS鸿蒙开发组件Picker

3.9【HarmonyOS 鸿蒙开发】组件 Picker

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

Picker 提供了滑动选择器，容许用户从预约义范畴中进行抉择。

一、反对的 XML 属性

Picker 的共有 XML 属性继承自：DirectionalLayout

Picker 的自有 XML 属性见下表：

二、应用 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