鸿蒙应用开发 | Picker选择器的功能和用法

导语：大家好，我是你们的朋友 朋哥。

上一篇原创文章  解析了 图片视图 Image的功能和用法。鸿蒙中这个是非常实用的，如果是作为一个小图标或者按钮样式 可以使用Text或者Button 给他们设置背景图片。

码工：今天学习一个 选择器的组件，选择器顾名思义就是多选项选择。

学弟：这个选择器主要用于做什么呢？

码工：这个就需要你想象一下，如果你要开发一个 注册界面，是不是需要选择性别，性别一般都是三个，男，女，其它，这个时候 为了用户体验，肯定要做 弹出界面 来滚动选择。

还有很多其它场景，选择时间，选择地区。
 

好了，下面开始 我们今天的内容 Picker......
 

下面我们开始今天的文章，还是老规矩，通过如下几点来说：
 

1，简介 

2，用到的属性 

3，实战

简介

Picker提供了滑动选择器，允许用户从预定义范围中进行选择。一般都是在三个以上选项的时候 才建议使用 该功能。

如下图这种，可以上下滑动选择需要的信息。

用到的属性

Picker的共有XML属性继承自：DirectionalLayout (线性布局)，所以说 学习好布局多么的重要，很多无法实现的布局 都可以通过重写来自定义。

属性	描述
element_padding	文本和Element之间的间距 Element必须通过setElementFormatter接口配置
max_value	最大值
min_value	最小值
value	当前值
normal_text_color	未选中的文本颜色
normal_text_size	取消选中的文本大小
selected_text_color	选中的文本颜色
selected_text_size	选中的文本大小
selector_item_num	显示的项目数量
selected_normal_text_margin_ratio	已选文本边距与正常文本边距的比例
shader_color	着色器颜色
top_line_element	选中项的顶行
bottom_line_element	选中项的底线
wheel_mode_enabled	选择轮是否绕行

本篇讲解的属性 主要这几种，也是最常用的几种：
 

ohos:normal_text_size="16fp"  // 默认字体大小

ohos:normal_text_color="#FFA500"  // 默认字体颜色

ohos:selected_text_size="16fp"  // 选中字体大小 

ohos:selected_text_color="#00FFFF"  // 选中字体颜色

ohos:bottom_line_element="#40E0D0"  // 选中项底部分割线颜色

ohos:top_line_element="#40E0D0"  // 选中项顶部分割线颜色

// 下面两个不常用，因为一般 选择器中数据一般是没有规律，都是需要自定义设置。

ohos:min_value="1"

ohos:max_value="10"

实战

1，创建一个项目 添加 Picker
​​​​​

<Picker
    ohos:id="$+id:picker"
    ohos:height="100vp"
    ohos:width="match_content"
    ohos:layout_alignment="horizontal_center"
    ohos:background_element="#E1FFFF"
    ohos:normal_text_size="16fp"
    ohos:selected_text_size="22fp"
    ohos:min_value="100"
    ohos:max_value="120"
    />

为了能更好的理解 ，这个是完全使用配置属性来设置，所以设置了一个滑动选中数据 是 100 -120。
属性也只是设置了选中和未选中的字体大小。

2，下面我们添加一个 时间选择器，获取时间。
 

布局文件：

<?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="vertical">

    <Picker
        ohos:id="$+id:picker"
        ohos:height="100vp"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:background_element="#E1FFFF"
        ohos:normal_text_size="16fp"
        ohos:selected_text_size="22fp"
        ohos:wheel_mode_enabled="true"
        ohos:min_value="100"
        ohos:max_value="120"
        />


    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="center"
        ohos:top_margin="50vp"
        ohos:background_element="#000000"
        ohos:orientation="horizontal">

        <Picker
            ohos:id="$+id:picker1"
            ohos:height="match_content"
            ohos:width="0vp"
            ohos:weight="1"
            ohos:layout_alignment="horizontal_center"
            ohos:background_element="#0000cc"
            ohos:normal_text_size="16fp"
            ohos:selected_text_size="25fp"
            ohos:normal_text_color="#ffffff"
            ohos:bottom_line_element="#999999"
            ohos:top_line_element="#999999"
            ohos:wheel_mode_enabled="true"
            />

        <Picker
            ohos:id="$+id:picker2"
            ohos:height="match_content"
            ohos:width="0vp"
            ohos:weight="1"
            ohos:layout_alignment="horizontal_center"
            ohos:background_element="#0066cc"
            ohos:normal_text_size="16fp"
            ohos:selected_text_size="25fp"
            ohos:normal_text_color="#ffffff"
            ohos:selected_text_color="#FF3030"
            ohos:wheel_mode_enabled="true"
            />

        <Picker
            ohos:id="$+id:picker3"
            ohos:height="match_content"
            ohos:width="0vp"
            ohos:weight="1"
            ohos:layout_alignment="horizontal_center"
            ohos:background_element="#00cccc"
            ohos:normal_text_size="16fp"
            ohos:selected_text_size="25fp"
            ohos:normal_text_color="#7FFF00"
            ohos:selected_text_color="#000000"
            ohos:wheel_mode_enabled="true"
            />

    </DirectionalLayout>

</DirectionalLayout>

1，布局中添加了四个选择器，第一个时默认数字在100-120之间的数字。
2，第二个选择器设置星期，可以设置上下的下划线
3，第三个选择器设置了选中选项的颜色
4，第四个选择器设置了未选中选项的颜色

代码逻辑：

package com.example.picker.slice;

import com.example.picker.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Picker;

import java.util.ArrayList;
import java.util.List;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        Picker picker1 = (Picker)findComponentById(ResourceTable.Id_picker1);
        picker1.setDisplayedData(new String[]{"星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"});

        Picker picker2 = (Picker)findComponentById(ResourceTable.Id_picker2);
        List<String> shiList =new ArrayList<String>();
        for(int i=1;i<=12;i++){
            shiList.add(i+"时");
        }
        String [] shi = shiList.toArray( new String[]{});

        picker2.setMaxValue(12);
        picker2.setDisplayedData(shi);

        Picker picker3 = (Picker)findComponentById(ResourceTable.Id_picker3);

        List<String> fenList =new ArrayList<String>();
        for(int i=0;i<=59;i++){
            fenList.add(i+"分");
        }
        String [] fen = fenList.toArray( new String[]{});
        picker3.setMaxValue(60);
        picker3.setDisplayedData(fen);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

1，通过picker1.setDisplayedData属性设置选择器的内容信息
2，通过picker3.setMaxValue(60);属性设置选择器的数据的内容大小。

老规矩 代码不能少，要不然小伙伴该说我小气了。
源码：
https://gitee.com/codegrowth/haomony-develop/tree/master/Picker

关注公众号【程序员漫话编程】，后台回复 ”鸿蒙“ ，即可获得上千鸿蒙开源组件。

原创不易，有用就关注一下。要是帮到了你 就给个三连吧，多谢支持。
 

觉得不错的小伙伴，记得帮我 点个赞和关注哟，笔芯笔芯~**

作者：码工
 

有问题请留言或者私信，可以 微信搜索：程序员漫话编程，关注公众号获得更多免费学习资料。