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。
运行效果如首图所示。
