Picker組件

在眾多的App中，我們經常會看到各式各樣的滑動選擇器，比如說某些快遞的App，選擇地址分級的時候，往往通過滑動選擇城市，

這個在鴻蒙中可以通過Picker組件來實作，今天，我們就來詳細講解Picker組件的使用方式，

實作簡單的Picker組件

首選，我們來實作一個簡單的Picker滑動選擇器組件，示例代碼如下：

<Picker
    ohos:id="$+id:test_picker"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:layout_alignment="horizontal_center"
    ohos:normal_text_size="30vp"
    ohos:selected_text_size="50vp"
    ohos:selected_text_color="#00FF00"
    ohos:normal_text_color="#0000FF"/>

public class MainAbilitySlice extends AbilitySlice{
    private Picker picker;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.picker=(Picker)findComponentById(ResourceTable.Id_test_picker);
        this.picker.setMinValue(0);
        this.picker.setMaxValue(10);
    }
}

運行之后，效果如下：

這里的XML布局屬性，基本上都使用過，比如normal_text_size表示默認字體大小，selected_text_size表示選中的字體大小，后面顏色類似，

實作城市選擇器

一般來說，Picker組件用到最多的就是城市的選擇，這里，我們就來實戰如果將內容替換成字串，示例代碼如下：

public class MainAbilitySlice extends AbilitySlice{
    private Picker picker_province;
    private Picker picker_city;
    private Map<String, String[]> city_map = new HashMap<String, String[]>();
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.picker_province=(Picker)findComponentById(ResourceTable.Id_picker_province);
        this.picker_city=(Picker)findComponentById(ResourceTable.Id_picker_city);
        city_map.put("湖北省",new String[]{"武漢市","宜昌市","黃岡市","荊州市"});
        city_map.put("湖南省",new String[]{"長沙市","株洲市","衡陽市","永州市"});
        city_map.put("廣東省",new String[]{"深圳市","珠海市","佛山市","茂名市"});
        String[] keyStr=Arrays.stream(city_map.keySet().toArray()).toArray(String[]::new);
        this.picker_province.setDisplayedData(keyStr);
        this.picker_province.setMaxValue(keyStr.length-1);
        this.picker_city.setDisplayedData(city_map.get(keyStr[picker_province.getValue()]));
        this.picker_province.setValueChangedListener(new Picker.ValueChangedListener() {
            @Override
            public void onValueChanged(Picker picker, int i, int i1) {
                if(i1>=0 && i1<city_map.size()){
                    picker_city.setDisplayedData(city_map.get(keyStr[i1]));
                    picker_city.setMaxValue(city_map.get(keyStr[i1]).length-1);
                }
            }
        });
    }
}

這里有幾點需要注意：

1. setMaxValue是設定Picker組件有多少滑動項，前面沒有設定資料所以默認就是索引，但如果設定了資料，不設定該選擇項，那么可能導致資料選中空白項，（比如這里省份是3個，那么最大值就設定為2，因為索引從0開始的，0，1，2剛好3個選項）
2. Picker組件設定字串資料是通過setDisplayedData進行設定的，
3. setValueChangedListener方法負責監聽Picker組件的滑動事件，其中onValueChanged方法的i表示滑動到新資料的舊資料索引，i1就是選中項索引，

至于其他的代碼都是Java的基礎知識，這里不在贅述，而XML布局檔案的代碼如下所示：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="horizontal">

    <Picker
        ohos:id="$+id:picker_province"
        ohos:height="match_content"
        ohos:width="0vp"
        ohos:weight="1"
        ohos:layout_alignment="horizontal_center"
        ohos:normal_text_size="20vp"
        ohos:selected_text_size="30vp"
        ohos:selected_text_color="#00FF00"
        ohos:shader_color="#1E90FF"
        ohos:normal_text_color="#0000FF"/>

    <Picker
        ohos:id="$+id:picker_city"
        ohos:height="match_content"
        ohos:width="0vp"
        ohos:weight="1"
        ohos:layout_alignment="horizontal_center"
        ohos:normal_text_size="20vp"
        ohos:selected_text_size="30vp"
        ohos:shader_color="#1E90FF"
        ohos:selected_text_color="#00FF00"
        ohos:normal_text_color="#0000FF"/>
        
</DirectionalLayout>

這里只多了2個屬性，也就是shader_color，這個代表其著色器顏色，而為了等比例分配兩個組件，同時將weight也設定為1，

運行效果如首圖所示，