【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )

举报
韩曙亮 发表于 2022/01/11 00:20:25 2022/01/11
【摘要】 文章目录 一、布局中设置拖动条 Slider 组件二、代码中控制拖动条 Slider 组件 一、布局中设置拖动条 Slider 组件 注意该 Slider 组件与 ...





一、布局中设置拖动条 Slider 组件



注意该 Slider 组件与 进度条 Progressbar 组件的区别 , Progressbar 不能拖动 , 只有显示功能 ;


布局中设置的 Slider 拖动条 :

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

    <Slider
        ohos:id="$+id:button"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="200"

        ohos:orientation="horizontal"

        ohos:min="0"
        ohos:max="100"
        ohos:progress="66"

        ohos:background_element="#000000"
        ohos:progress_color="#00FF00"

        ohos:text="更新当前进度值"
        ohos:text_size="100"/>

    <Button
        ohos:id="$+id:button"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="200"
        ohos:layout_alignment="horizontal_center"
        ohos:text="更新当前进度值按钮"
        ohos:text_size="50"/>

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="200"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="当前进度值 : 66"
        ohos:text_size="100"/>

</DirectionalLayout>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

Slider 相关标签属性说明 :

设置拖动条方向 : ohos:orientation=“horizontal” , 水平方向 ;

设置最小值 : ohos:min=“0” , 0 ;

设置最大值 : ohos:max=“100” , 100 ;

设置当前值 : ohos:progress=“66” , 66 ;

设置背景颜色 : ohos:background_element="#000000" , 黑色 ;

设置进度条颜色 : ohos:progress_color="#00FF00" , 绿色 ;


纯布局效果展示 :

在这里插入图片描述





二、代码中控制拖动条 Slider 组件



代码中控制拖动条 Slider 组件 :

界面中有 Slider , Button , Text 三个组件, 点击按钮 , 将 Slider 中的进度值显示到 Text 组件中 ;

package com.example.slider.slice;

import com.example.slider.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.Slider;
import ohos.agp.components.Text;

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

        // 获取布局文件中的拖动条 Slider
        Slider slider = (Slider) findComponentById(ResourceTable.Id_slider);
        // 获取布局文件中的按钮 Button
        Button button = (Button) findComponentById(ResourceTable.Id_button);
        // 获取布局文件中的文本 Text
        Text text = (Text) findComponentById(ResourceTable.Id_text);

        // 设置按钮点击事件
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                // 获取当前属性值
                int progress = slider.getProgress();
                text.setText("当前进度值 : " + progress);
            }
        });

    }

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

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


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

在这里插入图片描述

文章来源: hanshuliang.blog.csdn.net,作者:韩曙亮,版权归原作者所有,如需转载,请联系作者。

原文链接:hanshuliang.blog.csdn.net/article/details/111608421

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。