鸿蒙应用开发 | (Slider) 用法，拖动进度条改变图片大小和透明度_鸿蒙可拖动progressbar

导语：大家好，我是你们的朋友 朋哥，十年码农经验，对技术情有独钟。

今天来一个小小的实战，使用进度条的托送功能，实现改变图片的比例和透明度 。

不多说了，今天的内容简单，下面我们开始今天的文章，还是老规矩，通过如下几点来说：

1，功能的使用场景 
2，用到的属性 
3，实战

简介

鸿蒙中进度条目前有3种方式：RoundProgressBar，ProgressBar，Slider，分别是：圆形，线性，和拖动，今天来说说拖动进度条，该类型的进度条有一个拖动bar用来拖动，通过重写Slider.ValueChangedListener 的函数 onProgressUpdated 实现拖动的操作更新 。
 

用到的属性

Image：
 

image_scane.setScale(i/10,i/10);
image_scane.setAlpha(i/10);

实战

1，添加两个拖动条

<?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:padding="10vp"
    ohos:alignment="horizontal_center"
    ohos:orientation="vertical">
 
    <Image
        ohos:id="$+id:image_scane"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:scale_mode="clip_center"
        ohos:image_src="$media:image"
        />
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="100vp"
        ohos:text_size="18fp"
        ohos:text="改变图片大小"/>
    <Slider
        ohos:id="$+id:slider_opt"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:top_margin="10vp"/>
 
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="10vp"
        ohos:text_size="18fp"
        ohos:text="改变图片透明度"/>
    <Slider
        ohos:id="$+id:slider_opt2"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:top_margin="10vp"/>
 
</DirectionalLayout>

2，添加监听接口

实现 接口 ：Slider.ValueChangedListener

重写函数：

@Override
public void onProgressUpdated(Slider slider, int i, boolean b) {
    image_scane.setScale(i/10,i/10);
    image_scane.setAlpha(i/10);
}
 
@Override
public void onTouchStart(Slider slider) {
 
}
 
@Override
public void onTouchEnd(Slider slider) {
 
}

在 onProgressUpdated 函数中更新操作：​​​​​​​

image_scane.setScale(i/10,i/10);image_scane.setAlpha(i/10);

源码：
https://gitee.com/codegrowth/haomony-develop/tree/master/SliderChangeImageScanAphen

老规矩 代码不能少，下载代码 运行效果看看，记得点个赞。
源码：
https://gitee.com/codegrowth/haomony-develop/tree/master/ProgressBar​​​​​​​

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

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

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

作者：码工
 

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