鸿蒙开发（7）---Picker组件_鸿蒙textpicker 多级

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"/>
1
2
3
4
5
6
7
8
9

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);
    }
}
1
2
3
4
5
6
7
8
9
10
11

运行之后，效果如下：

这里的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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

这里有几点需要注意：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

这里只多了2个属性，也就是shader_color，这个代表其着色器颜色。而为了等比例分配两个组件，同时将weight也设置为1。

运行效果如首图所示。