鸿蒙开发(7)---Picker组件

简介: 鸿蒙开发(7)---Picker组件

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。


运行效果如首图所示。

相关文章
|
11天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之RowSplit容器组件
60 0
|
11天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Counter容器组件
49 1
|
11天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之ColumnSplit容器组件
43 0
|
11天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Column容器组件
60 0
|
11天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Badge组件
75 0
|
11天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之QRCode组件
71 2
|
11天前
|
IDE 开发工具 数据安全/隐私保护
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之PatternLock组件
67 0
|
11天前
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
179 0
|
11天前
|
IDE 开发工具 Windows
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
62 3
|
11天前
|
IDE 开发工具 Windows
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件
32 1