DevEco组件（笔记）

最新推荐文章于 2025-02-26 17:22:40 发布

yjx23332

最新推荐文章于 2025-02-26 17:22:40 发布

阅读量4.5k

点赞数 5

分类专栏： HarmonyOS（笔记）文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/weixin_46949627/article/details/121069881

版权

HarmonyOS（笔记）专栏收录该内容

9 篇文章

订阅专栏

一、组件

一个用户界面至少包含一个布局。

展示出来的元素，都为组件。

组件在未被添加到布局中时，既无法显示也无法交互。

按钮组件
图片组件
文本框组件
文本输入组件
进度组件
滑块组件
多选框组件
单选框组件
....

在鸿蒙中，分为两大类：显示类与交互类组件。

显示类：只负责显示数据
交互组件：负责进行交互

父类都是Component（布局也是其子类了，是一个负责装载其他组件的组件）。

二、显示类组件

通用属性

宽高

match_content:包裹内容。

match_parent:填充父类。

具体数值：

像素(px)：意味着组件大小写死了。
vp=fp=(px*160)/ppi（ppi-Pixels Per Inch:屏幕像素点密度=对角线像素点个数/屏幕尺寸）。
vp:长度单位，长、宽等。
fp:大小单位，字体大小等。

颜色

同其他大多语言取色一样，用16位的光学三原色RGB表示，

红绿蓝

十六进制：#FFFFFF

十进制： (255,255,255)

xml中一般用十六进制，代码中用十进制。

内外边距

与CSS相同，

外边距

自身宽高不变向外进行占位，即组件外侧距离其他组件/父件距离的设置

margin：同时设置上下左右四个方向

top/left/right/bottom_margin

内边距

自身向内部进行占位，一般用于设置文本位置

padding：同时设置上下左右四个方向

top/left/right/bottom_padding

Text：文本组件

ohos:multiple_lines：是否允许多行

ohos:max_text_lines：最大行数，默认一行

ohos:truncation_mode：省略文字（前、后、中间）

跑马灯效果

ohos:truncation_mode="auto_scrolling"：允许自动滚动

ohos:auto_scrolling_count：文本自动滚动次数

ohos:auto_scrolling_duration：文本多长时间跑完一次（毫秒）

<?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:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text1"
        ohos:height="100vp"
        ohos:width="300vp"
        ohos:text="你好,开发者!!!!!!!!!!!!!!!!!!!!!!!!!！！！！!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
        ohos:text_size="150"
        ohos:text_color="white"
        ohos:truncation_mode="auto_scrolling"
        ohos:auto_scrolling_count="unlimited"
        ohos:auto_scrolling_duration="20000"
        ohos:background_element="black"
        />

</DirectionalLayout>

然后需要在布局中用代码激活

现在在页面中激活

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.Text;


public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //1.获取Text
        Text text = (Text) findComponentById(ResourceTable.Id_text1);

        //2.给Text文本标志添加事件
        //表示当我们单击一下的时候，开启跑马灯效果
        text.setClickedListener(this);
    }

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

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

    @Override
    public void onClick(Component component) {
        //开启跑马灯效果
        Text t = (Text)component;
        t.startAutoScrolling();
    }
}

Image：图片组件

background_element:背景图片（在图片之下）

Image_src：前景图片（展示的图片）

clip_alignment:裁剪方式

scale_mode:缩放类型

<?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:alignment="center"
    ohos:orientation="vertical">
    <Image
        ohos:height="1000px"
        ohos:width="1000px"
        ohos:image_src="$media:danganronpa"
        ohos:background_element="#000000"
        />

</DirectionalLayout>

剪切与缩放

ohos:clip_alignment：当长宽比图片小的时候，设置剪切的位置。

    <Image
        ohos:height="200px"
        ohos:width="200px"
        ohos:image_src="$media:danganronpa"
        ohos:background_element="#000000"
        ohos:clip_alignment="center"
        />

同时，可以用"left|top"代表左上

ohos:scale_mode="inside"：等比缩小居中，直至与Image相同或更小时。默认为center，不缩放。

<Image
        ohos:height="300px"
        ohos:width="300px"
        ohos:image_src="$media:danganronpa"
        ohos:background_element="#000000"
        ohos:scale_mode="inside"
        />

ohos:scale_mode="stretch"：拉伸铺满

<Image
        ohos:height="700px"
        ohos:width="1000px"
        ohos:image_src="$media:danganronpa"
        ohos:background_element="#000000"
        ohos:scale_mode="stretch"
        />

ohos:scale_mode="zoom_center"：等比放大，直至与窄边一致，居中。

弹框组件

普通弹框（CommonDialog）：提示+用户操作
消息提示弹框（ToastDialog）：告知用户消息

Context:上下文，界面对象，即要展示在其上。

普通弹框：

默认布局：

标题
提示内容
选择按钮（最多3个）

<?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:alignment="center"
    ohos:orientation="vertical">
    <Button
        ohos:id="$+id:but1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="点击"
        ohos:text_size="40vp"
        ohos:background_element="red"
        />
    
</DirectionalLayout

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.window.dialog.CommonDialog;
import ohos.agp.window.dialog.IDialog;


public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Button but = (Button)findComponentById(ResourceTable.Id_but1);
        but.setClickedListener(this);
    }

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

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

    @Override
    public void onClick(Component component) {
        //创建弹框对象
        CommonDialog cd = new CommonDialog(this);
        cd.setTitleText("提示");
        cd.setContentText("已经点击按钮");
        //自动关闭弹窗,点击灰色区域自动关闭
        cd.setAutoClosable(true);

        //索引（0、1、2），按钮的文字、点击事件
        cd.setButton(0, "取消", new IDialog.ClickedListener() {
            @Override
            public void onClick(IDialog iDialog, int i) {
                //事件内容
                //销毁弹窗
                cd.destroy();
            }
        });
        cd.setButton(1,"确定",null);
        //显示弹框
        cd.show();
    }
}

抽取工具类

通常我们使用时，为了避免写这么多的代码，会将代码写为一个工具类，然后直接调用。

新建一个package包，和class

当然，可以通过增加传递的参数，使其更加灵活的表示我们需要的弹窗。

package com.example.myapplication.dialogutils;
import ohos.agp.window.dialog.CommonDialog;
import ohos.agp.window.dialog.IDialog;
import ohos.app.Context;

public class myDialog {
    public static void showDialog(Context context,String msg){
        //创建弹框对象
        CommonDialog cd = new CommonDialog(context);
        cd.setTitleText("提示");
        cd.setContentText(msg);
        //自动关闭弹窗,点击灰色区域自动关闭
        cd.setAutoClosable(true);

        //索引（0、1、2），按钮的文字、点击事件
        cd.setButton(0, "取消", new IDialog.ClickedListener() {
            @Override
            public void onClick(IDialog iDialog, int i) {
                //事件内容
                //销毁弹窗
                cd.destroy();
            }
        });
        cd.setButton(1,"确定",null);
        //显示弹框
        cd.show();

    }
}

然后修改我们的前面的Slice的点击事件

    import com.example.myapplication.dialogutils.myDialog;
    @Override
    public void onClick(Component component) {
        myDialog.showDialog(this,"已完成点击");
    }

消息提示弹框/吐司弹框

是普通弹框的子类。

<?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:alignment="center"
    ohos:orientation="vertical">
    <Button
        ohos:id="$+id:but1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="点击"
        ohos:text_size="40fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#2136FD"
        />

</DirectionalLayout>

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;


public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Button but = (Button)findComponentById(ResourceTable.Id_but1);
        but.setClickedListener(this);
    }

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

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

    @Override
    public void onClick(Component component) {
        ToastDialog td = new ToastDialog(this);
        //设置文本内容
        td.setText("已经点击");
        //居中放置
        td.setAlignment(LayoutAlignment.CENTER);
        //设置时长
        td.setDuration(2000);
        td.show();
    }
}

用xml中格式设置吐司弹窗抽取工具类的格式

创建一个新的xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:msg"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:text_alignment="center"
        ohos:background_element="#464343"
        />
</DirectionalLayout>

接着创建一个抽取工具类

package com.example.myapplication.dialogutils;
import com.example.myapplication.ResourceTable;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.Text;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;
import ohos.app.Context;

public class myDialog {
    public static void showToast(Context context,String message){
        //加载布局对象
        //LayoutScatter：布局工具类
        //getInstance：获取实例。即通过该方法，布局对象获取context对象中所需值。
        //parse：通过该方法，导入布局信息，加载xml的ID，是否依赖其他，是否依赖其他
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_mytoast,null,false);
        //加载文本组件
        Text msg = (Text)dl.findComponentById(ResourceTable.Id_msg);
        //设置到文本组件中
        msg.setText(message);


        ToastDialog td = new ToastDialog(context);
        //设置吐司大小，通过布局类来设置
        td.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,DirectionalLayout.LayoutConfig.MATCH_CONTENT);
        //设置事件
        td.setDuration(2000);
        //对齐方式
        td.setAlignment(LayoutAlignment.TOP);

        //将xml布局交给吐司
        td.setContentCustomComponent(dl);
        //让吐司出现
        td.show();
    }

}

现在修改点击事件

  import com.example.myapplication.dialogutils.myDialog;
    @Override
    public void onClick(Component component) {
        myDialog.showToast(this,"已经点击");
    }

时钟组件

time_zone="UTC":时区，GMT（格林威治标准时间）、CST、DST、UTC等

mode_24_hour（默认）:24小时制度

mode_12_hour:12小时制度

y-年
M-月
d-月份中的天数
H-24时制度（0-23）
m-小时中的分钟
s-分钟中的秒数
S-毫秒数
w-年份中的周数
W-月份中的周数
D-年份中的天数
F-月份中的星期
E-星期中的天数
a-am/pm标记
k-24时制度（1-24）
K-am/pm中的小时数（0-11）
h-am/pm中的小时数（1-12）
Z-时区，数字
z-时区，详细

24小时

<Clock
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:time_zone="UTC"
        ohos:mode_24_hour="y年M月d日 H:m:s"
        />

12小时

12小时制度有bug，不可以在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:alignment="center"
    ohos:orientation="vertical">
    <Clock
        ohos:id="$+id:clock1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="20fp"
        ohos:time_zone="UTC"
        />

</DirectionalLayout>

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Clock;


public class MainAbilitySlice extends AbilitySlice{
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Clock clock = (Clock) findComponentById(ResourceTable.Id_clock1);
        clock.set24HourModeEnabled(false);//关闭24小时制
        clock.setFormatIn12HourMode( "y年M月d日 h:m:s a");
    }

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

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

}

定时器

<?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:alignment="center"
    ohos:orientation="vertical">
    <TickTimer
        ohos:id="$+id:ticker"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#0000FF"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        />
    <Button
        ohos:id="$+id:start"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="开始计时"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#666600"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:top_margin="30vp"
        />
    <Button
        ohos:id="$+id:end"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="结束计时"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#666600"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:top_margin="30vp"
        />
</DirectionalLayout>

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TickTimer;



public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    TickTimer tickTimer;
    Button start;
    Button end;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        tickTimer = (TickTimer)findComponentById(ResourceTable.Id_ticker);
        start = (Button)findComponentById(ResourceTable.Id_start);
        end = (Button)findComponentById(ResourceTable.Id_end);
        start.setClickedListener(this);
        end.setClickedListener(this);

        //设置定时器
        //false:正向计时，0，1，2，3，4...
        //true:反向计时，5，4，3，2，1，0
        tickTimer.setCountDown(false);
        //计时格式
        tickTimer.setFormat("m:s");
    }

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

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

    @Override
    public void onClick(Component component) {
        if(component == start){
            tickTimer.start();
        }
        else if (component == end){
            tickTimer.stop();
        }

    }
}

BUG？

开始计时时，时间似乎不是0
结束计时时，界面停止（比如9s），但是后台仍旧在执行，重新开始（间隔10s）的时候，本应该从结束处（9s）开始继续计时，结果连间隔时间也算进去了（即，从19s开始）。
tickTimer.setBaseTime(0)：设置基准时间，如果没有设置时间，从时间原点计时；为0，则是从当前（实际）时间计时；非0，也是从当前时间开始计时，参数为 3600*1000，是从当前时间开始，减少

进度条

Progress进度条组件

ohos:progress=""：进度条实际填充颜色

ohos:progress_hint_text="0%"：进度条显示文字

<?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:alignment="center"
    ohos:orientation="vertical">
    <ProgressBar
        ohos:id="$+id:pb"
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:progress="0"
        ohos:progress_hint_text="0%"
        ohos:progress_hint_text_color="#000000"
        ohos:progress_width="50vp"
        ohos:progress_color="#FF0000"
        ohos:max="100"
        ohos:min="0"
        />
</DirectionalLayout>

每点一次，加15%

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.ProgressBar;
import ohos.agp.components.TickTimer;



public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        ProgressBar pb = (ProgressBar) findComponentById(ResourceTable.Id_pb);
        //每点击一次进度条，加5%
        pb.setClickedListener(this);
    }
    @Override
    public void onActive() {
        super.onActive();
    }

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

    @Override
    public void onClick(Component component) {
        ProgressBar pb = (ProgressBar) component;
        int value = pb.getProgress();
        value = value+5;
        if(value>100){
            return;
        }
        pb.setProgressValue(value);
        pb.setProgressHintText(value+"%");
    }
}

RoundProgressBar

是Progress进度条组件的子类

<?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:alignment="center"
    ohos:orientation="vertical">
    <RoundProgressBar
        ohos:id="$+id:pb"
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:progress="0"
        ohos:progress_hint_text="0%"
        ohos:progress_hint_text_size="50vp"
        ohos:progress_hint_text_color="#000000"
        ohos:progress_width="20vp"
        ohos:progress_color="#FF0000"
        ohos:max="100"
        ohos:min="0"
        />
</DirectionalLayout>

三、交互类组件

TextField文本输入框组件

<?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"
    ohos:background_element="#F2F2F2"
    >
    <TextField
        ohos:id="$+id:text"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="请输入信息"
        ohos:text_size="17fp"
        ohos:text_color="#999999"
        ohos:text_alignment="center"
        ohos:top_margin="100vp"
        ohos:layout_alignment="horizontal_center"
        ohos:background_element="#FFFFFF"
        />
</DirectionalLayout>

现在为其添加一个Button

 <Button
        ohos:id="$+id:but"
        ohos:height="47vp"
        ohos:width="319vp"
        ohos:text="获取信息"
        ohos:text_size="24vp"
        ohos:text_color="#FEFEFE"
        ohos:text_alignment="center"
        ohos:background_element="#21a8FD"
        ohos:top_margin="77vp"
        ohos:layout_alignment="center"
        />

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TextField;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;


public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    TextField tf;
    Button but;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        tf = (TextField) findComponentById(ResourceTable.Id_text);
        but = (Button)findComponentById(ResourceTable.Id_but);
        but.setClickedListener(this);
    }
    @Override
    public void onActive() {
        super.onActive();
    }

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

    @Override
    public void onClick(Component component) {
        String message = tf.getText();
        ToastDialog td = new ToastDialog(this);
        td.setTransparent(true);
        td.setAlignment(LayoutAlignment.BOTTOM);
        td.setOffset(0,200);
        td.setText(message);
        td.show();

    }
}

文本高级设置
ohos:text_input_type="":设置文本类型

ohos:basement="":设置下划线颜色

ohos:element_selection_left_bubble=""：选中时，左侧气泡提示，可以是颜色或者图片

ohos:element_selection_right_bubble=""：选中时，右侧气泡提示，可以是颜色或者图片

ohos:element_cursor_bubble=""：气泡提示，可以是颜色或者图片

加密格式

<TextField
        ohos:id="$+id:text"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="请输入信息"
        ohos:text_size="17fp"
        ohos:text_color="#999999"
        ohos:text_alignment="center"
        ohos:top_margin="100vp"
        ohos:layout_alignment="horizontal_center"
        ohos:text_input_type="pattern_password"
        ohos:background_element="#FFFFFF"
        ohos:basement="#000000"
        ohos:element_selection_left_bubble="$media:danganronpa"
        ohos:element_selection_right_bubble="$media:danganronpa"
        ohos:element_cursor_bubble="#FF0000"
        />

Checkbox多选框组件

选择点+属性

ohos:marked="false":为true时表示默认选中该项

ohos:check_element=""：选择区图片/颜色

<Checkbox
        ohos:id="$+id:cb"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="玩游戏"
        ohos:marked="false"
        ohos:text_size="30fp"
        />

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Checkbox;
import ohos.agp.components.TextField;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;


public class MainAbilitySlice extends AbilitySlice 
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Checkbox checkbox = (Checkbox) findComponentById(ResourceTable.Id_cb);
        checkbox.setChecked(true);
        boolean checked = checkbox.isChecked();
        if(checked){
            ToastDialog td = new ToastDialog(this);
            td.setAlignment(LayoutAlignment.BOTTOM);
            td.setDuration(2000);
            td.setText(checkbox.getText());
            td.show();
        }
    }
    @Override
    public void onActive() {
        super.onActive();
    }

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

}

多选框状态监听事件

当多选框状态改变就会被调用，当然，用单机事件也可以模拟

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AbsButton;
import ohos.agp.components.Button;
import ohos.agp.components.Checkbox;
import ohos.agp.components.TextField;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;


public class MainAbilitySlice extends AbilitySlice implements AbsButton.CheckedStateChangedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Checkbox checkbox = (Checkbox) findComponentById(ResourceTable.Id_cb);
        checkbox.setChecked(true);
        checkbox.setCheckedStateChangedListener(this);
    }
    @Override
    public void onActive() {
        super.onActive();
    }

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

    @Override
    public void onCheckedChanged(AbsButton absButton, boolean b) {
        ToastDialog td = new ToastDialog(this);
        td.setAlignment(LayoutAlignment.BOTTOM);
        td.setDuration(2000);
        if(b){

            td.setText(absButton.getText());

        }
        else{
            td.setText("已取消");
        }
        td.show();
    }
}

RadioButton单选框组件

<?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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#F2F2F2"
    >
    <RadioContainer
        ohos:id="$+id:rc"
        ohos:height="match_content"
        ohos:width="match_content">
        <RadioButton
            ohos:id="$+id:man"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="男"
            ohos:text_size="30fp"
            ohos:text_alignment="center"
            ohos:marked="true"
            />
        <RadioButton
            ohos:id="$+id:woman"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="女"
            ohos:text_size="30fp"
            ohos:text_alignment="center"
            ohos:marked="false"
            />
    </RadioContainer>
</DirectionalLayout>

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.RadioButton;
import ohos.agp.components.RadioContainer;
import ohos.agp.components.TextField;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;


public class MainAbilitySlice extends AbilitySlice implements RadioContainer.CheckedStateChangedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        RadioButton rb1 = (RadioButton)findComponentById(ResourceTable.Id_man);
        RadioButton rb2 = (RadioButton)findComponentById(ResourceTable.Id_woman);
        RadioContainer rc = (RadioContainer)findComponentById(ResourceTable.Id_rc) ;
        rb1.setChecked(false);
        rb2.setChecked(true);
        rc.setMarkChangedListener(this);
    }
    @Override
    public void onActive() {
        super.onActive();
    }

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


    @Override
    public void onCheckedChanged(RadioContainer radioContainer, int i) {
        RadioButton rb = (RadioButton) radioContainer.getComponentAt(i);
        ToastDialog td = new ToastDialog(this);
        td.setAlignment(LayoutAlignment.BOTTOM);
        td.setDuration(2000);
        if(rb.isChecked()){
            td.setText(rb.getText());
        }
        td.show();
    }
}

switch开关组件

由滑块+滑轨组成

ohos:thumb_element=""：滑块图片/颜色设置
ohos:track_element=""：滑轨图片/颜色设置

<?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:alignment="center"
    ohos:orientation="vertical"
    >
    <Switch
        ohos:id="$+id:slibar1"
        ohos:width="100vp"
        ohos:height="40vp"
        ohos:text_state_on="开"
        ohos:text_state_off="关"
        ohos:text_size="20vp"

        />
</DirectionalLayout>

默认滑块是圆形，自己设置后将需要自己设置，因此，这里先用默认设置。同时，因为switch是JAVA关键字，因此需要避免相关

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;


public class MainAbilitySlice extends AbilitySlice implements AbsButton.CheckedStateChangedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Switch slibar=(Switch) findComponentById(ResourceTable.Id_slibar1);

        slibar.setCheckedStateChangedListener(this);

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

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

    @Override
    public void onCheckedChanged(AbsButton absButton, boolean b) {
        ToastDialog td = new ToastDialog(this);
        td.setAlignment(LayoutAlignment.BOTTOM);
        td.setDuration(2000);

        if(b) {
            td.setText("开启");
        }
        else{
            td.setText("关闭");
        }
        td.show();
    }
}

slider滑块

是进度条组件（ProgressBar）的后代

进度条+滑块

已完成进度颜色/图片（已浏览）：ohos:progress_color=""
已完成进度值（滑块位置）：ohos:progress=""
是否可以拖动设置（拖动进度条）：ohos:enabled=""，默认是true
滑块颜色/图片（当前位置）：ohos:thumb_element=""
总进度颜色/图片（总长度）：ohos:background_instruct_element=""
次一级进度值（缓冲）：ohos:vice_progress=""
次一级进度颜色/图片（缓冲）：ohos:vice_progress_element=""

<Slider
    ohos:height="50vp"
    ohos:width="300vp"
    />

同理，在设置后，默认的美化设置会被清空。

<?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:alignment="center"
    ohos:orientation="vertical"
    >
    <Slider
        ohos:id="$+id:slider"
        ohos:height="50vp"
        ohos:width="300vp"
        ohos:enabled="true"
        ohos:background_instruct_element="#0000FF"
        ohos:progress_color="#FF0000"
        ohos:thumb_element="#00FF00"
        ohos:vice_progress="80"
        ohos:vice_progress_element="#923456"
        ohos:max="100"
        ohos:min="0"
        />
</DirectionalLayout>

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;


public class MainAbilitySlice extends AbilitySlice implements Slider.ValueChangedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Slider slider = (Slider)findComponentById(ResourceTable.Id_slider);
        slider.setValueChangedListener(this);

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

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

    //当进度值改变
    //滑块组件的对象
    //当前进度值
    //如果enabled为true，b则为true
    @Override
    public void onProgressUpdated(Slider slider, int i, boolean b) {
        ToastDialog td = new ToastDialog(this);
        td.setAlignment(LayoutAlignment.BOTTOM);
        td.setDuration(500);
        td.setText("当前进度为："+ i);
        td.show();
    }
    //下面两个方法会反复调用onProgressUpdated，它们本身在一次监听中只会调用一次
    //当用户鼠标或手指，按下滑块且不松开时
    @Override
    public void onTouchStart(Slider slider) {
        ToastDialog td = new ToastDialog(this);
        td.setAlignment(LayoutAlignment.BOTTOM);
        td.setDuration(500);
        td.setText("按下");
        td.show();
    }
    //当用户鼠标或手指，松开滑块时
    @Override
    public void onTouchEnd(Slider slider) {
        ToastDialog td = new ToastDialog(this);
        td.setAlignment(LayoutAlignment.BOTTOM);
        td.setDuration(500);
        td.setText("松开");
        td.show();
    }
}

由于这里用的是吐司，设置持续时间是500毫秒，因此会出现”延迟“的现象，可以通过修改Text的方式来呈现。

案例：图片缩放与拖动

<?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:alignment="center"
    ohos:orientation="vertical"
    >
    <Image
        ohos:id="$+id:danganronpa"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:danganronpa"/>
    <Slider
        ohos:id="$+id:slider"
        ohos:height="50vp"
        ohos:width="300vp"
        ohos:background_instruct_element="#667755"
        ohos:max="100"
        ohos:min="1"
        ohos:progress="10"
        />

</DirectionalLayout>

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.multimodalinput.event.MmiPoint;
import ohos.multimodalinput.event.TouchEvent;


public class MainAbilitySlice extends AbilitySlice implements Slider.ValueChangedListener ,Component.TouchEventListener{
    Image img;
    float x1;//手指按下位置x轴
    float y1;//手指按下位置y轴
    float imgX;//图片左上角坐标X
    float imgY;//图片左上角坐标Y
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        img = (Image)findComponentById(ResourceTable.Id_danganronpa);
        Slider slider = (Slider)findComponentById(ResourceTable.Id_slider);
        slider.setValueChangedListener(this);
        img.setTouchEventListener(this);
    }
    @Override
    public void onActive() {
        super.onActive();
    }

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

    @Override
    public void onProgressUpdated(Slider slider, int i, boolean b) {
        //放大或许缩小多少,(min:1~max:100)*0.1
        float rate = (float)(i *0.1);
        img.setScale(rate,rate);
    }
    @Override
    public void onTouchStart(Slider slider) {

    }
    @Override
    public void onTouchEnd(Slider slider) {

    }

    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        int action = touchEvent.getAction();
        MmiPoint postion = touchEvent.getPointerPosition(0);
        switch(action) {
            case TouchEvent.PRIMARY_POINT_DOWN: {//手指按下位置
                x1 = postion.getX();
                y1 = postion.getY();
                imgX = img.getTranslationX();
                imgY = img.getTranslationY();
                break;
            }
            case TouchEvent.POINT_MOVE: {//手指按下移动
                float x2 = postion.getX();
                float y2 = postion.getY();
                float x = x2 - x1;
                float y = y2 - y1;
                img.setTranslation(imgX + x, imgY + y);
                break;
            }
            default: {
                throw new IllegalStateException("Unexpected value: " + action);
            }
        }
        return true;
    }
}

ListContainer列表容器组件

其容器里面是由许多item填充
需要准备一个统一的item布局格式
需要用javabean类去表示item
需要一个适配器去管理每一个item

<?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:alignment="center"
    ohos:orientation="vertical"
    >
    <ListContainer
        ohos:id="$+id:listContainer"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>

另创建一个布局xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:itemtext"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:text_size="35fp"/>
</DirectionalLayout>

新建一个package（domain），再创建一个class作为javebeen包（Item）。

package com.example.myapplication.domain;

public class Item {
    private String text;//用于给item中text赋值

    public Item() {
    }

    public Item(String text) {
        this.text = text;
    }

    public String getText(){
        return text;
    }
    public void setText(String text){
        this.text = text;
    }
}

准备一个适配器（ItemProvider），去管理item

package com.example.myapplication.provider;

import com.example.myapplication.domain.Item;
import ohos.agp.components.*;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;

import java.util.ArrayList;

public class ItemProvider extends BaseItemProvider {
    private ArrayList<Item> list;//用于存储所有Item对象
    private AbilitySlice as;
    public ItemProvider( ArrayList<Item> list,AbilitySlice as) {
        this.list = list;
        this.as = as;
    }
    public ArrayList<Item> getList(){
        return list;
    }
    public void setList(ArrayList<Item> list){
        this.list = list;
    }
    public AbilitySlice getAs(AbilitySlice as){
        return as;
    }
    public void setAs(AbilitySlice as){
        this.as = as;
    }
    //返回总数
    @Override
    public int getCount() {
        return list.size();
    }

    //索引
    @Override
    public Object getItem(int i) {
        if(list!=null&&i>=0&&i<list.size()){
            return list.get(i);
        }
        return null;
    }

    //返回某一项的ID
    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        //获取布局对象
        DirectionalLayout dl =(DirectionalLayout)LayoutScatter.getInstance(as).parse(ResourceTable.Layout_itemview,null,false);
        //获取数据
        Item item = list.get(i);
        //将布局中的text拿出
        Text text = (Text) dl.findComponentById(ResourceTable.Id_itemtext);
        //设置文本内容
        text.setText(item.getText());
        //返回该布局,布局包裹了text
        return dl;
    }
}

回到MainAbilitySlice

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import com.example.myapplication.provider.ItemProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ListContainer;

import com.example.myapplication.domain.Item;
import java.util.ArrayList;


public class MainAbilitySlice extends AbilitySlice{
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_listContainer);
        //创建一个数据集合
        ArrayList<Item> dataList = getData();
        //创建一个管理员对象
        ItemProvider itemProviderp = new ItemProvider(dataList,this);
        //将适配器交给列表容器
        listContainer.setItemProvider(itemProviderp);
    }
    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
    public ArrayList<Item> getData(){
        ArrayList<Item> list = new ArrayList<>();
        for(int i =0;i<100;i++){
            list.add(new Item("item"+i));
        }
        return list;
    }

}

基本优化

在适配器类中有一个getComponet方法，每加载一次item就会调用一次getComponet方法。
同时，适配器类会进行预加载，在显示屏中，会提前在当前进方向外多加载一个item。
当item划出屏幕时，就会被销毁。

由此代码会导致内存之中产生大量的dl垃圾,由此进行最基本优化。

//i指的是加载哪一行item
    //Component表示当前要销毁的Component
    //Component容器，装载已有的Component
    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        DirectionalLayout dl;
        //获取布局对象
        if(component!=null){
            //将要销毁的component的布局赋值给要生成的component的布局
            dl = (DirectionalLayout) component;
        }
        else{
            dl =(DirectionalLayout)LayoutScatter.getInstance(as).parse(ResourceTable.Layout_itemview,null,false);
        }
        //获取数据
        Item item = list.get(i);
        //将布局中的text拿出
        Text text = (Text) dl.findComponentById(ResourceTable.Id_itemtext);
        //设置文本内容
        text.setText(item.getText());
        //返回该布局,布局包裹了text
        return dl;
    }

Picker滑动选择器组件

文本分为

未被选择的文本

ohos:normal_text_size=""
ohos:normal_text_color=""

已被选择的文本

ohos:selected_text_size=""
ohos:selected_text_color=""

选择的值范围（默认0~9）

ohos:max_value=""
ohos:min_value=""

默认选择的值

ohos:value=""

着色器：向中间渐变

ohos:shader_color=""

<?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:alignment="center"
    ohos:orientation="vertical">

   <Picker
       ohos:id="$+id:picker"
       ohos:height="match_content"
       ohos:width="100vp"
       ohos:normal_text_size="20fp"
       ohos:selected_text_size="20fp"
       ohos:normal_text_color="#21a8fd"
       ohos:selected_text_color="#FF0000"
       ohos:max_value="6"
       ohos:min_value="0"
       ohos:value="3"
       />

</DirectionalLayout>

package com.example.myapplication.slice;

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

import java.util.ArrayList;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Picker picker = (Picker)findComponentById(ResourceTable.Id_picker);
        ArrayList<String> list = new ArrayList<>();
        list.add("星期一");
        list.add("星期二");
        list.add("星期三");
        list.add("星期四");
        list.add("星期五");
        list.add("星期六");
        list.add("星期日");
        picker.setFormatter(
            (int i) -> {
                //i表示要展示的数字
                //返回的就是要展示的内容
                return list.get(i);
            }
        );
    }

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

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

省-市联动的滑动选择

<?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:alignment="center"
    ohos:orientation="horizontal">

   <Picker
      ohos:id="$+id:province"
      ohos:height="match_content"
      ohos:width="100vp"
      ohos:normal_text_size="20fp"
      ohos:selected_text_size="20fp"
      ohos:value="0"/>
   <Picker
       ohos:id="$+id:city"
       ohos:height="match_content"
       ohos:width="100vp"
       ohos:normal_text_size="20fp"
       ohos:selected_text_size="20fp"
       ohos:left_margin="10vp"
       ohos:value="0"/>
</DirectionalLayout>

准备一个Javabean

package com.example.myapplication.domain;

import java.util.ArrayList;

public class Province {
    private String name;
    private ArrayList<String> list;
    public Province(){}
    public Province(String name,ArrayList<String> list){
        this.name = name;
        this.list = list;
    }

    public String getName(){
        return name;
    }
    public ArrayList<String> getList(){ return list; }

    public void setName(String name){
        this.name = name;
    }
    public void setList(ArrayList<String> list){
        this.list = list;
    }

}

然后修改mainabilityslice

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import com.example.myapplication.domain.Province;
import ohos.agp.components.Picker;

import java.util.ArrayList;


public class MainAbilitySlice extends AbilitySlice implements Picker.ValueChangedListener {
    Picker province;
    Picker city;
    ArrayList<Province> provincesList;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        province = (Picker)findComponentById(ResourceTable.Id_province);
        city = (Picker)findComponentById(ResourceTable.Id_city);
        provincesList = getData();

        //最大值最小值要在setFormatter前设置
        province.setMinValue(0);
        province.setMaxValue(provincesList.size()-1);
        province.setFormatter(i->provincesList.get(i).getName());


        city.setMinValue(0);
        city.setMaxValue(provincesList.get(0).getList().size()-1);
        city.setFormatter(i->provincesList.get(0).getList().get(i));

        province.setValueChangedListener(this);
    }
    public ArrayList<Province> getData(){
        ArrayList<Province> provinceList = new ArrayList<>();
        //江苏省的市的集合
        ArrayList<String> jiangSuCities = new ArrayList<>();
        jiangSuCities.add("南京市");
        jiangSuCities.add("苏州市");
        jiangSuCities.add("扬州市");
        jiangSuCities.add("徐州市");
        jiangSuCities.add("无锡市");

        //四川省的是的集合
        ArrayList<String> siChuanCities = new ArrayList<>();
        siChuanCities.add("成都市");
        siChuanCities.add("绵阳市");
        siChuanCities.add("绵阳市");
        siChuanCities.add("绵阳市");


        //添加省
        provinceList.add(new Province("江苏省",jiangSuCities));
        provinceList.add(new Province("四川省",siChuanCities));
        return provinceList;
    }
    @Override
    public void onActive() {
        super.onActive();
    }

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

    @Override
    //当前改变的滑动选择七对象
    //旧值,之前的值
    //新值，现在的值
    public void onValueChanged(Picker picker, int i, int i1) {
        if(picker==province){
            Province choosedProvince = provincesList.get(i1);
            city.setMaxValue(choosedProvince.getList().size()-1);
            city.setFormatter(x->choosedProvince.getList().get(x));
            //设置城市默认选中
            city.setValue(0);
        }
    }
}

时间滑动选择器组件

DatePicker

<?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:alignment="center"
    ohos:orientation="vertical">
   <DatePicker
      ohos:id="$+id:datepicker"
      ohos:height="match_content"
      ohos:width="300vp"
      ohos:normal_text_size="20fp"
      ohos:selected_text_size="20fp"/>
   <Text
      ohos:id="$+id:text"
      ohos:height="40vp"
      ohos:width="300vp"
      ohos:text_size="35fp"/>

</DirectionalLayout>

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DatePicker;
import ohos.agp.components.Text;


public class MainAbilitySlice extends AbilitySlice implements DatePicker.ValueChangedListener {
    Text text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        text = (Text)findComponentById(ResourceTable.Id_text);
        DatePicker datePicker = (DatePicker)findComponentById(ResourceTable.Id_datepicker);
        datePicker.setValueChangedListener(this);
    }

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

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
    //值改变的datePicker
    //年，月，日
    @Override
    public void onValueChanged(DatePicker datePicker, int i, int i1, int i2) {
        text.setText(i+"年"+i1+"月"+i2+"日");
    }
}

TimePicker

用法一模一样

<?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:alignment="center"
    ohos:orientation="vertical">
   <TimePicker
      ohos:id="$+id:timepicker"
      ohos:height="match_content"
      ohos:width="300vp"
      ohos:normal_text_size="20fp"
      ohos:selected_text_size="20fp"/>
   <Text
      ohos:id="$+id:text"
      ohos:height="40vp"
      ohos:width="300vp"
      ohos:text_size="35fp"/>

</DirectionalLayout>

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

import ohos.agp.components.Text;
import ohos.agp.components.TimePicker;


public class MainAbilitySlice extends AbilitySlice implements TimePicker.TimeChangedListener {
    Text text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        text = (Text)findComponentById(ResourceTable.Id_text);
        TimePicker timePicker = (TimePicker)findComponentById(ResourceTable.Id_timepicker);
        timePicker.setTimeChangedListener(this);
    }

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

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

    @Override
    public void onTimeChanged(TimePicker timePicker, int i, int i1, int i2) {
        text.setText(i+"时"+i1+"分"+i2+"秒");
    }
}