当前位置 博文首页 > 程序员漫话编程的博客:鸿蒙应用开发 | Picker选择器的功能和用

    程序员漫话编程的博客:鸿蒙应用开发 | Picker选择器的功能和用

    作者:[db:作者] 时间:2021-09-18 18:59

    导语:大家好,我是你们的朋友 朋哥。

    上一篇原创文章? 解析了 图片视图?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

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

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

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

    作者:码工
    ?

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

    cs