技術標籤：HarmonyOS鴻蒙

一 概述

• Picker的基本使用
• Picker樣式設定

二 Picker的基本使用

2.1 在XML中建立Picker(預設0~9)

<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="16fp"
    ohos:selected_text_size="16fp"/>
 

2.2 設定Picker的取值範圍

Picker picker = (Picker) findComponentById(ResourceTable.Id_test_picker);
picker.setMinValue(0); // 設定選擇器中的最小值
picker.setMaxValue(6); // 設定選擇器中的最大值

2.3 響應選擇器變化

picker.setValueChangedListener(new Picker.ValueChangedListener() {
            @Override
            public void onValueChanged(Picker picker, int oldV, int newV) {
                //new ToastDialog(getContext()).setText("oldV="+oldV+":newV="+newV).show();
            }
        });
 

2.4 格式化Picker的顯示

picker.setFormatter(new Picker.Formatter() {
    @Override
     public String format(int 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 = "Mon";
                    break;
             }
             return value;
     }
 });
 

2.4 設定要顯示的字串陣列

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

三 樣式設定

3.1 文字相關屬性

在XML檔案中設定文字樣式

<Picker
    ...
    ohos:normal_text_size="16fp"
    ohos:normal_text_color="#FFA500"
    ohos:selected_text_size="16fp"
    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")));

設定後的樣式

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

設定後的上下邊框樣式

3.3 設定Picker的著色器顏色

在XML檔案中設定

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

在Java程式碼中設定

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

設定著色器顏色後的樣式

3.4 設定Picker中所選文字邊距與普通文字邊距的比例

在XML檔案中設定

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

在Java程式碼中設定：

picker.setSelectedNormalTextMarginRatio(5.0f);

設定邊距後的效果

3.5 設定選擇輪模式

該模式是來決定Picker是否是迴圈顯示資料的

boolean isWheel = picker.isWheelModeEnabled(); // 獲取當前是否是選擇輪模式
picker.setWheelModeEnabled(!isWheel);

更改選擇輪模式後的顯示效果