HarmonyOS —常用组件开发指导-Picker

Picker提供了滑动选择器，允许用户从预定义范围中进行选择。

支持的XML属性

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

Picker的自有XML属性见下表：

使用Picker

• 在XML中创建Picker

<Picker
    ohos:id="$+id:test_picker"
    ohos:height="match_content"
    ohos:width="300vp"
    ohos:background_element="#E1FFFF"
    ohos:layout_alignment="horizontal_center"/>

设置Picker的取值范围

Picker picker = (Picker) findComponentById(ResourceTable.Id_test_picker);
picker.setMinValue(0); // 设置选择器中的最小值
picker.setMaxValue(6); // 设置选择器中的最大值

图1 创建的选择器

响应选择器变化

picker.setValueChangedListener((picker1, oldVal, newVal) -> {
    // oldVal:上一次选择的值； newVal：最新选择的值
});

格式化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;
});

图2 修改格式后的选择器

设置要显示的字符串数组

对于不直接显示数字的组件，该方法可以设置字符串与数字一一对应。字符串数组长度必须等于取值范围内的值总数。用户在使用时需要注意，该方法会覆盖picker.setFormatter(Formatter formatter)方法。

Java代码中

picker.setDisplayedData(new String[]{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"});

样式设置

• 文本相关属性在XML文件中设置文本样式：

<Picker
    ...
    ohos:normal_text_size="16fp"
    ohos:normal_text_color="#FFA500"
    ohos:selected_text_size="16fp"
    ohos:selected_text_color="#00
FFFF"/>

在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")));

图3 设置后的样式

<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);

图4 设置后的上下边框样式

设置Picker的着色器颜色

在XML文件中设置：

<Picker
    ...
    ohos:shader_color="#1E90FF"/>

在Java代码中设置：

picker.setShaderColor(new Color(Color.getIntColor("#1E90FF")));

图5 设置着色器颜色后的样式

设置Picker中已选文本边距与常规文本边距的比例

在XML文件中设置：

<Picker
    ...
    ohos:selected_normal_text_margin_ratio="5.0">
</Picker>

在Java代码中设置：

picker.setSelectedNormalTextMarginRatio(5.0f);

图6 设置边距后的效果

设置选择轮模式

该模式是来决定Picker是否是循环显示数据的。

在XML文件中设置：

<Picker
    ...
    ohos:wheel_mode_enabled="true"/>

在Java代码中设置：

picker.setWheelModeEnabled(true);

图7 设置选择轮模式后的循环显示效果

Picker多级关联

在XML中添加相关联的Picker组件，示例代码如下：

<DirectionalLayout
    ...
    ohos:orientation="horizontal">

    <Picker
        ohos:id="$+id:test_picker1"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:background_element="#E1FFFF"/>
    <!--  请自行设置其他Picker样式-->
    <Picker
        ohos:id="$+id:test_picker2"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:background_element="#A2FFFF"/>
</DirectionalLayout>

在Java代码中进行关联Picker的相关操作，示例代码如下：

    //Picker内的显示内容
    int stringTitleIndex = 0;
    String[] stringTitle = {"A", "B", "C", "D"};
    String[][] stringText = {{"1", "2", "3", "4"}, {"5", "6", "7", "8"},{"9", "10", "11", "12"}, {"13", "14", "15", "16"}};
    private void updatePicker2() {
        Picker picker2 = (Picker) findComponentById(ResourceTable.Id_test_picker2);
        picker2.setMinValue(0);
        picker2.setMaxValue(stringText[stringTitleIndex].length - 1);
        picker2.setValue(0);
        picker2.setFormatter(new Picker.Formatter() {
            @Override
            public String format(int i) {
                return stringText[stringTitleIndex][i];
            }
        });
    }

图8 Picker多级关联效果