android studio拖拽控件，Harmony OS — Picker滑動選擇器

1、Picker

android studio拖拽控件。##1、Picker 是什么？

Picker提供了滑動選擇器，允許用戶從預定義范圍中進行選擇。

2、簡單實現

• 在XML中創建Picker

<Pickerohos: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"/>

• 設置Picker的取值范圍

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

3、實戰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;
});

• 設置要顯示的字符串數組
  對于不直接顯示數字的組件，該方法可以設置字符串與數字一一對應。字符串數組長度必須等于取值范圍內的值總數。用戶在使用時需要注意，該方法會覆蓋picker.setFormatter(Formatter formatter)方法。

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

4、實戰2：更多樣式

（1）設置文本樣式

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:background_element="black"ohos:orientation="vertical"><Pickerohos: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:normal_text_color="#FFA500"ohos:selected_text_size="16fp"ohos:selected_text_color="#00FFFF"/></DirectionalLayout>

 Picker picker = (Picker) findComponentById(ResourceTable.Id_test_picker);picker.setDisplayedData(new String[]{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"});//設置文本樣式
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")));

（2） 設置所選文本的上下邊框

<Picker...ohos:bottom_line_element="#40E0D0"ohos:top_line_element="#40E0D0"/>

//創建 shape 對象
ShapeElement shape = new ShapeElement();
//設置矩形
shape.setShape(ShapeElement.RECTANGLE);
//設置顏色
shape.setRgbColor(RgbColor.fromArgbInt(0xFF40E0D0));
// 單獨設置上邊框
// picker.setDisplayedLinesTopElement(shape); 
// 單獨設置下邊框
// picker.setDisplayedLinesBottomElement(shape);
// 同時設置上下邊框
picker.setDisplayedLinesElements(shape, shape);

（3）設置Picker的著色器顏色

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

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

（4）設置Picker中所選文本邊距與普通文本邊距的比例

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

picker.setSelectedNormalTextMarginRatio(5.0f);

（5）設置選擇輪模式
該模式是來決定Picker是否是循環顯示數據的。

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

picker.setWheelModeEnabled(true);

5、了解更多

Picker 更多詳情